ホームページ >ウェブフロントエンド >jsチュートリアル >リミックス + エクスプレス + TS
こんにちは!この記事では、Remix + Express ボイラープレート プロジェクトに TypeScript を追加する手順を説明します。このチュートリアルが終わるまでに、Express と Typescript で実行できる完全に機能する Remix アプリが完成します。最終的なコードはここで見つけることができます。
まず、公式 Remix Express スターター テンプレートのクローンを作成することから始めましょう:
npx create-remix@latest --template remix-run/remix/templates/express
次に、TypeScript のサポートに必要な追加の依存関係をインストールします。
npm install -D esbuild tsx
既存のserver.jsファイルを削除し、server/index.tsという名前の新しいファイルを作成します。
次に、次のコードをコピーして、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}`) );
Remix のビルド完了後に Express サーバーをビルドするには、vite.config.ts ファイルを次の内容で更新します。
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(), ], });
ここで、package.json 内の start スクリプトと dev スクリプトを更新します。
"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" }
それだけです!これで、通常どおり Remix コードの作成を続けることができます。しかし、なぜこの設定が必要なのでしょうか?と疑問に思われるかもしれません。 Express を使用すると、すべてのリクエストが Express サーバーを経由するため、Express ミドルウェアを使用して、認証の実装中にユーザー コンテキストなどのデータを Remix に渡すことができます。
今後の記事では、このテンプレートに Lucia-Auth を追加する方法を説明します。
お楽しみに! ?
以上がリミックス + エクスプレス + TSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。