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),

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,

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'build')));

app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(9000);

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.

{
  "dependencies":{
     "express": "^4.18.1"
  },
  "scripts":{
     "start": "node index.js"
  }
}

Inside this directory, run npm installcommand 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,

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:

FROM node:18
COPY server /home/node/app/

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

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,

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

# docker-compose.yaml
version: "2"
services:
 reactnode:
  container_name: "react-node"
  image: "webapp:0.1"
  working_dir: /home/node/app
  ports:
   - "30000:9000"
  command: "npm start"

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,

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

• Docker Compose
• ExpressJS documentation
• How to Use NodeJS docker image
• Kubernetes Basics