Remix K-pop 栈

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.sample 文件的 .env 文件中，或通过 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，你还可以

  • 测试函数
  • 测试重定向
  • 使用 netlify dev --live 通过 url 共享实时会话
  • 以及更多 :)

注意：运行 Netlify CLI 时，文件更改将重建资源，但除非刷新页面，否则你不会看到对当前页面的更改。由于 Netlify CLI 构建 Remix 应用服务器的方式，它不支持热模块替换。

相关代码

这是一个非常简单的笔记应用，但它是如何使用 Remix 和 Supabase 构建完整栈应用的一个很好的示例。主要功能是创建用户、登录和注销以及创建和删除笔记。

数据库

此项目使用 Supabase 进行数据存储和用户身份验证。

环境变量

你需要这两个环境变量才能连接到你的 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 栈中使用的 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 配置文件 (netlify.toml)。

想要立即部署？点击此按钮

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 脚本，你可以运行它来格式化项目中的所有文件。