While developing any kind of software, you may have experienced situations like your application works on your development machine but fails to start in someone else's machine or deployment environment. This can happen because of,
- The discrepancy between the software version required and the software version available on the machine.
- Configuration settings are different from the development machine.
- Missing files.
Docker provides a solution to these problems by containerizing the software.
According to Docker's official website,
Containers are a standardized unit of software that allows developers to isolate their app from its environment, solving the “it works on my machine” headache.
To know more about docker, visit its official website.
Installing and running Docker
For installing Docker, go to this link (for windows).
Creating React Application
To create a React application, Nodejs is a prerequisite. Install Nodejs from here.
Run the command below to create a new react project.
npx create-react-app react-app
This will create a new react project named react-app.
Now, we can open the project on any IDE to see the folder structure.
To run the react app use the following command on your terminal.
cd react-app npm start
Once the app is up and running, the terminal will show messages like this.
terminal message on starting the react app
Now the react application is running on the development server; you can view your app on any browser on this address.
react app running on development server.
Dockerizing React Application
As we have our basic setup ready, we can start creating a Docker Container to isolate the React Application.
Create a file named Dockerfile in the root folder of the react application. Docker can build images automatically by reading the instructions from the Dockerfile.
Copy the following code to the Dockerfile and save it.
# Pull the latest base image FROM node:alpine # set working directory WORKDIR /app # add `/app/node_modules/.bin` to $PATH ENV PATH /app/node_modules/.bin:$PATH # Copy package.json to /app COPY package.json ./ # Copy package-lock.json to /app COPY package-lock.json ./ # Install dependencies RUN npm i # add app COPY . ./ # start app CMD ["npm", "start"]
Let's go through the Dockerfile.
- FROM node:alpine - This line of code tells Docker to pull the latest base image for Nodejs from DockerHub.
- WORKDIR /app - This will define the working directory of a Docker container at any given time. Here the name of the directory is app, you can give any name as you want.
- ENV PATH /app/node_modules/.bin:$PATH - Here we use ENV to update the PATH environment variable for the software your container will install. Here we set the environment path for npm command to work.
- COPY package.json ./ - Here we copy package.json to the working directory.
RUN npm i - This will run the command
npm ito install all the dependencies.
CMD ["npm", "start"] - This will run
npm startcommand to start the application.
Start the Docker Desktop application.
In the terminal, go to the root directory of the react application and run the following command to build the Docker Image.
docker build -t react-app .
The above command will create a Docker Image named react-app, you can view this image in Docker Desktop App or you can use the following command to view all the Docker Images on your machine.
Go to the images section in the Docker Desktop app
As we have created the image, we can run the container by the following command.
docker run -d --rm -p 3000:3000 -e CHOKIDAR_USEPOLLING=true react-app
Let's breakdown this command
- -d, will run the container in the background and print the container ID
- --rm will automatically remove the container when it exits
- -p 3000:3000, will publish the container's 3000 port to the host's 3000 port
- -e CHOKIDAR_USEPOLLING=true, -e will set the environment variable CHOKIDAR_USEPOLLING to true
- react-app is the name of the image that we want to run
Now you can access the container from localhost:3000.
You can also view your running container in Docker Desktop.
To stop the container, you can simply exit the terminal, or use the docker stop command. For more docker commands, go to the official website.
Top comments (3)
Sorry, I didn't read the entire article, but just in case it is not highlighted -- you do not want to ship this docker image to production. The production version needs to be converted to regular js with the
npm run buildcomand and placed in an apache or nginx container to be served.