If you have developed a ReactJs application and wish to deploy it on a docker container, this tutorial is for you. “It worked on my machine!!!” is a classic dialogue from every developer who gets frustrated when his application doesn’t work on a client’s machine. In this case, docker is the possible solution to run all your applications or services in a container. It doesn’t matter which machine you are working on.
Docker for beginners tutorial: Read this article to get a basic idea of what docker is and how to install docker on your machine.
When you deploy an application on a machine, you need to install all the dependencies such as Node and MySQL. But with docker, you need to mention the list of all the dependencies in a docker file. We’ll also discuss the contents in a docker file later in this tutorial.
Docker Image Vs. Docker Container
Docker will build a unique image for your application from all your dependencies listed in your docker file. You can use this docker image specified to that application and share them through public or private repos. Also, you can re-use them in various machines.
A docker container is an instance of a docker image. Every container is identified with a unique ID. Containers are like lightweight Virtual Machines. You can run multiple images in the same container and the same image in multiple containers and take advantage of scaling problems. There are seven stages for a container: create, restart, run, remove, pause, exit, and dead. Also, containers can be run on a virtual machine.
Create a ReactJs Application
I have created a ReactJs application using React router dom. Click here for the tutorial. We will try to deploy this ReactJs application on the container.
If you are new to ReactJs, click here to learn the basics of ReactJs and develop a simple ReactJs application.
Download this GitHub repository for the React and Docker files.
Check your Docker Version
Let’s say you have your ReactJs application ready, and before proceeding any further, check your docker version on your machine by running the command,
docker -v
How to Run a Docker Container?
This tutorial’s goal is to run these containers on the docker engine having applications inside them. It is simple if you follow these steps:
- Go to your application’s main directory, and create a docker file. (say “dockerfile”)
- Then, you have to create another file for docker-compose; let’s name it as “docker-compose.yml.”
- Build the docker image using all the dependencies needed for the application.
- Then run the docker container having the docker image of your application and all its dependencies.
Dockerizing a React Application
Let us discuss briefly the files used to create and build the docker image.
- Dockerfile: A Dockerfile consists of a set of instructions that is used to build an image. You list all the dependencies in this list, for instance for a React project, Node is the most important dependency.
- docker-compose.yml: Compose is used to run a container for the docker application. You create a YAML file and configure your application.
1. Creating a Docker file
Create a file called “dockerfile” in your main directory. Add the following lines to your file.
FROM node:alpine
WORKDIR /app
# install app dependencies
COPY package.json /app
RUN npm install
# add app
COPY . /app
EXPOSE 3000
# start app
CMD ["npm", "start"]
- In the first line, FROM node:alpine, we give an instruction to take Node and specify the Linux distribution as Alpine. The Alpine Linux is smaller than most of the distribution images. Alpine Linux is a security-oriented, lightweight Linux distribution based on musl libc and Busybox. A container requires no more than 8 MB and a minimal installation to disk requires around 130 MB of storage. Not only do you get a fully-fledged Linux environment but a large selection of packages from the repository.
- WORKDIR is the working directory, we specify docker to create a folder called app, and build an image in the app folder
- COPY tends to copy all the packages needed for the application from the local file system, you can also copy package-lock.json if you want
- EXPOSE tends to define a port to host the application. This is optional, you can also use -p in the command to define the port
- CMD is the command to execute the container by default
2. Creating the docker-compose.yml
Create a file called “docker-compose.yml” in your main directory. Add the following lines to your file.
version: "2.6.1"
services:
client:
stdin_open: true
build:
context: .
dockerfile: Dockerfile
ports:
- "3000:3000"
volumes:
- "./:/app"
- "./:/node_modules"
This is a simple docker-compose YML file that chains up all the basic commands and the services altogether. We will create a service called “client” and run some basic commands. We will define port 3000, and mention the volumes as well to define the root of the project on the container side as well. You can also create a .dockerignore file, but that is not necessary.
Build and Run the container
After writing these two files, now we can build a docker image. Run the following command,
docker-compose buildIf you do not get any error, you will find the following image ID in your execution. That means, it created an image.
After that, run the command on your docker-compose yml location,
docker-compose up -d
Successfully, you have created a docker container, besides that, you are also running the docker image in the docker container.
Testing your Container
You can check your ReactJs application on your local host port 3000, http://localhost:3000/ on your web browser. If the web application can be started successfully, the application will be shown on the browser.
Run the command, docker ps to check the containers running.
docker ps
Some of the alternative methods are, that you can just build an image without a docker-compose and run the image in a detached mode in a container.
Building Docker Image
docker build -t <username>/reactapp .Navigate to your dockerfile directory, and run the command to build the docker image. -t helps to tag your docker image so that later you can find your image.
After the successful build, run the command to check the docker images in your file system.
docker images
Run the Docker Image
Running your image -d runs the container in independent mode, exiting the container running in the background. The -p flag turns a public port into a private port inside the container. Run the image you previously built:
docker run -p 3000:3000 -d <username>/docker-react-sampleDocker Desktop
You can download the docker desktop and view the containers and images instantly over there.
Inside the Docker Desktop, you may find the container list and the image list which you are running on docker. Also, you can open your web browser directly from the image you have built.
Happy learning!
