Template (FastAPI + ReactJS) => Docker Compose

This is a template of a FastAPI backend with a ReactJS frontend.

Now hot reload is available for the frontend. 🎉

You can test and deploy in seconds.

Summary

• Basic (FastAPI + ReactJS) => Docker Compose
  • Summary
  • Mode
  • How to run
    • Prod mode
    • Dev mode
      • Frontend Dockerfile
      • Docker Compose
      • URL Access
  • Schema

Mode

• "Prod": The frontend is built and served by Nginx.
• Dev: The frontend is served by the Node server with hot reload.

How to run

Prod mode

docker-compose up --build -d

Dev mode

Some steps to run with :

• frontend:8080 (hot reload)
• backend:8000

Frontend Dockerfile

./frontend/Dockerfile

# Build
FROM node:22 AS build

WORKDIR /app

COPY ./app .

# Install dependencies
RUN npm install

# Build the app
RUN npm run build

ENTRYPOINT ["npm", "run", "dev", "--", "--host", "0.0.0.0", "--port", "80"]

Docker Compose

uncomment the following line

frontend

ports:
  - "8080:80"

backend

ports:
  - "8000:8000"

docker compose up --build --watch

URL Access

• Frontend: http://localhost:8080
• Backend: http://localhost:8000/docs

Schema