Is it possible to build a next.js-style standalone bundle output?

[StephenPCG]

My project environment: a pnpm monorepo, using RR7 + SSR for webapp, with react-router-hono-server, deployed using Docker.

I found a Dockerfile example in react-router-templates, but it's not for a monorepo. Using a monorepo makes things significantly more complicated. Currently, I have to copy all node_modules/ directories into the Docker image to make node build/server/index.js work, which result in a very large docker image.

I'm not very familiar with the Node runtime environment. I tried moving all UI packages to devDependencies, keeping only the packages that seem to run in the Node environment in dependencies, and installing only dependencies in the Docker image — but no luck. The server still doesn't run and complains about missing modules. Then I tried adding those modules to dependencies, only to have it complain about another missing module. I couldn’t find any documentation clearly explaining what should go in dependencies vs devDependencies.

It would be great if RR could support a Next.js-style standalone output — something that outputs a folder with all runtime assets bundled, so you can copy it anywhere and run it with Node, and it just works.

I'm surprised I couldn't find similar requests in RR's issues or discussions. Am I on the wrong track? Are there other best practices recommended by RR?

[GabenGar]

In context of docker images for codebases with build step, both dependencies and devDependencies have to be installed because devDependencies are required to build the output from the source code.
I am not sure how standalone the code in NextJS standalone output, but I assume not at all and it still drags the entirety of node_modules into the image anyway.
As for monorepos and docker, turborepo has a command just for generating docker-friendly output of a workspace, so you either have to ad-hoc a similar logic or introduce turborepo for your monorepo management.

[StephenPCG]

@GabenGar Thanks for the reply. Since docker supports multi-stage build, it's ok to install both dependencies and devDependencies while building, it won't affect the final image size.

Here is main part of the Dockerfile I used in one of my nextjs project:

# for the build stage
FROM node:20 as build
(build steps omitted)

# for the final image
FROM node:20
WORKDIR /app
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder --chown=nextjs:nodejs /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs
CMD ["node", "server.js"]

As you can see, only two assets folders (public/ and static/), and a standalone/ folder are copied, no any other files. This is file list in the final docker image:

/app $ ls -al
total 40
drwxr-xr-x    1 root     root          4096 Mar  4 17:10 .
drwxr-xr-x    1 root     root          4096 Mar  4 17:10 ..
-rw-r--r--    1 root     root            30 Mar  4 17:10 .env
drwxr-xr-x    1 nextjs   nodejs        4096 Feb 20 14:06 .next
drwxr-xr-x   37 nextjs   nodejs        4096 Feb 20 14:06 node_modules
-rw-rw-rw-    1 nextjs   nodejs        5926 Feb 20 14:06 package.json
drwxr-xr-x    5 nextjs   nextjs        4096 Feb 20 13:47 public
-rw-r--r--    1 nextjs   nodejs        6702 Feb 20 14:06 server.js

/app $ du -h -d 0 node_modules/
66.1M	node_modules/

So the standalone/ directory contains server.js, package.json and node_modules/. This package.json is copied directly from webapp source code, but node_modules/ only contains what the server need.

I checked the node_modules/ directory, and it's clear that this isn't just a simple copy of some existing node_modules/. It only includes dependencies required for the server runtime. Moreover, upon closer inspection, even these packages appear to be trimmed down—only the JavaScript files that might actually be used in production are kept. You can see that this node_modules/ is just 66.1MB, whereas in my local development environment, node_modules/ takes up a whopping 1.1GB. For Docker images, this makes a massive difference.

I'm not very familiar with the Node runtime environment, but I'd guess that constructing such a standalone/ directory would roughly include these:

• The contents of the build/server/ directory output by the react-router build command
• A package.json (I suspect the content isn't critical - its existence is just to make Node happy)
• A node_modules/ directory containing only serverruntime dependencies. Even without further trimming these dependencies, simply removing purely client-side dependencies (build-time dependencies) should make the final directory small enough.

I think the above points should be sufficient. For me, the hardest part is figuring out how to determine which packages are server-side dependencies. I don't know how Next.js does it - whether they hardcoded a list or performed dynamic analysis during build. This was exactly the point I was trying to make in my original post. If we can solve this issue, then building a standalone version shouldn't be difficult.

Finally, when constructing this node_modules/ directory, we should follow symbolic links when copying files. PNPM introduces several build challenges: First is hoisting - some packages only exist in the root node_modules. Another issue is symbolic links - simply copying the apps/webapp/node_modules/ directory won't work since it's full of symlinks. This essentially forces my final Docker image to maintain nearly the same directory structure as the source code to ensure all dependencies resolve correctly. If we could analyze and gather all dependencies into a single location, they would become truly portable.

In short, the standalone/ directory lives up to its name—it doesn’t need anything else. Just copy it anywhere, and as long as Node.js is available, it runs directly. No extra mental overhead. I believe that compared to 'being small in size,' 'having no mental or learning burden' is far more important."

[sergiodxa]

What's missing? Bundle node_modules? Because you really only need the build folder and the node_modules with your runtime dependencies

[StephenPCG]

In short: A smaller node_modules/ with only server runtime dependencies, and copy without symbolic links

[sergiodxa]

You can get the first with npm install --production which removes dev dependencies.

Ensure you only use dependencies for runtime dependencies and then you can run that script after build.

You need to keep in dependencies usually everything your app code imports, but not things used for build, or Vite plugins, linters, etc.

I'm not sure about the other one as I don't use pnpm.

[StephenPCG]

You need to keep in dependencies usually everything your app code imports

I can't believe this. In my previous comment, I showed the docker image of my old project, nextjs + heroui, the hereui is not included in the docker image's node_modules/. I guess, maybe, nextjs when doing SSR, can re-use code in the client bundle?