Maison > Article > interface Web > Remix + Express + TS
Bonjour ! Dans cet article, je vais vous guider à travers les étapes pour ajouter TypeScript à un projet passe-partout Remix + Express. À la fin de ce didacticiel, vous disposerez d'une application Remix entièrement fonctionnelle fonctionnant avec Express et Typescript. Vous pouvez trouver le code final ici.
Tout d'abord, commençons par cloner le modèle de démarrage officiel de Remix Express :
npx create-remix@latest --template remix-run/remix/templates/express
Ensuite, installez les dépendances supplémentaires nécessaires à la prise en charge de TypeScript :
npm install -D esbuild tsx
Supprimez le fichier server.js existant et créez un nouveau fichier nommé server/index.ts.
Ensuite, copiez et collez le code suivant dans server/index.ts :
// server/index.ts import { createRequestHandler } from "@remix-run/express"; import { type ServerBuild } from "@remix-run/node"; import compression from "compression"; import express from "express"; import morgan from "morgan"; const viteDevServer = process.env.NODE_ENV === "production" ? undefined : await import("vite").then((vite) => vite.createServer({ server: { middlewareMode: true }, }) ); const app = express(); app.use(compression()); // http://expressjs.com/en/advanced/best-practice-security.html#at-a-minimum-disable-x-powered-by-header app.disable("x-powered-by"); // handle asset requests if (viteDevServer) { app.use(viteDevServer.middlewares); } else { // Vite fingerprints its assets so we can cache forever. app.use( "/assets", express.static("build/client/assets", { immutable: true, maxAge: "1y" }) ); } // Everything else (like favicon.ico) is cached for an hour. You may want to be // more aggressive with this caching. app.use(express.static("build/client", { maxAge: "1h" })); app.use(morgan("tiny")); async function getBuild() { try { const build = viteDevServer ? await viteDevServer.ssrLoadModule("virtual:remix/server-build") : // @ts-expect-error - the file might not exist yet but it will // eslint-disable-next-line import/no-unresolved await import("../build/server/remix.js"); return { build: build as unknown as ServerBuild, error: null }; } catch (error) { // Catch error and return null to make express happy and avoid an unrecoverable crash console.error("Error creating build:", error); return { error: error, build: null as unknown as ServerBuild }; } } // handle SSR requests app.all( "*", createRequestHandler({ build: async () => { const { error, build } = await getBuild(); if (error) { throw error; } return build; }, }) ); const port = process.env.PORT || 3000; app.listen(port, () => console.log(`Express server listening at http://localhost:${port}`) );
Pour construire le serveur Express une fois que Remix a terminé sa construction, mettez à jour votre fichier vite.config.ts avec le contenu suivant :
import { vitePlugin as remix } from "@remix-run/dev"; import { defineConfig } from "vite"; import tsconfigPaths from "vite-tsconfig-paths"; import esbuild from "esbuild"; export default defineConfig({ plugins: [ remix({ future: { v3_fetcherPersist: true, v3_relativeSplatPath: true, v3_throwAbortReason: true, }, serverBuildFile: 'remix.js', buildEnd: async () => { await esbuild.build({ alias: { "~": "./app" }, outfile: "build/server/index.js", entryPoints: ["server/index.ts"], external: ['./build/server/*'], platform: 'node', format: 'esm', packages: 'external', bundle: true, logLevel: 'info', }).catch((error: unknown) => { console.error('Error building server:', error); process.exit(1); }); } }), tsconfigPaths(), ], });
Maintenant, mettez à jour les scripts de démarrage et de développement dans votre package.json :
"scripts": { "build": "remix vite:build", "dev": "tsx server/index.ts", "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .", "start": "cross-env NODE_ENV=production node ./build/server/index.js", "typecheck": "tsc" }
C'est ça ! Vous pouvez maintenant continuer à écrire votre code Remix comme d'habitude. Mais vous vous demandez peut-être : pourquoi auriez-vous besoin de cette configuration ? En utilisant Express, chaque requête passe par le serveur Express, vous permettant d'utiliser des middlewares Express pour transmettre des données à Remix, telles que le contexte utilisateur lors de la mise en œuvre de l'authentification.
Dans un prochain article, je vous montrerai comment ajouter Lucia-Auth à ce modèle ?.
Restez à l'écoute ! ?
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!