remix-express-vite-plugin

remix-express-vite-plugin

This package includes a Vite plugin to use in your Remix app. It configures an Express server for both development and production.

Installation

Install the following npm package

npm install -D remix-express-vite-plugin

Configuration

Add the Vite plugin and preset to your vite.config.ts file

import { expressDevServer, expressPreset } from 'remix-express-vite-plugin/vite'
import { vitePlugin as remix } from '@remix-run/dev'
import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  server: {
    port: 3000, // define dev server port here to override default port 5173
  },
  plugins: [
    expressDevServer(), // add expressDevServer plugin

    remix({
      presets: [expressPreset()], // add expressPreset for server build support
    }),
    tsconfigPaths(),
  ],
})

Options

The expressDevServer plugin also accepts options:

export type DevServerOptions = {
  entry?: string // Express app entry: default = './server/index.ts'
  ignoreWatching?: (string | RegExp)[] // List of paths to ignore for change:
  // default = []
}

Package.json

Update scripts in your package.json file. For development, Vite will handle starting express and calling Remix to build your app, so simply call vite.

For building, Remix will build your app and create the server and client bundles. The expressPreset will build your express server file into ./build/server/index.js

To run your production build, call node ./build/server/index.js

{
  "scripts": {
    "dev": "vite",
    "build": "remix vite:build",
    "start": "node ./build/server/index.js"
  }
}

Express

You can now use a TypeScript file for your Express server. The default entry is server/index.ts

Export the created Express app as the default export. A helper function named createExpressApp will automatically set up the Remix request handler.

Options

export type CreateExpressAppArgs = {
  configure?: (app: Application) => void // add additional middleware to app
  getLoadContext?: GetLoadContextFunction // setup remix context
}

You can add additional Express middleware with the configure function.

If you want to set up the Remix AppLoadContext, pass in a function to getLoadContext. Modify the AppLoadContext interface used in your app.

Example

// server/index.ts

import { createExpressApp } from 'remix-express-vite-plugin/express'
import compression from 'compression'
import morgan from 'morgan'

// update the AppLoadContext interface used in your app
declare module '@remix-run/node' {
  interface AppLoadContext {
    hello: () => string
  }
}

export default createExpressApp({
  configure: app => {
    // setup additional express middleware here
    app.use(compression())
    app.disable('x-powered-by')
    app.use(morgan('tiny'))
  },
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  getLoadContext: async (req, res) => {
    // custom load context should match the AppLoadContext interface defined above
    return { hello: () => 'Hello, World!' }
  },
})

// routes/test.tsx

export async function loader({ context }: LoaderFunctionArgs) {
  // get the context provided from `getLoadContext`
  return json({ message: context.hello() })
}