Heim  >  Artikel  >  Web-Frontend  >  Remix + Express + TS

Remix + Express + TS

WBOY
WBOYOriginal
2024-09-10 11:33:43332Durchsuche

Remix + Express + TS

So fügen Sie TypeScript zu einem Remix + Express-Projekt hinzu

Hallo! In diesem Artikel führe ich Sie durch die Schritte zum Hinzufügen von TypeScript zu einem Remix + Express-Boilerplate-Projekt. Am Ende dieses Tutorials verfügen Sie über eine voll funktionsfähige Remix-App, die mit Express und Typescript ausgeführt wird. Den endgültigen Code finden Sie hier.

Schritt 1: Klonen Sie den offiziellen Express Starter

Beginnen wir zunächst mit dem Klonen der offiziellen Remix Express-Startervorlage:

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

Schritt 2: Erforderliche Abhängigkeiten hinzufügen

Als nächstes installieren Sie die zusätzlichen Abhängigkeiten, die für die TypeScript-Unterstützung erforderlich sind:

npm install -D esbuild tsx

Schritt 3: Erstellen Sie eine TypeScript-Serverdatei

Entfernen Sie die vorhandene Datei server.js und erstellen Sie eine neue Datei mit dem Namen server/index.ts.

Kopieren Sie dann den folgenden Code und fügen Sie ihn in server/index.ts ein:

// 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}`)
);

Schritt 4: Vite-Konfiguration aktualisieren

Um den Express-Server zu erstellen, nachdem Remix seinen Build abgeschlossen hat, aktualisieren Sie Ihre vite.config.ts-Datei mit dem folgenden Inhalt:

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

Schritt 5: NPM-Skripte aktualisieren

Aktualisieren Sie jetzt die Start- und Entwicklungsskripte in Ihrer 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"
}

Abschluss

Das ist es! Jetzt können Sie wie gewohnt mit dem Schreiben Ihres Remix-Codes fortfahren. Aber Sie fragen sich vielleicht: Warum brauchen Sie dieses Setup? Durch die Verwendung von Express läuft jede Anfrage über den Express-Server, sodass Sie Express-Middlewares verwenden können, um Daten an Remix zu übergeben, z. B. den Benutzerkontext während der Implementierung der Authentifizierung.

In einem zukünftigen Artikel werde ich Ihnen zeigen, wie Sie Lucia-Auth zu dieser Vorlage hinzufügen?

Bleiben Sie dran! ?

Das obige ist der detaillierte Inhalt vonRemix + Express + TS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn