MERN is a short form for MongoDB, Express, ReactJS and NodeJS. It represents a full-stack application. Each component in this stack has its usage given below,
MongoDB: A NoSQL document DB that stores data in the form of JSON. As most of the application uses JSON form of the data model, this database gives immense power in managing application data. The data is stored in Collection, which is analogous to Table in the relational database.
ReactJS: A declarative way of developing a web application. It encapsulates view with event handlers and other functionalities inside a component and helps faster development.
ExpressJS: NodeJS package (something like a plugin) which can work as a web server.
About This Lab
This hands-on lab is about deploying a MERN stack on Docker.
First, we will deploy a MongoDB container, then a container with ReactJS, NodeJS, and ExpressJS code that connects to MongoDB, and then do end-to-end testing.
The learner must have,
- Hands-on knowledge of docker containers and docker-compose tools.
- Basic knowledge of MongoDB
- Completed the hands-on-lab Containerising ReactJS application with NodeJS
- Make sure the below softwares are installed:
- docker latest version
- docker-compose latest version
MERN Stack Application Use-case
The application that we are creating has the below use case:
1. User clicks on Web Application URL Link, and when the page loads in a browser, the user will see a list of names if there are any names in the database, else an empty single-column table with header Name is displayed.
2. There is a text box on the top of the table where the user can enter the name to add to the list. Users can enter the name and click the
3. Once the user clicks the button, application will save the name in the database and also it will be displayed in the list.
Below is a brief end-to-end application flow:
1. The ReactJS application will handle the front-end part of the use case. It can make API (Application Program Interface) call to the backend nodeJS server with HTTP GET request to get all the names and an HTTP POST request to send the new name.
2. The NodeJS server will handle the initial URL load request to return the HTML file and the requests sent from the ReactJS application to retrieve-data-from OR save-data-to MongoDB as per the request.
Lab With MERN Stack on Docker
Extract the tar file
We have provided
containerize.tar file containing all resources required to execute this lab in the home directory. So, first, you have to un-tar it with the below command.
tar -xvf containerize.tar
You should see a docker-compose.yml file and containerize folder in the home directory.
We deploy a single node instance of MongoDB. Below is the service definition in the docker-compose file.
Run the below commands, to run mongodb container,
docker-compose up -d mongodb
Test if the MongoDB is up and running correctly, using the below commands
You should see the results below after running the commands,
Deploying ReactJS, NodeJS, and ExpressJS
This step assumes the learner has completed the hands-on lab given in pre-requisite section of this lab.
At this step, you should know how to containerize the ReactJS application with NodeJS and ExpressJS.
The ReactJS and NodeJS code used in this lab works with MongoDB.
Use the ReactJS and NodeJS code given below to create a container.
We have used the ReactJS code from this GitHub project. For convenience, this has already been built and the output build directory has been copied to
containerize/server directory in the home folder (will be visible after the un-tar of containerize.tar file).
For convenience, all of the scripts/files used can be found in the
containerize directory in this hands-on lab.
You should see the below items in the
containerize directory (will be visible after the un-tar of containerize.tar file),
The NodeJS server code is in
server/index.js. The file contents are as below
Build the docker container
- Instal the required packages using below command,
cd ~/containerize/server && npm install
- To test node server is working fine, run the below command (in server directory),
cd ~/containerize/server && node index.js
Click on the Lab URLs named
node on the right side. This will send a request to the node server listening to
port 9000 and return the HTML to load on the browser.
Now stop the server by pressing the keys Ctrl + c
- Build the docker container image for the react-node application
cd ~/containerize && docker build -t webapp:1.1 .
Here we named the
Run the react-node docker container
To run the react-node docker container, the service configuration in docker-compose file is as below( exists in home folder),
Run the react-node docker container with below command,
cd ~ && docker-compose up -d reactnode
Click on Lab URLs
react-ui Link on the right side to access the front-end Application and test it out.
In this hands-on lab we accomplished below tasks,
- Run a mongodb container
- Get the App which uses ReactJS with NodeJS and ExpressJS
- Do npm install and run the node server locally and test
- Create a container image for ReactJS and NodeJS code
- Run the container (react-node)
- Test the app
As a next step the following things can be explored further,
- How is mongoDB deployed in production environment ?
- How can these MERN stack components can be deployed on Kubernetes platform ?