Table of Contents
Deploying a React application using Docker can streamline your development process and make your app portable across different environments. This tutorial provides a clear, step-by-step guide for beginners to deploy a React app with Docker successfully.
Prerequisites
- Basic knowledge of React.js
- Docker installed on your machine
- Node.js and npm installed
- A code editor like Visual Studio Code
Step 1: Create a React Application
Begin by creating a new React app using Create React App. Open your terminal and run:
npx create-react-app my-react-app
Navigate into the project directory:
cd my-react-app
Step 2: Prepare the React App for Production
Build the production-ready static files:
npm run build
This creates a build folder containing the optimized files.
Step 3: Create a Dockerfile
In the root of your project, create a file named Dockerfile with the following content:
FROM nginx:alpine
COPY build /usr/share/nginx/html
EXPOSE 80
CMD [“nginx”, “-g”, “daemon off;”]
Step 4: Build the Docker Image
Run the following command to build your Docker image:
docker build -t react-docker-app .
Step 5: Run the Docker Container
Start a container from your image:
docker run -d -p 80:80 –name react-container react-docker-app
Step 6: Verify the Deployment
Open your web browser and navigate to http://localhost. You should see your React application running inside the Docker container.
Additional Tips
- Use docker ps to check running containers.
- Use docker stop react-container to stop the container.
- Modify your React app and rebuild the image as needed.
Deploying React with Docker simplifies the process of sharing and deploying your app across different environments. Follow these steps to get started, and customize as necessary for your project requirements.