Docker + React Router + Turborepo = 😖

[jazbees (Justin S Barrett)]

Last fall I began working on an app using Remix inside a Turborepo monorepo. Once React Router 7 came out, I switched the app to that. Local development has been pretty smooth so far, and after hitting some snags deploying directly to DigitalOcean, I thought that I’d take Docker for a spin. I first took a basic RR app, made an image, and deployed it via DigitalOcean’s container registry without any issues. However, I’m hitting a roadblock that I don’t know how to overcome with this app inside the Turborepo system.

After much struggling late last week, I did manage to get the Docker image to build without any errors. Running a container from that image technically works, but it’s throwing a truckload of errors about files that supposedly can’t be found.

Here’s my Dockerfile, which was tweaked from an example in the Turborepo docs:

# syntax=docker/dockerfile:1
FROM node:latest AS base

FROM base AS builder
# Set working directory
WORKDIR /app
RUN npm install -g turbo@^2.4.2
COPY . .

# Generate a partial monorepo with a pruned lockfile for a target workspace.
RUN turbo prune staff-portal --docker

# Add lockfile and package.json's of isolated subworkspace
FROM base AS installer
WORKDIR /app

# First install the dependencies (as they change less often)
COPY --from=builder /app/out/json/ .
RUN npm install

# Build the project
COPY --from=builder /app/out/full/ .
RUN npx turbo run build

FROM base AS runner
# WORKDIR /app

COPY --from=installer . .
COPY --from=installer ./app/apps/staff-portal/build/client/ .
RUN npm install -g @react-router/serve@7.6.3

CMD ["react-router-serve", "/app/apps/staff-portal/build/server/index.js"]

When when running a container from the resulting image, the RR server kicks off just fine, but opening the URL in my browser throws a ton of errors that are all a variation on the following:

No routes matched location "/assets/some-file.js"

After figuring out how to navigate the file structure of the image, I found that the assets folder is in /app/apps/staff-portal/build/client. That last COPY instruction is in the file to copy that to the root, thinking that it would solve the problem, but the errors persist.

I’m completely new to Docker (and Turborepo and RR, for that matter), and I’ve only gotten this far with lots of trial and error. At this point I’m out of ideas, and I’m not sure if this is an issue with something that I’ve done re: Docker, or if the root problem lies elsewhere. Any guidance would be greatly appreciated.

[rimelek (Ákos Takács)]

If you saw the “no routes matched” error in a web browser, that is probably a client side issue or the backend returnst the message when looking for the files in the servers document root. When a file doesn’t exist, the path could be handled the app itself and it shows the error message. It doesn’t mean you have to copy files to your image root. You have to figure out where the application expects that file to be and make sure it is copied there. It could also be a misconfiguration in the app’s routing, but I don’t know Turborepo and I’m not a React user, so you will need someone who can help you solve that part and we can help with the Docker-related part, for example how you can copy the files to the right location.

Just based on the file path in the CMD, I would expect the files to be either somewhere under /app/apps/staff-portal or /app/apps/staff-portal/build