“Hi, can somebody help me solve this? I need a React app and a Flask app in the same Docker image using a multi-stage Dockerfile.”
“I have tried many options. If the backend runs, the frontend does not work, and if the frontend works, the backend does not work. I have even tried using shell files.”
##Folder structure
project/
│
├── backend/
│ ├── app.py
│ └── requirements.txt
│
├── frontend/
│ ├── public/
│ │ └── index.html
│ ├── src/
│ │ ├── components/
│ │ │ └── …
│ │ ├── App.js
│ │ └── index.js
│ ├── package.json
│ └── package-lock.json (or yarn.lock)
│
├── Dockerfile
└── start.sh
##Dockerfile
FROM python:3.9-slim
Set working directory
WORKDIR /backend/app
Copy requirements.txt
COPY backend/requirements.txt .
Install Flask
RUN pip install --no-cache-dir -r requirements.txt
Copy the Flask application
COPY backend/ .
Copy the shell script
COPY start.sh .
Give execute permissions to the shell script
RUN chmod +x start.sh
Expose port 5000
EXPOSE 5000
Use an official Node.js image as the base image
FROM node:14-alpine
Set the working directory inside the container
WORKDIR /frontend/app
Copy package.json and package-lock.json (if available) to the working directory
COPY frontend/package*.json ./
Install dependencies
RUN npm install
Copy the rest of the application code to the working directory
COPY frontend .
Build the React app for production
RUN npm run build
Copy the shell script
COPY start.sh .
Give execute permissions to the shell script
RUN chmod +x start.sh
Expose port 3000 to the outside world
EXPOSE 3000
Command to run the application
CMD [“./start.sh”]