初探remix + xata + tailwind

本项目是基于remix构建前端页面 + xata作为后端接口以及数据库支持的待办事项小应用demo(支持CRUD以及Authentication登录登出)

• demo地址

• Remix Docs
• Xata.io
• Tailwind Docs

使用

npm run install

npm run dev

创建数据库

1. 点击 Add database

2. 创建两张表 user和resolution ,定义字段以及把user表和resolution关联上

数据结构如下

{
  "id": "rec_abcdefg",
  "year": 2023,
  "resolution": "hi",
  "isCompleted": false,
}

初始化 Xata

1. 安装xata.io/cli npm install -g @xata.io/cli
2. 启动 xata auth login
3. 选择 Create a new API key in browser
4. 输入 new-resolutions 作为 名称
5. 点击 Create API key
6. 输入 xata init
7. 选择 new-resolutions 作为 数据库
8. 选择 Generate TypeScript code 作为 code generation
9. 输入 utils/xata.ts 作为xata输出路径 output file
10. 选择 <None>

xata init命令生成独立的utils/xata.ts文件。这包含xata cli和所有数据模型的类型。如果将来对数据库模式进行了更改，请运行xata codegen命令来生成一个新的xata.ts文件。

用户注册

1. 安装 npm install remix-auth remix-auth-form
2. 添加 SESSION_SECRET 到 .env 文件
3. 使用以下内容创建 app/utils/session.server.ts

import {createCookieSessionStorage} from "@remix-run/node"

const sessionStorage = createCookieSessionStorage({
    cookie: {
        name: "_session",
        sameSite: "lax",
        path: "/",
        httpOnly: true,
        secrets: [process.env.SESSION_SECRET],
        secure: process.env.NODE_ENV === "production",
    },
})

export {sessionStorage}

用户登录和登出

1. 登录在 app/routes/login.tsx
2. 登出在 app/routes/resolutions.tsx

部署

构建静态页面

npm run build

启动生产环境

npm start

然后选择一个vps进行前端部署