Remix Supa Fly Stack 项目教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00584/article/details/141704574

Remix Supa Fly Stack 项目教程

supa-fly-stackThe Remix Stack for deploying to Fly with Supabase, authentication, testing, linting, formatting, etc.项目地址:https://gitcode.com/gh_mirrors/su/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

supa-fly-stackThe Remix Stack for deploying to Fly with Supabase, authentication, testing, linting, formatting, etc.项目地址:https://gitcode.com/gh_mirrors/su/supa-fly-stack

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考