Dockerizing a React Application: Containerize a Frontend App. In this post, we introduce React.js, advantages of Dockerizing a React.js app the show you Dockerizing a React application.
What is React.js?
Front end frameworks and libraries are now an important component of the web development stack. Be it booking a cab or ordering food, we all use mobile and web applications to perform simple to complex tasks. These mobile and web applications use frameworks that ease the process and deliver a seamless user experience. React is one such popular JavaScript frontend library that helps build complex applications.
Over time, this framework has gained a lot of popularity for its functionalities and features. It is quite easy to create dynamic web applications using ReactJS. It also gives developers the resources they need to design reusable UI components, which helps them overcome the difficulties of creating complex user interfaces.
In simple terms, creating dynamic web applications is easier with React in comparison to JavaScript. With JavaScript, the code may get difficult quite rapidly, whereas React takes less coding and provides more functionality, making it simpler to construct dynamic online apps. Another benefit of using React.js is that data flow is unidirectional. As a result, when creating React apps, developers often layer child components inside parent components. This makes it simpler to troubleshoot issues and pinpoint the exact location of a problem in an application at any given time because data only flows in one path.
React is built upon a Virtual DOM pattern and uses external libraries. In contrast to traditional web applications, which update all of the components again, Virtual DOM analyses the prior states of the components and updates just the things in the Real DOM that have changed. Further, ReactJS is simpler and supports a component based approach in comparison to other frameworks or front end tools.
Benefits of Dockerizing React.js Application
The methods for creating, deploying, and maintaining software have all been revolutionized by Docker. All of our services and applications may operate separately in containers thanks to the technology known as Docker in React. Docker enables us to create and run our applications in any environment by offering OS level virtualization. This indicates that by separating the application from its surroundings, the specific piece of software is used on any computer.
For quick deployments and running applications on different machines, regardless of the underlying operating system, it gives developers the ability to package their code and dependencies into containers. Let us discuss the advantages of Dockerizing your ReactJS application.
1. Easy and Quick Deployments – It is simple to scale and maintain your application with Docker containers since they are self contained and are quickly deployed to any machine or server.
2. Quick Creation – Docker builds are quicker than conventional builds because they make use of cached layers. These cached layers help cut down on the time it takes to create or deploy any application.
3. Scalability and Resource Effectiveness – Additionally with the help of Docker, you scale and allocate resources effectively for your ReactJS application. You may quickly grow your application horizontally to handle more traffic or divide the burden across several containers by utilizing container orchestration solutions like Docker Swarm or Kubernetes.
4. Consistent Development Environment – Docker enables you to establish identical dependencies, libraries, and versions for all developers, guaranteeing that everyone is working in the same environment.
5. Version Control and Rollbacks – With the help of Docker, you version your containers. This makes it quite simple for developers to manage changes and go back to earlier versions as necessary. When you need to return to a previous state or solve problems that develop after deployment, this is extremely helpful.
6. Isolated Dependencies – Another benefit of Dockerizing your ReactJS Application is Dependencies are easily managed and updated without affecting other system components. This can happen with the help of the isolation provided by Docker containers, which segregate the application’s dependencies.
Dockerizing a React Application: How to Containerize a Frontend App
In this section, we show you how to Dockerize a React.js application on Ubuntu Linux.
Prerequisites
- A server running Ubuntu Linux operating system.
- A root user or a user with sudo privileges.
Install Required Dependencies
Before starting, update your system packages to the latest version. Update all of them using the following command.
apt update -y
apt upgrade -y
After updating all the system packages, install some required packages to your server.
apt install gnupg2 apt-transport-https ca-certificates curl software-properties-common
Once all the packages are installed, proceed to the next step.
Install Docker Engine
Next, install the Docker package in your server. By default, the latest Docker version is not included in the Ubuntu default repository. So it is recommended to install the Docker from the Docker’s repository.
First, add the Docker GPG key using the following command.
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | apt-key add -
Next, add the Docker’s official repository to APT.
add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu focal stable"
Once the repository is added, install Docker package with the following command.
apt install docker-ce -y
After the Docker installation, confirm the Docker installation using the following command.
systemctl status docker
You should see the Docker status on the following screen.
Install Node.js and NPM
To install the latest Node.js version, you need to add the Node source repository to your system. Download and add the Node source repository using the following command.
curl -sL https://deb.nodesource.com/setup_18.x -o nodesource_setup.sh
bash nodesource_setup.sh
Finally, install the Node.js package with the following command.
apt install nodejs -y
After installing Node.js, verify the Node.js installation using the following command.
node -v
You see the Node.js version in the following output.
v18.16.1
Create a React Application
React provides a create-react-app tool to easily create an application via command line interface. Let’s create a simple React application named react-app using the following command.
npx create-react-app react-app
Once the React application is created, you see the following screen.
Next, navigate to the react-app directory and start the application with the following command.
cd react-app
HOST=0.0.0.0 npm start
This startsthe React application on port 3000 as shown below.
Now, open your web browser and access the React application using the URL http://your-server-ip:3000. See your React application on the following screen.
Now, press CTRL+C on the command line interface to stop the React application.
Dockerize React Application
To create a Docker image from the React application, you need to copy all the source files inside the container, build the project then serve the application.
Let’s create a Dockerfile to define your container.
nano Dockerfile
Add the following configurations.
FROM node:alpine AS development
# Declaring env
ENV NODE_ENV development
# Setting up the work directory
WORKDIR /react-app
# Installing dependencies
COPY ./package.json /react-app
RUN npm install
# Copying all the files in our project
COPY . .
# Starting our application
CMD HOST=0.0.0.0 npm start
The above configuration file installs the latest Node.js version, copy all application file from host machine to the container, install all depemndencies then start the application.
Next, create a dockerignore file to define all files that you want to exclude from Docker image.
nano .dockerignore
Add the following lines.
node_modules
npm-debug.log
build
.git
*.md
.gitignore
Save and close the file then build the Docker image using the following command.
docker build -t react-app .
You see the Docker build process in the following screen.
Next, verify the created Docker image using the following command.
docker images
You should see your React iamge in the following output.
REPOSITORY TAG IMAGE ID CREATED SIZE
react-app latest c550f8e82cf8 56 seconds ago 576MB
Now, start the React container from the React Docker image using the following command.
docker run -dit --rm -p 8080:8080 --name react-container react-app
If everything is fine, you will see the following output.
f974c63fe03e57f357e6ed7c8b2df55609b2acfed5c7e3d0b3e1521d56f2bb71
A brief explanation of above command is shown below:
- -d: Run container in background and display container ID
- -it: Create an interactive container
- -p: Map host port to container port
- –name: Assign a name to the container
- –rm: Automatically remove the container when it exits.
Now verify the running container using the following command.
docker container ps
You should see the following output.
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
f974c63fe03e react-app "docker-entrypoint.s…" 10 seconds ago Up 9 seconds 0.0.0.0:8080->8080/tcp, :::8080->8080/tcp react-container
Now, open your web browser and access the React application using the URL http://your-server-ip:8080.
To check the container log, run the following command.
docker logs react-container
Output.
> react-app@0.1.0 start
> react-scripts start
To stop the React container, run the following command.
docker container stop react-container
If you want to remove the React image, run the following command.
docker rmi react-app
Dockerizing a React Application: Containerize a Frontend App Conclusion
In this post, we have created a sample React application, and tested it on the local machine. Then, we built the Docker image from the React application, created a container from that image and verified it via web browser. We also showed you how to check the container status, and logs via command line. I hope you are now able to easily deploy your React application in the containerization environment.
Basically, Dockerizing your ReactJS application helps increase scalability, portability, and deployment process as well as eases dependencies management. It even speeds up the development cycle process and enables developers to operate in a consistent environment, which eventually results in the delivery of more effective and dependable software. If you really want to experience the benefits of containerization, we recommend to start Dockerizing your ReactJS application today!
