Here is a step-by-step tutorial on how to dockerize a React application:
Step 1: Install Docker
First, make sure you have Docker installed on your machine. You can download and install Docker from the official website (https://www.docker.com/get-started).
Step 2: Create a Dockerfile
Create a new file in the root directory of your React application called "Dockerfile". This file will contain the instructions for building your Docker image.
Open the Dockerfile in a text editor and add the following lines:
“`
# Use an official Node.js runtime as the base image
FROM node:14-alpine
# Set the working directory in the container
WORKDIR /app
# Copy package.json and package-lock.json to the working directory
COPY package*.json ./
# Install dependencies
RUN npm install
# Copy the rest of the application code to the working directory
COPY . .
# Build the React app
RUN npm run build
# Expose port 3000
EXPOSE 3000
# Set the command to run the app
CMD ["npm", "start"]
“`
Step 3: Build the Docker Image
Open a terminal or command prompt and navigate to the root directory of your React application. Run the following command to build the Docker image:
“`
docker build -t my-react-app .
“`
This command tells Docker to build an image using the Dockerfile in the current directory and tag it as "my-react-app".
Step 4: Run the Docker Container
Once the Docker image is built, you can run a container based on that image. Run the following command:
“`
docker run -it -p 3000:3000 my-react-app
“`
This command tells Docker to run a container based on the "my-react-app" image, and map port 3000 of the container to port 3000 of the host machine.
Step 5: Access the React Application
Open a web browser and navigate to http://localhost:3000. You should see your React application running inside the Docker container.
That’s it! You have successfully dockerized your React application. You can now distribute the Docker image and run the application on any machine with Docker installed.