Remix Supa Fly Stack 项目教程
1. 项目的目录结构及介绍
supa-fly-stack/
├── app/
│ ├── entry.client.tsx
│ ├── entry.server.tsx
│ ├── root.tsx
│ ├── routes/
│ │ ├── __auth.tsx
│ │ ├── __notes.tsx
│ │ ├── index.tsx
│ ├── modules/
│ │ ├── auth/
│ │ │ ├── session.ts
│ │ ├── note/
│ │ │ ├── note.ts
├── cypress/
│ ├── integration/
│ ├── plugins/
│ ├── support/
├── public/
│ ├── favicon.ico
├── supabase/
│ ├── config.ts
├── test/
│ ├── setup.ts
├── .dockerignore
├── .env.example
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .prettierignore
├── .prettierrc.cjs
├── Dockerfile
├── fly.toml
├── package.json
├── postcss.config.mjs
├── README.md
├── remix.config.js
├── remix.env.d.ts
├── tailwind.config.ts
├── tsconfig.json
├── vitest.config.ts
目录结构介绍
app/
: 包含应用程序的主要代码,包括客户端和服务器入口文件、根组件和路由。entry.client.tsx
: 客户端入口文件。entry.server.tsx
: 服务器入口文件。root.tsx
: 根组件。routes/
: 路由文件。modules/
: 模块文件,包括认证和笔记模块。
cypress/
: 端到端测试相关文件。public/
: 公共静态资源文件。supabase/
: Supabase 配置文件。test/
: 测试设置文件。- 配置文件和忽略文件:
.dockerignore
,.env.example
,.eslintignore
,.eslintrc
,.gitignore
,.prettierignore
,.prettierrc.cjs
,Dockerfile
,fly.toml
,package.json
,postcss.config.mjs
,README.md
,remix.config.js
,remix.env.d.ts
,tailwind.config.ts
,tsconfig.json
,vitest.config.ts
。
2. 项目的启动文件介绍
客户端入口文件
app/entry.client.tsx
:
import { RemixBrowser } from "@remix-run/react";
import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
startTransition(() => {
hydrateRoot(
document,
<StrictMode>
<RemixBrowser />
</StrictMode>
);
});
服务器入口文件
app/entry.server.tsx
:
import { renderToString } from "react-dom/server";
import { RemixServer } from "remix";
import type { EntryContext } from "remix";
export default function handleRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext
) {
const markup = renderToString(
<RemixServer context={remixContext} url={request.url} />
);
responseHeaders.set("Content-Type", "text/html");
return new Response("<!DOCTYPE html>" + markup, {
status: responseStatusCode,
headers: responseHeaders,
});
}
根组件
app/root.tsx
:
import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from "remix";
export default function App() {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<Meta />
<Links />
</head>
<body>
<Outlet />
<Scroll