Remix Gospel Stack 项目教程

孙悦彤

于 2024-09-26 07:10:00 发布

阅读量570

点赞数 29

本文链接：https://blog.csdn.net/gitblog_00487/article/details/142537909

版权

Remix Gospel Stack 项目教程

remix-gospel-stack Remix monorepo template with pnpm, TypeScript and Turborepo. The remix app deploys to fly.io or build to Docker image. Example packages for Database with Prisma, UI, and internal TypeScript packages. 项目地址: https://gitcode.com/gh_mirrors/re/remix-gospel-stack

1. 项目的目录结构及介绍

remix-gospel-stack/
├── README.md
├── app/
│   ├── entry.client.tsx
│   ├── entry.server.tsx
│   ├── root.tsx
│   ├── routes/
│   │   ├── index.tsx
│   │   └── ...
│   └── ...
├── public/
│   ├── favicon.ico
│   └── ...
├── remix.config.js
├── package.json
└── ...

README.md: 项目的介绍文件，包含项目的基本信息和使用说明。
app/: 存放应用程序的主要代码，包括客户端和服务器端的入口文件、根组件和路由文件。
- entry.client.tsx: 客户端的入口文件，负责初始化客户端的React应用。
- entry.server.tsx: 服务器端的入口文件，负责渲染React应用并返回HTML。
- root.tsx: 应用的根组件，包含应用的全局布局和样式。
- routes/: 存放应用的路由文件，每个文件对应一个路由。
public/: 存放静态资源文件，如favicon、图片等。
remix.config.js: Remix项目的配置文件，包含项目的各种配置选项。
package.json: 项目的依赖管理文件，包含项目的依赖包和脚本命令。

2. 项目的启动文件介绍

entry.client.tsx

import { hydrate } from "react-dom";
import { RemixBrowser } from "@remix-run/react";

hydrate(<RemixBrowser />, document);

hydrate: 用于在客户端重新水合（hydrate）服务器端渲染的React应用。
RemixBrowser: Remix提供的浏览器端组件，负责处理客户端的渲染逻辑。

entry.server.tsx

import { renderToString } from "react-dom/server";
import { RemixServer } from "@remix-run/react";
import type { EntryContext } from "@remix-run/node";

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,
  });
}

renderToString: 将React组件渲染为HTML字符串。
RemixServer: Remix提供的服务器端组件，负责处理服务器端的渲染逻辑。
handleRequest: 处理服务器请求的函数，负责将React组件渲染为HTML并返回给客户端。

3. 项目的配置文件介绍

remix.config.js

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  appDirectory: "app",
  assetsBuildDirectory: "public/build",
  publicPath: "/build/",
  serverBuildPath: "build/index.js",
  devServerPort: 8002,
  ignoredRouteFiles: ["**/.*"],
  // 其他配置选项...
};

appDirectory: 指定应用程序代码的目录。
assetsBuildDirectory: 指定构建后的静态资源存放目录。
publicPath: 指定静态资源在服务器上的路径。
serverBuildPath: 指定服务器构建后的输出文件路径。
devServerPort: 指定开发服务器的端口号。
ignoredRouteFiles: 指定在路由文件中忽略的文件模式。

这些配置选项可以根据项目的需求进行调整，以满足不同的开发和部署需求。