When developing React applications, using Docker ensures consistency across different environments. Instead of running React with npm start, we can serve the production build using nginx, improving performance and efficiency.
In this post, we will:
- - Create a Dockerfile to build and serve a React application using nginx.
- - Write a custom nginx.conf to properly serve the React app.
- - Use docker-compose.yml to run the containerized application.
📌 Project Structure
Your project should have the following structure:
/my-react-app ├── src/ # React source files ├── node_modules/ # Installed dependencies ├── public/ # Public assets ├── package.json # Dependencies and scripts ├── Dockerfile # Docker configuration ├── docker-compose.yml # Docker Compose setup ├── nginx.conf # Nginx configurationWe will try model
- Run React application in dev mode docker
- Build & Run React application in prod mode with nginx docker
🌱 Run React application in dev mode docker
Here’s theDockerfile anddocker-compose.yml setup for your React application. This will allow you to run your app in a containerized environment and access it onhttp://localhost:3000.
🛠 Step 1: Create theDockerfile
This Dockerfile will:
- Use node:23 to build the React app.
- Use nginx to serve the production-ready app.
# Use Node.js image as the base imageFROMnode:23-alpineASbuild-stage# Set the working directory inside the containerWORKDIR /app# Copy package.json and package-lock.json to the working directoryCOPY package*.json ./# Install dependenciesRUNnpminstall# Copy the entire project to the working directoryCOPY . .# Expose the port React runs onEXPOSE 3000# Start the React applicationCMD ["npm", "start"] ⚙️ Step 2: Createdocker-compose.yml
This allows us to run the containerized application easily.
version:"3.8"services:react-app:container_name:react_appbuild:.ports:-"3000:3000"volumes:-.:/app-/app/node_modulesstdin_open:truetty:true🧇 Build & Run React application in prod mode with nginx docker
This setup ensures that our React application runs efficiently in production withnginx.
🛠 Step 1: Create theDockerfile
This Dockerfile will:
- Use node:23 to build the React app.
- Use nginx to serve the production-ready app.
- Copy the built files into the nginx server.
# Use Node.js image to build the React appFROMnode:23-alpineASbuild-stage# Set working directoryWORKDIR /app# Copy package.json and package-lock.jsonCOPY package*.json ./# Install dependenciesRUNnpminstall# Copy the entire projectCOPY . .# Build the React appRUNnpm run build# Use Nginx to serve the build filesFROM nginx:alpine# Copy the built files from the previous stepCOPY --from=build /app/build /usr/share/nginx/html# Copy the custom Nginx configurationCOPY nginx.conf /etc/nginx/conf.d/default.conf# Expose port 3000EXPOSE 3000# Start NginxCMD ["nginx", "-g", "daemon off;"] 🔧 Step 2: Createnginx.conf
This file ensures that nginx correctly serves the React app, handling routes properly.
server{listen3000;server_namelocalhost;location/{root/usr/share/nginx/html;indexindex.html;try_files$uri/index.html;}error_page404/index.html;location/api/{proxy_passhttp://backend:5000;#Modifyifyouhaveabackendserviceproxy_set_headerHost$host;proxy_set_headerX-Real-IP$remote_addr;proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for;}} ⚙️ Step 3: Createdocker-compose.yml
This allows us to run the containerized application easily.
version:"3.8"services:react-app:container_name:unified_portal_cbuild:.ports:-"3000:3000"restart:always🚀 Running the Application
Now that everything is set up, follow these steps to run your React app in a Docker container:
1️⃣ Build and start the container
docker-compose up --build2️⃣ Open in your browser
http://localhost:30003️⃣ Stop the container
docker-compose downTop comments(0)
For further actions, you may consider blocking this person and/orreporting abuse
