Remix + Ekspres + TS

Cara Menambah TypeScript pada Projek Remix + Express

Hello! Dalam artikel ini, saya akan membimbing anda melalui langkah-langkah untuk menambah TypeScript pada projek boilerplate Remix + Express. Pada penghujung tutorial ini, anda akan mempunyai apl Remix berfungsi sepenuhnya yang dijalankan dengan Express dan Typescript. Anda boleh mencari kod akhir di sini.

Langkah 1: Klon Pemula Ekspres Rasmi

Pertama, mari kita mulakan dengan mengklon templat pemula Remix Express rasmi:

npx create-remix@latest --template remix-run/remix/templates/express

Langkah 2: Tambah Ketergantungan yang Diperlukan

Seterusnya, pasang kebergantungan tambahan yang diperlukan untuk sokongan TypeScript:

npm install -D esbuild tsx

Langkah 3: Buat Fail Pelayan TypeScript

Alih keluar fail server.js sedia ada dan buat fail baharu bernama server/index.ts.

Kemudian, salin dan tampal kod berikut ke dalam 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}`)
);

Langkah 4: Kemas kini Konfigurasi Vite

Untuk membina pelayan Express selepas Remix melengkapkan binaannya, kemas kini fail vite.config.ts anda dengan kandungan berikut:

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

Langkah 5: Kemas kini Skrip NPM

Sekarang, kemas kini skrip permulaan dan dev dalam package.json anda:

"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"
}

Kesimpulan

Itu sahaja! Kini anda boleh terus menulis kod Remix anda seperti biasa. Tetapi anda mungkin tertanya-tanya: mengapa anda memerlukan persediaan ini? Dengan menggunakan Express, setiap permintaan melalui pelayan Express, membolehkan anda menggunakan middlewares Express untuk menghantar data kepada Remix, seperti konteks pengguna semasa melaksanakan pengesahan.

Dalam artikel akan datang, saya akan menunjukkan kepada anda cara menambahkan Lucia-Auth pada templat ini ?.

Nantikan! ?

Atas ialah kandungan terperinci Remix + Ekspres + TS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!