Installation

1npm install vite-plugin-nft

What does vite-plugin-nft do?

vite-plugin-nft is similar to Next.js standalone option: it automatically creates a standalone folder that copies only the necessary files for a production deployment including select files in node_modules.

This is useful when you want to create a Docker image for a monorepo without having to install the whole monorepo inside the Dockerfile. Instead you can just copy the standalone directory.

The vite plugin basically waits for the ssr build to finish and then copies the necessary files to the output folder. It uses the @vercel/nft package to do the file tracing.

Usage in Remix

1import { nft } from 'vite-plugin-nft'
2import { vitePlugin as remix } from '@remix-run/dev'
3import { defineConfig } from 'vite'
4
5export default defineConfig({
6    plugins: [nft({ outputFolder: 'standalone' }), remix()],
7})

Update your start script to use the standalone directory instead of build

1  "scripts": {
2    "build": "remix vite:build",
3    "dev": "remix vite:dev",
4-    "start": "remix-serve ./build/server/index.js",
5+    "start": "remix-serve ./standalone/build/server/index.js",
6    "typecheck": "tsc"
7  },

If you are inside a workspace, the standalone folder will mirror your package structure, so you will have to change the server index.js path.

For example if there is a pnpm workspace and your remix website is in packages/website, the start script will look like this:

1  "scripts": {
2    "build": "remix vite:build",
3    "dev": "remix vite:dev",
4-    "start": "remix-serve ./build/server/index.js",
5+    "start": "remix-serve ./standalone/packages/website/build/server/index.js",
6    "typecheck": "tsc"
7  },

Your Dockerfile now becomes a simple COPY operation:

1# Dockerfile
2# ...
3
4WORKDIR /app
5
6RUN echo "{\"type\":\"module\"}" > package.json
7
8# install any required native dependencies
9RUN npm install canvas
10
11RUN npm install -g @remix-run/serve
12
13COPY ./standalone /app/standalone
14# required for remix-serve to serve client files
15COPY ./build /app/build
16
17CMD ["remix-serve", "./standalone/packages/website/build/server/index.js"]
18

If you use native dependencies with this approach, you will need to install them inside the Dockerfile and add them to your .dockerfile, so the wrong binaries are not copied from the standalone directory

# .dockerignore
**/node_modules/canvas
**/node_modules/@prisma