Why tanstack app is not accessible in dockerized monorepo?

[nirvikpurkait]

I am using monorepo along with turborepo, pnpm, docker, and vite (tanstack-router). When I dockerize my application and try to see the built output from dockerized container, I can not access the application locally.

Below is the folder structure for more context.

(N.B - This works for single/non-monorepo vite project and using windows)

monorepo/
├── apps/
│   └── web/
│       ├── ...
│       ├── package.json
│       └── Dockerfile
├── packages/
│   ├── env/
│   │   ├── ...
│   │   └── package.json
│   └── data/
│       ├── ...
│       └── package.json
├── package.json
└── ... (pnpm-lock.yaml, pnpm-workspace.yaml, turbo.json)

The web is internally dependent on env and data by workspace feature.

// monorepo/apps/web/package.json

{
  "name": "web",
  "scripts": {
    "build": "vite build",
    "start": "vite preview  --host 0.0.0.0 --port 4173",
  },
  "dependencies": {
    "@repo/data": "workspace:^",
    "@repo/env": "workspace:^",
  },
  "devDependencies": {
   ...
  }
}

After building the image with docker build -t image-name -f apps/web/Dockerfile . from root (monorepo) of the project, when I run it with docker run -p 4173:4173 image-name, I cannot access it with http://localhost:4173 in my browser.

I have looked for reason and a lot of sources says that vite is not binding with 0.0.0.0 , and that is the reason for not being able to access it.

My question is why it is not binding with 0.0.0.0, even when I am explicitly passing the argument --host 0.0.0.0, as it says in docs.

I can confirm container is accessible at http://localhost:4173 as docker ps -a does provides 0.0.0.0:4173->4173/tcp, [::]:4173->4173/tcp as output.

This is my Dockerfile. (un-necessary folders are ignored with .dockerignore)

// monorepo/apps/web/Dockerfile

# ---------------------------
# 1. Builder Image
# ---------------------------
FROM node:22-alpine AS builder

# Install PNPM
RUN npm install -g pnpm

# Set working directory
WORKDIR /builder

# Copy whole monorepo to resolve workspace packages
COPY . .

# Install all dependencies (including workspaces)
RUN pnpm install --frozen-lockfile

ARG DATABASE_NAME
ARG DATABASE_URL
ARG REDIS_URL
ARG NODE_ENV
ENV DATABASE_NAME=${DATABASE_NAME}
ENV DATABASE_URL=${DATABASE_URL}
ENV REDIS_URL=${REDIS_URL}
ENV NODE_ENV=${NODE_ENV}

# Build only the web workspace
RUN pnpm build --filter web

# ---------------------------
# 2. Workspace Package Image
# ---------------------------
FROM node:22-alpine AS packager

# Set working directory
WORKDIR /packager

# Move required production ready packages for lower image size
# @packages/env

COPY --from=builder /builder/packages/env/dist ./packages/env/dist
COPY --from=builder /builder/packages/env/package.json ./packages/env/package.json

# @packages/data
COPY --from=builder /builder/packages/data/dist ./packages/data/dist
COPY --from=builder /builder/packages/data/package.json ./packages/data/package.json

# web
COPY --from=builder /builder/apps/web/dist ./apps/web/dist
COPY --from=builder /builder/apps/web/package.json ./apps/web/package.json

# ---------------------------
# 3. Runtime Image
# ---------------------------
FROM node:22-alpine AS runner

# Install PNPM
RUN npm install -g pnpm

# Set working directory
WORKDIR /portfolio

# Copy package.json and lockfiles
COPY --from=builder /builder/package.json ./package.json
COPY --from=builder /builder/pnpm-lock.yaml ./pnpm-lock.yaml
COPY --from=builder /builder/pnpm-workspace.yaml ./pnpm-workspace.yaml

# Bring dependent packages
COPY --from=packager /packager/packages ./packages
COPY --from=packager /packager/apps ./apps

# Set environment for Vite
ENV HOST=0.0.0.0
ENV PORT=4173

# Install production dependencies
RUN pnpm i --prod --frozen-lockfile

# Set working directory
WORKDIR /portfolio/apps/web

# Expose port
EXPOSE 4173

ARG DATABASE_NAME
ARG DATABASE_URL
ARG REDIS_URL
ARG NODE_ENV
ENV DATABASE_NAME=${DATABASE_NAME}
ENV DATABASE_URL=${DATABASE_URL}
ENV REDIS_URL=${REDIS_URL}
ENV NODE_ENV=${NODE_ENV}

# Start the app in production mode
CMD ["pnpm","exec","vite","preview","--host","0.0.0.0","--port","4173"]

[tt-a1i]

The issue is in your runner stage - you're running pnpm i --prod which doesn't install devDependencies, but vite is typically a devDependency.

The fix:

Option 1: Install vite globally in the runner stage

# In runner stage, before CMD
RUN npm install -g vite

Option 2: Move vite to dependencies (not recommended for a library, but fine for an app)

"dependencies": {
  "vite": "^6.0.0"
}

Option 3: Copy vite from builder stage

# In runner stage
COPY --from=builder /builder/node_modules/vite ./node_modules/vite
COPY --from=builder /builder/node_modules/.bin/vite ./node_modules/.bin/vite

Better approach - serve static files directly:

Since vite build outputs static files, you don't actually need vite in production. Use a lightweight server instead:

# Runtime Image
FROM node:22-alpine AS runner

RUN npm install -g serve

WORKDIR /app
COPY --from=builder /builder/apps/web/dist ./dist

EXPOSE 4173
CMD ["serve", "-s", "dist", "-l", "4173"]

Or even better, use nginx:

FROM nginx:alpine AS runner
COPY --from=builder /builder/apps/web/dist /usr/share/nginx/html
EXPOSE 80

This makes your production image smaller and faster.

[nirvikpurkait]

Thank you for you response.

I was trying to serve a tanstack router project with vite preview.

Couple of minutes ago I came to know this:-

It is important to note that vite preview is intended for previewing the build locally and not meant as a production server.

So whenever I was trying to preview locally, it was using some devDependencies (even though it is in preview), and it was running fine (as I did not know it was using devDeps too), so I tried to imitate that in docker too, installing only production dependencies. As a result it kept failing and failing again. then I tried to run installing all dependencies and it worked.

Then I came to know about your recommendation using serve. But as far I know, it works for static pages, can you please let me know if it works for SSR as well or not? Because I am using tanstack for SSR.

[tt-a1i]

Good catch! For SSR with TanStack Router, you're right - serve and nginx won't work since SSR needs a Node.js server to render pages on each request.

For SSR, you need to keep vite or use a Node server:

Option 1: Install vite in production

# In runner stage
RUN npm install -g vite

# Or copy from builder
COPY --from=builder /builder/node_modules/vite ./node_modules/vite

Option 2: Use TanStack Start's built-in server

If you're using TanStack Start (the SSR framework for TanStack Router), it has its own production server. Check their docs for the correct production command - it might be something like:

CMD ["node", "dist/server.js"]

Option 3: Build a standalone server bundle

For SSR, you typically build two things:

1. Client bundle (static assets)
2. Server bundle (Node.js code)

Then in production you run the server bundle directly with Node, not vite preview:

# Copy both client and server builds
COPY --from=builder /builder/apps/web/dist ./dist

# Run the SSR server directly
CMD ["node", "dist/server/index.js"]

The exact setup depends on how TanStack Start structures its SSR output. Check apps/web/dist after building to see the server entry point.

[nirvikpurkait]

I was using tanstack and I figured out the solution couple of days ago.

The way @tt-a1i suggested

Option 2: Use TanStack Start's built-in server

If you're using TanStack Start (the SSR framework for TanStack Router), it has its own production server. Check their docs for the correct production command - it might be something like:

CMD ["node", "dist/server.js"]

is not working because the generated file dist/server/server.js is a handler and not an actual server, so simple node dist/server/server.js will execute the file and process will complete.

Insted we have to create a server on our own to handle that.

import express from "express";
import path from "path";
import { pathToFileURL } from "url";
import { cwd } from "process";

(async () => {
  const app = express();
  const PORT = 3693;
  const buildDir = "dist";

  const clientDist = path.resolve(cwd(), buildDir, "./client");
  const serverDist = path.resolve(cwd(), buildDir, "./server");

  app.use(express.static(clientDist));

  app.all("/*splat", async (req, res) => {
    const serverFile = path.resolve(serverDist, "./server.js");
    const serverHandler = await import(pathToFileURL(serverFile).href);

    const url = `${req.protocol}://${req.host}${req.originalUrl}`;

    const request = new Request(url, {
      method: req.method,
      headers: req.headers as HeadersInit,
      body:
        req.method === "GET" || req.method === "HEAD"
          ? undefined
          : req.body
            ? JSON.stringify(req.body)
            : undefined,
    });

    const response: Response = await serverHandler.default.fetch(request);

    res.status(response.status);
    response.headers.forEach((value, key) => {
      res.setHeader(key, value);
    });

    const body = await response.text();
    res.send(body);
  });

  app.listen(PORT, () => {
    console.log(`🚀 TanStack Start app running at http://localhost:${PORT}`);
  });
})();