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
A ReactJS application, after creating the build, can be served with the NodeJS server-side app as mentioned in this ReactJS Official Documentation.
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.
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.
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.
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
tar xvfz server.tar.gz
The contents of the directory are two files:
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.
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.
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
Move the reactjs application build directory to this server directory,
mv ~/myapp/build ~/server
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:
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 .
-toption is for tagging images with name and version with the format
- 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
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,
portskey represents the mapped port of the Ubuntu operating system for the port inside the container. Here container port
9000is mapped to port
30000of Ubuntu. Any request sent to
30000port on Ubuntu will be received by the server listening to
9000port inside the container.
working_dirwill point to the directory where the container will initiate on.
commandkey will have the command to run when the container starts.
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
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
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.