DEV Community

Code Reacher
Code Reacher

Posted on

From Spring Boot to Python Backend with Docker + React: My First Fullstack Project Experience

#ai #python #docker #springboot

As a Java Spring Boot developer, I recently challenged myself to build a fullstack app using Python (FastAPI) for the backend and ReactJS for the frontend—containerized using Docker.

What I Built
A simple user dashboard with:

  • React frontend (UI)
  • FastAPI backend (Python)
  • MongoDB database
  • All services containerized with Docker Compose

Challenges Faced & How I Solved Them
1. Docker Build Failures
Problem:
React build was failing due to missing environment variables and node_modules not being copied correctly in Dockerfile.

Solution:
Updated the Dockerfile with proper steps:

# Dockerfile for React
FROM node:18
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
CMD ["npm", "start"]
Enter fullscreen mode Exit fullscreen mode

2. CORS Issues
Problem:
React app couldn’t connect to FastAPI backend due to CORS errors.

Solution:
Enabled CORS in FastAPI:

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # Replace with actual domain in production
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)
Enter fullscreen mode Exit fullscreen mode

3. Docker Networking
Problem:
React tried to access backend using localhost:8000, which failed inside Docker.

Solution:
Used Docker service name (e.g., backend:8000) instead of localhost. Updated API calls in React to hit the backend through the Docker network.
My Final Docker Compose Setup

version: '3.8'

services:
  frontend:
    build: ./frontend
    ports:
      - "3000:3000"
    depends_on:
      - backend

  backend:
    build: ./backend
    ports:
      - "8000:8000"
    environment:
      - MONGO_URI=mongodb://mongo:27017/mydb
    depends_on:
      - mongo

  mongo:
    image: mongo
    ports:
      - "27017:27017"
Enter fullscreen mode Exit fullscreen mode

What I Learned

  • Dockerizing apps requires understanding networking, volumes, build context.
  • CORS is a common issue with frontend-backend interactions.
  • Python + React is a lightweight alternative to Java Spring Boot apps.

References

Conclusion
While Spring Boot is amazing for large-scale enterprise apps, exploring Python + Docker gave me a new perspective on speed and flexibility. Let me know if you're trying the same!

Top comments (0)