-
-
Notifications
You must be signed in to change notification settings - Fork 7.4k
-
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
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 4 comments 2 replies
-
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.
Beta Was this translation helpful? Give feedback.
All reactions
-
It seems like using a dev container would be a better approach. I'll see if I can get it working for this template.
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1
-
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
Beta Was this translation helpful? Give feedback.
All reactions
-
@chrisvaillancourt see my below comment for a working vite hot reload setup with docker compose on localhost
Beta Was this translation helpful? Give feedback.
All reactions
-
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
},
},
})
Beta Was this translation helpful? Give feedback.
All reactions
-
I use the following instead, would it be interesting for a PR?
frontend:
restart: "no"
ports:
- "5173:5173"
build:
context: ./frontend
dockerfile: Dockerfile.dev
args:
- VITE_API_URL=http://localhost:8000
- NODE_ENV=development
develop:
watch:
- path: ./frontend
action: sync
target: /app
ignore:
- ./frontend/node_modules
- ./frontend/dist
- ./frontend/.vite
- node_modules
- dist
- .vite
environment:
- VITE_API_URL=http://localhost:8000
Beta Was this translation helpful? Give feedback.