Remix K-pop Stack

k-pop site image

已部署網站：kpop-stack.netlify.app

深入了解 Remix Stacks。

npx create-remix --template netlify-templates/kpop-stack

點擊此按鈕以建立新的 Github 儲存庫、新的 Netlify 專案，並將此堆疊部署到 CDN。

Deploy to Netlify Button

堆疊包含什麼

不喜歡堆疊的某些部分嗎？Fork 它，修改它，然後使用 npx create-remix --template your/repo！把它變成你自己的。

開發

  • 安裝所有相依性和 Netlify CLI

    npm install
npm install netlify-cli -g

  • 執行 Netlify init 腳本以建立或連線到您的 Netlify 專案

    netlify init

  • 將您的 Supabase 和會話環境變數新增到 .env 檔案中，例如 .env.sample 檔案，或透過 Netlify 專案儀表板，網址為 https://app.netlify.com/ 網站設定/建置與部署/環境

    SUPABASE_URL=""
SUPABASE_ANON_KEY=""
SESSION_SECRET=""

下面的資料庫部分有更多關於 Supabase 變數的資訊。初始的 create-remix 命令將 建立 SESSION_SECRET 變數，這是一個 16 個字元的隨機字串，因此如果沒有執行 remix-create，可以隨意設定一個隨機的 16 個字元。

專案儀表板中的環境變數清單。

screenshot of env vars in Netlify UI

  • 啟動開發伺服器

    npm run dev

這將在開發模式下啟動您的應用程式，並在檔案變更時重新建置資產。

在本機執行

Remix 開發伺服器在開發模式下啟動您的應用程式，並在檔案變更時重新建置資產。要啟動 Remix 開發伺服器

npm run dev

Netlify CLI 建置您的 Remix 應用程式伺服器的生產版本，並將其拆分為在本機執行的 Netlify 函式。這包括您開發的任何自訂 Netlify 函式。Netlify CLI 在其開發模式下執行所有這些。

它會提取您 Netlify 專案的所有 環境變數。您可以在 下面的資料庫部分中了解更多關於此專案的 Supabase 環境變數。

要啟動 Netlify 開發環境

netlify dev

使用 Netlify Dev 您還可以

  • 測試函式
  • 測試重新導向
  • 透過 URL 使用 netlify dev --live 分享即時會話
  • 以及更多 :)

注意：當執行 Netlify CLI 時，檔案變更將會重新建置資產，但除非您重新整理瀏覽器頁面，否則您不會看到您所在頁面的變更。由於 Netlify CLI 建置 Remix 應用程式伺服器的方式，它不支援熱模組重新載入。

相關程式碼

這是一個相當簡單的筆記應用程式，但這是一個很好的範例，說明如何使用 Remix 和 Supabase 建置完整堆疊應用程式。主要功能是建立使用者、登入和登出，以及建立和刪除筆記。

資料庫

此專案使用 Supabase 來儲存資料和使用者身份驗證。

環境變數

您需要這 2 個環境變數才能連線到您的 Supabase 實例

  • SUPABASE_ANON_KEY:

    位於設定/API/專案 API 金鑰中

    請參閱螢幕截圖

    supabase anon key location

  • SUPABASE_URL:

    位於設定/API/專案 URL 中

    請參閱螢幕截圖

    supabase url location

您可以將您的環境變數新增到 .env 檔案中 (如範例 .env.sample 所示)，由於它已新增到 .gitignore 檔案中，因此不會公開提交。或者，您可以將它新增到您的 Netlify 專案環境變數 (網站設定/建置與部署/環境)，如開發部分所示，以便可以輕鬆地與團隊成員分享。

建立資料庫

  • 您可以使用您的 GitHub 憑證註冊 Supabase

  • 在「專案」頁面上建立一個新專案

    CleanShot 2022-03-31 at 11 54 36

  • 接下來，您需要命名資料庫並確保儲存您選擇的密碼，然後您將想要選擇一個離您最近的地區

    CleanShot 2022-03-31 at 11 55 47

  • 專案需要一些時間才能完全建立，因此您需要等待才能進行下一步。

SQL 查詢

  • 在您的 Supabase 專案儀表板中，您可以在此處找到 SQL 編輯器

    CleanShot 2022-03-31 at 11 57 16

  • 選取「新查詢」

    CleanShot 2022-03-31 at 11 59 29

  • 以下是在 K-pop Stack 中使用的 SQL 查詢

    -- Create public profile table that references our auth.user
create table public.profiles (
  id uuid references auth.users not null,
  created_at timestamptz not null default current_timestamp,
  email varchar not null,

  primary key (id)
);

-- Create public notes table
create table public.notes (
  id uuid not null default uuid_generate_v4(),
  title text,
  body text,
  created_at timestamp default current_timestamp,
  updated_at timestamp default current_timestamp,
  profile_id uuid references public.profiles not null,

  primary key (id)
);

-- inserts a row into public.users
create or replace function public.handle_new_user()
returns trigger
language plpgsql
security definer set search_path = public
as $$
begin
  insert into public.profiles (id, email)
  values (new.id, new.email);
  return new;
end;
$$;

-- trigger the function every time a user is created
drop trigger if exists on_auth_user_created on auth.user;
create trigger on_auth_user_created
  after insert on auth.users
  for each row execute procedure public.handle_new_user();

  • 您可以將這些複製到 SQL 編輯器，然後按一下「執行」按鈕

    CleanShot 2022-03-31 at 12 04 31

  • 最後，您需要前往身份驗證/提供者/電子郵件並停用「確認電子郵件」選項

confirm-email

部署

此堆疊具有 Netlify 設定檔 (netlify.toml)，其中包含將您的專案部署到 Netlify 的 邊緣節點所需的所有資訊。

想要立即部署？點擊此按鈕

Deploy to Netlify Button

點擊此按鈕將開始設定新專案和部署。

從命令列部署

使用 git clone 命令複製此儲存庫。然後安裝 Netlify CLI 工具並執行 netlify init。

git clone https://github.com/netlify-templates/kpop-stack

npm install netlify-cli -g # to install the Netlify CLI tool globally

netlify init # initialize a new Netlify project & deploy

CI/CD

使用「部署到 Netlify」按鈕或 init 流程也會為您的專案設定持續部署，以便在您將程式碼推送至儲存庫時觸發並部署新的建置 (您可以從您的專案儀表板變更此設定：網站設定/建置與部署/持續部署)。

您也可以使用 netlify deploy 或 netlify deploy --prod 手動部署，然後使用 netlify open 開啟您的專案儀表板。

💡 如果您在部署命令中未使用 --prod，您將部署應用程式的預覽，並提供連結以與團隊成員分享，讓他們查看已部署的網站，而無需部署到生產環境

測試

Cypress

我們已在此專案中設定 Cypress 端對端測試的基本設定檔。您會在 cypress 目錄中找到這些檔案。當您進行變更時，請新增到現有的檔案或在 cypress/integrations 目錄中建立新檔案，以測試您的變更。

我們使用 @testing-library/cypress 來語義化地選取頁面上的元素。

若要在開發中執行這些測試，請執行 npm run e2e-test，這將啟動應用程式的開發伺服器以及 Cypress 用戶端。

若要查看 Remix 堆疊上 Cypress 測試的其他範例，請查看 Remix Grunge Stack 範例中的 cypress 目錄。

Netlify 外掛 Cypress

我們也使用 netlify-plugin-cypress 來驗證我們的範本是否正常運作。當您按原樣部署此專案時，cypress 測試會在成功建置時自動執行。如果您有興趣移除此功能，您將需要進入 netlify.toml 並移除 plugins 區段

[[headers]]
  for = "/build/*"
  [headers.values]
    "Cache-Control" = "public, max-age=31536000, s-maxage=31536000"

- [[plugins]]
-  package = "netlify-plugin-cypress"
-  [plugins.inputs]
-    record = true
-    group = "Testing Built Site"

您還需要從相依性中移除外掛：npm uninstall -D netlify-plugin-cypress

類型檢查

此專案使用 TypeScript。建議為您的編輯器設定 TypeScript，以取得具有類型檢查和自動完成功能的絕佳編輯器體驗。若要在整個專案中執行類型檢查，請執行 npm run typecheck。

程式碼檢查

此專案使用 ESLint 進行程式碼檢查。它在 .eslintrc.js 中設定。

格式化

我們在此專案中使用 Prettier 進行自動格式化。建議安裝編輯器外掛程式 (如 VSCode Prettier 外掛程式) 以在儲存時取得自動格式化。還有一個 npm run format 腳本，您可以執行以格式化專案中的所有檔案。