使用 Netlify、Tailwind、TypeScript 等创建一个 Remix 应用！

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

Remix K-pop 技术栈

k-pop site image

已部署网站: kpop-stack.netlify.app

了解更多关于 Remix 技术栈。

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

点击此按钮创建一个新的 Github 仓库、新的 Netlify 项目，并将此技术栈部署到 CDN。

技术栈包含什么

部署到 Edge 的 Netlify + 部署预览和 CI/CD
Supabase 数据库和身份验证
Tailwind 用于样式
Cypress 端到端测试
Prettier 代码格式化
ESLint 代码检查
TypeScript 静态类型

不喜欢技术栈的某些部分？ 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 App Server 的生产版本，并将其拆分为在本地运行的 Netlify 函数。这包括您开发的任何自定义 Netlify 函数。Netlify CLI 在其开发模式下运行所有这些。

它将拉取您 Netlify 项目的所有环境变量。您可以在下面的数据库部分中了解有关此项目的 Supabase 环境变量的更多信息。

要启动 Netlify 开发环境

netlify dev

使用 Netlify Dev，您还可以

测试函数
测试重定向
通过 url 使用 netlify dev --live 分享实时会话
等等 :)

注意：运行 Netlify CLI 时，文件更改将重建资源，但除非您刷新浏览器页面，否则您将看不到您所在页面的更改。由于 Netlify CLI 构建 Remix App Server 的方式，它不支持热模块重载。

数据库

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

环境变量

您将需要以下 2 个环境变量来连接到您的 Supabase 实例

SUPABASE_ANON_KEY:

在设置/API/项目 API 密钥中找到

请参见截图
SUPABASE_URL:

在设置/API/项目 URL 中找到

请参见截图

您可以将您的环境变量添加到 .env 文件（如示例 .env.sample 中所示），该文件不会公开提交，因为它已添加到 .gitignore 文件中。或者，您可以将其添加到您的 Netlify 项目环境变量（站点设置/构建和部署/环境），如开发部分所示，以便它们可以轻松与团队成员共享。

数据库创建

您可以使用您的 GitHub 凭据注册 Supabase
在“项目”页面上创建一个新项目
接下来，您需要命名数据库并确保保存您选择的密码，然后您将需要选择一个离您最近的区域
项目需要一些时间才能完全构建，因此您需要等待才能进行下一步操作。

SQL 查询

在您的 Supabase 项目仪表板中，您可以在此处找到 SQL 编辑器
选择“新建查询”

以下是 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 编辑器并单击“运行”按钮
最后，您需要转到身份验证/提供程序/电子邮件并禁用“确认电子邮件”选项

confirm-email

部署

此技术栈具有 Netlify 配置文件 (netlify.toml)，其中包含将您的项目部署到 Netlify 的边缘节点所需的所有信息。

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

单击此按钮将开始设置新项目和部署。

从命令行部署

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