Why do docs recommend installing in the host machine using npm & uv if both frontend & backend are running in docker containers?

[acyment]

First Check

• I added a very descriptive title here.
• I used the GitHub search to find a similar question and didn't find it.
• I searched in the documentation/README.
• I already searched in Google "How to do X" and didn't find any information.
• I already read and followed all the tutorial in the docs/README and didn't find an answer.

Commit to Help

• I commit to help with one of those options 👆

Example Code

No actual code. I will copy relevant parts of the documents:

frontend/README.md
Before you begin, ensure that you have either the Node Version Manager (nvm) or Fast Node Manager (fnm) installed on your system.

    To install fnm follow the official fnm guide. If you prefer nvm, you can install it using the official nvm guide.

    After installing either nvm or fnm, proceed to the frontend directory:

cd frontend

    If the Node.js version specified in the .nvmrc file isn't installed on your system, you can install it using the appropriate command:

# If using fnm
fnm install

# If using nvm
nvm install

--------------------
backend/README.md

Requirements

    Docker.
    uv for Python package and environment management.

Description

I am just beginning to use this project, therefore I apologize if I am not understanding the obvious. I have always preferred developing using Docker containers in order to leave my dev machine as clean as possible. I don't see the advantage of having a development compose yml if it is also encouraged to install both backend and frontend locally.

Operating System

macOS

Operating System Details

Sequoia 15.2 (although irrelevant for the topic)

Python Version

3.11.3 (similarly, why are you asking for python version? Isn't it determined inside backend's dockerfile?)

Additional Context

No response

[peter-cognicode]

It says so in the frontend/readme

Notice that this live server is not running inside Docker, it's for local development, and that is the recommended workflow. Once you are happy with your frontend, you can build the frontend Docker image and start it, to test it in a production-like environment. But building the image at every change will not be as productive as running the local development server with live reload.

[chrisvaillancourt]

It seems like using a dev container would be a better approach. I'll see if I can get it working for this template.

[peter-cognicode]

cool, let me know when you get it working! I don't really like the docker compose down frontend && npm run dev way of working

[peter-cognicode]

@chrisvaillancourt see my below comment for a working vite hot reload setup with docker compose on localhost

[peter-cognicode]

I ended up using this setup:

didnt test it much, might not work when you update dependencies..

update docker-compose.override.yml

  frontend:
    restart: "no"
    build:
      context: ./frontend
      dockerfile: Dockerfile.dev
    ports:
      - "5173:5173"
    volumes:
      - ./frontend:/app
      - /app/node_modules
      - /app/.vite
    command: npm run dev
      - VITE_API_URL=http://localhost:8000
      - NODE_ENV=development
      - VITE_DEBUG_MODE=${VITE_DEBUG_MODE:-false}

add a ./frontend/Dockerfile.dev

# Stage 0, "build-stage", based on Node.js, to build and compile the frontend
FROM node:20 AS build-stage

WORKDIR /app

COPY package*.json /app/

RUN npm install

COPY ./ /app/

ARG VITE_API_URL=${VITE_API_URL}

EXPOSE 5173

CMD ["npm", "run", "dev"]

update vite.config.ts:

import { TanStackRouterVite } from "@tanstack/router-vite-plugin"
import react from "@vitejs/plugin-react-swc"
import { defineConfig } from "vite"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), TanStackRouterVite()],
  server: {
    host: true, // Always enable for Docker compatibility
    watch: {
      usePolling: true, // Needed for file watching in Docker
    },
  },
})