Remix + Express + TS

#remix #javascript #typescript #webdev

How to Add TypeScript to a Remix + Express Project

Hello! In this article, I'll guide you through the steps to add TypeScript to a Remix + Express boilerplate project. By the end of this tutorial, you'll have a fully functional Remix app running with Express and Typescript. You can find the final code here.

Step 1: Clone the Official Express Starter

First, let's start by cloning the official Remix Express starter template:

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

Step 2: Add Required Dependencies

Next, install the additional dependencies needed for TypeScript support:

npm install -D esbuild tsx

Step 3: Create a TypeScript Server File

Remove the existing server.js file, and create a new file named server/index.ts.

Then, copy and paste the following code into 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}`)
);

Step 4: Update Vite Configuration

To build the Express server after Remix completes its build, update your vite.config.ts file with the following content:

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

Step 5: Update NPM Scripts

Now, update the start and dev scripts in your 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"
}

Conclusion

That's it! Now you can continue writing your Remix code as usual. But you might be wondering: why would you need this setup? By using Express, every request goes through the Express server, allowing you to use Express middlewares to pass data to Remix, such as user context while implementing authentication.

In a future article, I'll show you how to add Lucia-Auth to this template 👀.

Stay tuned! 👋