Containerize ReactJS Application With NodeJS

Containerize ReactJS Application With NodeJS

17 June 2022
nodejs
docker
reactjs

This hands-on lab will show you how to containerize a ReactJS application with a NodeJS Docker container.

Pre-requisites for this hands-on lab,

The learner must have some basic knowledge about

  • Running build for a reactjs application to generate static contents
  • Linux OS, Text editors like vi, nano or visual code (supported in this lab)
  • Docker fundamentals

Introduction

A ReactJS application, after creating the build, can be served with the NodeJS server-side app as mentioned in this ReactJS Official Documentation.

NodeJS is a JavaScript Environment built on Google's V8 JavaScript Engine. NodeJS along with the ExpressJS package can act as a web application server. You will see its implementation in the NodeJS Server Script section below.

Containerization is one of the best ways to package a deployment unit. In this hands-on lab you will be containerizing a ReactJS application code within a NodeJS Docker container, run it and test it.

Lab Setup

You can start the lab setup by clicking on the Lab Setup button on the right side of the screen. It will create a Ubuntu Linux System with NodeJS and Docker installed in it.

Check NodeJS and Docker Installation

As you trigger the lab through the LAB SETUP button, a terminal opens.

To build a ReactJS application, NodeJs is needed in the Operating System.

Make sure below things,

  • nodejs version 14 or above is installed.
  • npm version 5.6 or above is installed.
npm is the package manager that is a part of NodeJS environment. With this tool you can install/remove/update different packages required in a NodeJS Application.

Below is a sample output that we see in the console (you may see some difference in the minor version number).

root@master:~# node -v
v17.9.0
root@master:~# npm -v
8.5.5

After this step, check if the docker is installed  by running below commands, and check if the similar output is seen (you may see some difference in the version number),

Figure 1: Check the docker version
Figure 1: Check the docker version

Build the ReactJS application

Here we use create-react-app default starter app.

npx create-react-app myapp
cd myapp && npm run build

npx command will dynamically run create-react-app to create an application with boilerplate code. Here we named it myapp. A directory with the name myapp will be created. 

We go to this directory and run the build with npm run command. 

npm run is the command used to run the scripts. These scripts are already configured in the package.json file in the directory from where the command is executed.

Note: You can do a git clone of any react application of your choice from any git repository and build it. And change the name of the application in the Dockerfile that you will create in upcoming section in this lab.

NodeJS Server Script

This lab is provided with the required files in a tar file server.tar.gz. First un-tar it using the command below. You should see a directory with the name server.

tar xvfz server.tar.gz

The contents of the directory are two files:

  • index.js
  • package.json

File 1: index.js file is the server script. Contents of it are as below,

The contents of this script are as given in the ReactJS Official Documentaion.

Here app.use sets the middleware with express. static function, which sets the directory to look for static files and serve when requested through HTTP.

app.get (using /* param) will return index.html in the response for any request.

File 2: package.json will contains packages required in the NodeJS environment. It will also contain a command to start the server.

Inside this directory, run npm install command as below,

cd ~/server && npm install

This will install the express package with the version mentioned in package.json.

Move the reactjs application build directory to this server directory,

mv ~/myapp/build ~/server
Note: If you are using different reactjs appilcation, use its directory name instead of myapp in above line.

Check if the server can run properly with below command,

cd ~/server && npm run start

Testing Method To Check if the server is running correctly

Create another terminal tab by clicking + button on tabs panel of console, and from there when you run curl localhost:9000 you should see output like below,

Figure 2: Running curl command from another terminal to test node server is running and serving web pages properly
Figure 2: Running curl command from another terminal to test node server is running and serving web pages properly

On the terminal where node server is running, you can stop the server by pressing keys   ctrl + c.

Build the Docker Image

Now, to containerize this web application we use a Dockerfile. We have already provided this Dockerfile in the home folder.

The contents of the Dockerfile are as below:

Make sure Dockerfile and server directory exists in the home folder as below,

Figure 3: To check Dockerfile and server directory exists in the home folder.
Figure 3: To check Dockerfile and server directory exists in the home folder.

Here we create a docker image for the application using Dockerfile by running the command below,

docker build -t webapp:0.1 .
  • Here -t option is for tagging images with name and version with the format <name>:<version>
  • The parameter . in the command, is to consider the current directory to look for Dockerfile and run build in that directory. The docker engine will use Dockerfile to build the image.

On successful completion of the build you will see output as shown below,

Figure 4: Output of docker build command
Figure 4: Output of docker build command

Run the docker container

To run the container we will use docker-compose. It is a useful tool to maintain containers. We already have docker and docker-compose installed in the lab which can be checked by

docker-compose version

Then we use a docker-compose configuration file (We have provided docker-compose.yaml file in the home folder) with the below contents

In the above file,

  • ports key represents the mapped port of the Ubuntu operating system for the port inside the container. Here container port 9000 is mapped to port 30000 of Ubuntu. Any request sent to 30000 port on Ubuntu will be received by the server listening to 9000 port inside the container.
  • The working_dir will point to the directory where the container will initiate on.
  • The command key will have the command to run when the container starts.

Run the docker-compose command using the above file, to run the server container (in home folder),

docker-compose -f docker-compose.yaml up reactnode

Use the testing method mentioned in the section previously, to check if the server is running fine.

You can also click on the react-ui link given in Lab URLs section on the right-side panel on this screen. It will open a separate browser tab to show the web page like this,

Figure 5: React App
Figure 5: React App

You can stop the running docker container by pressing the keys ctrl + c.

To run the container as a daemon use below command,

docker-compose -f docker-compose.yaml up -d reactnode

Conclusion

In this hands-on lab we used below steps to run a docker container with nodejs and reactjs application.

  • Check for NodeJS and Docker Installation
  • Build ReactJS Application
  • Review NodeJS server side script and package.json
  • Install packages and move react application build to server folder
  • Test the node server execution
  • Build the docker image
  • Run the docker container
  • Test server is running in container

What Next

This container image built can be deployed in any platform that supports docker containers like AWS ECS, GCP Cloud Run and self hosted or cloud managed Kubernetes Clusters.

Further Reading

How likely are you going to recommend this lab to your friends or colleagues?

Unlikely
Likely

Leave a comment:

About the Author

 Subraya Pai

Subraya Pai

Freelance Technical Consultant & Trainer / ReactJS / Full Stack / Cloud Technologies

Subraya has overall 15+ years of working experience in the IT Industry taking different roles in Software Development, Architecture and Project Management in different companies. Currently helping customers with Projects using ReactJS, Full stack Design and Development and Cloud Technologies. He also helps Corporates/Individuals in Training on ReactJS.