how to pack node_modules to reduce docker image size

[SteveSuv]

Now when I build prod docker image, I just copy node_modules, the docker image size is very large. so can I pack node_modules to a bundle to reduce size?

[sergiodxa]

If you run npm install --production again inside your Dockerfile after you build the app, development dependencies will be deleted from node_modules, that should help you reduce the size a lot since most dependencies are most likely dev only dependencies.

If you're not using Vite, you can add serverDependenciesToBundle: "all" in your remix.config.js to also bundle every server dependency, that way you can delete the node_modules folder completely after build.

If you're using Vite you can set noExternal: true option to achieve the same AFAIK.

[jrestall]

If using Vite I've found the following useful to bundle the SSR build to avoid deploying node_modules,

import { vitePlugin as remix } from "@remix-run/dev";
import { builtinModules } from "node:module";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [ remix() ],
  ssr: {
    // Bundle everything except the builtin node modules.
    // https://github.com/vitejs/vite/issues/7821
    external: [...builtinModules, ...builtinModules.map((m) => `node:${m}`)],
    noExternal: process.env.NODE_ENV === "production" ? [/.*/] : [],
  },
});

[SteveSuv]

Thanks, it works. But How to run the build assets?

yarn start
yarn run v1.22.19
$ PORT=3000 remix-serve ./build/server/index.js
/bin/sh: remix-serve: command not found

and when i run pnpm i and yarn start, I receive this error:

yarn start
yarn run v1.22.19
$ PORT=3000 remix-serve ./build/server/index.js
TypeError: Invalid module ".prisma/client/default" is not a valid package name ...

[marwinhormiz]

I had this issue aswell and solved it by just installing remix-serve globally.

FROM node:18-alpine AS base

FROM base AS builder
RUN apk add --no-cache libc6-compat
WORKDIR /app

RUN npm install -g pnpm@latest-10

COPY . .

RUN apk update \
  apk add --no-cache libc6-compat

WORKDIR /app

ENV NODE_ENV=production
RUN pnpm install --no-frozen-lockfile
RUN pnpm --filter web build

FROM base AS runner

RUN npm install -g pnpm@latest-10
RUN npm install -g @remix-run/serve@latest
WORKDIR /app

ENV NODE_ENV=production

COPY --from=builder /app/apps/web/package.json ./package.json
COPY --from=builder /app/apps/web/build/ ./build
COPY --from=builder /app/apps/web/public/ ./public

EXPOSE 3000

ENV PORT=3000

CMD HOSTNAME="0.0.0.0" pnpm start

Final image was 262MB.

[SteveSuv]

any update? Can I bundle all server part to a single server.js file, and can run node server.js without node_modules?

I have try a lot:

1. add server.js

import { createRequestHandler } from "@remix-run/express";
import { installGlobals } from "@remix-run/node";
import compression from "compression";
import express from "express";
import morgan from "morgan";

installGlobals();

const remixHandler = createRequestHandler({
  build: await import("./build/server/index.js"),
});

const app = express();
app.use(compression());
app.disable("x-powered-by");
app.use("/assets",express.static("build/client/assets", { immutable: true, maxAge: "1y" }));
app.use(express.static("build/client", { maxAge: "1h" }));
app.use(morgan("tiny"));
app.all("*", remixHandler);

const port = process.env.PORT || 3000;
app.listen(port, () =>
  console.log(`Express server listening at http://localhost:${port}`),
);

2. change vite.config.ts and run yarn build

import { vitePlugin as remix } from "@remix-run/dev";
import { installGlobals } from "@remix-run/node";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import { builtinModules } from "node:module";

installGlobals();

export default defineConfig({
  plugins: [remix(), tsconfigPaths()],
  server: { port: 3000 },
  ssr: {
    external: [...builtinModules, ...builtinModules.map((m) => `node:${m}`)],
    noExternal: process.env.NODE_ENV === "production" ? [/.*/] : [],
  },
});

3. add tsup.config.ts and run npx tsup

import { defineConfig } from "tsup";

export default defineConfig({
  entry: ["server.js"],
  outDir: "dist",
  target: "esnext",
  format: "esm",
  clean: true,
  noExternal: [/(.*)/],
  env: { NODE_ENV: "production" },
});

4. delete node_modules and run

node dist/server.js

but failed:

throw Error('Dynamic require of "' + x + '" is not supported');
        ^
Error: Dynamic require of "http" is not supported