Steps to Setup MERN Stack on Ubuntu 20.04 LTS

Hello, In this blog we are going to discuss MERN Stack on Ubuntu. MERN is a package of JavaScript technologies that is more suitable for building dynamic JS applications. MERN Stack stands for: MongoDB, Express, React, and Node.

MongoDB: It is an open-source and most widely used NoSQL & object-oriented database technology.It is used for developing robust web applications.

Express.js: It is a Node.js web application framework.It is used for developing hybrid web-based applications.

React.js: It is an open-source JavaScript framework used to create a front-end interface for mobile applications.

Node.js: It is a JavaScript platform used for general-purpose programming.It allows users to build network applications quickly & run codes on the server.

There are some steps to Setup MERN Stack on Ubuntu:

Install MongoDB on Ubuntu

Step1: Update the system.

apt-get update

Step 2: Install the required packages.

apt-get install dirmngr gnupg apt-transport-https ca-certificates
apt-get install software-properties-common

Step 3: Import & Add the Repo & key.

wget -qO - https://www.mongodb.org/static/pgp/server-4.4.asc | sudo apt-key add -
&
add-apt-repository 'deb [arch=amd64] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/4.4 multiverse'

  • Here is the command output.

[email protected]:/home/ubuntu# wget -qO - https://www.mongodb.org/static/pgp/server-4.4.asc | sudo apt-key add -
OK
[email protected]:/home/ubuntu# add-apt-repository 'deb [arch=amd64] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/4.4 multiverse'
Hit:1 http://sa-east-1.ec2.archive.ubuntu.com/ubuntu focal InRelease
Hit:2 http://sa-east-1.ec2.archive.ubuntu.com/ubuntu focal-updates InRelease
Hit:3 http://sa-east-1.ec2.archive.ubuntu.com/ubuntu focal-backports InRelease
Ign:4 https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/4.4 InRelease
Get:5 https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/4.4 Release [5384 B]
Get:6 https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/4.4 Release.gpg [801 B]
Hit:7 http://security.ubuntu.com/ubuntu focal-security InRelease
Get:8 https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/4.4/multiverse amd64 Packages [19.2 kB]
Fetched 25.4 kB in 1s (45.5 kB/s)
Reading package lists... Done

Step 4: Install the mongodb.

apt-get install mongodb-org

  • Here is the command output.
  • Type y.

[email protected]:/home/ubuntu# apt-get install mongodb-org
Reading package lists... Done
Building dependency tree
Reading state information... Done
The following additional packages will be installed:
mongodb-database-tools mongodb-org-database-tools-extra mongodb-org-mongos mongodb-org-server mongodb-org-shell mongodb-org-tools
The following NEW packages will be installed:
mongodb-database-tools mongodb-org mongodb-org-database-tools-extra mongodb-org-mongos mongodb-org-server mongodb-org-shell mongodb-org-tools
0 upgraded, 7 newly installed, 0 to remove and 32 not upgraded.
Need to get 96.5 MB of archives.
After this operation, 202 MB of additional disk space will be used.
Do you want to continue? [Y/n] y

  • Start & Enable MongoDB service.

systemctl start mongod
systemctl enable mongod

  • Here is the command output.

[email protected]:/home/ubuntu# systemctl start mongod
[email protected]:/home/ubuntu# systemctl enable mongod
Created symlink /etc/systemd/system/multi-user.target.wants/mongod.service → /lib/systemd/system/mongod.service.

  • Check the Mongodb.

mongo --eval 'db.runCommand({ connectionStatus: 1 })'

  • Here is the command output.

[email protected]:/home/ubuntu# mongo --eval 'db.runCommand({ connectionStatus: 1 })'
MongoDB shell version v4.4.11
connecting to: mongodb://127.0.0.1:27017/?compressors=disabled&gssapiServiceName=mongodb
Implicit session: session { "id" : UUID("be7d3cd2-05e0-4ca4-99d3-53ae24227976") }
MongoDB server version: 4.4.11
{
"authInfo" : {
"authenticatedUsers" : [ ],
"authenticatedUserRoles" : [ ]
},
"ok" : 1
}

Step 5: To create MongoDB Admin User.

  • Connect to the mongo instance.

mongo

  • Here is the command output.

[email protected]:/home/ubuntu# mongo
MongoDB shell version v4.4.11
connecting to: mongodb://127.0.0.1:27017/?compressors=disabled&gssapiServiceName=mongodb
Implicit session: session { "id" : UUID("784cc221-071e-456f-aeea-2779ba9b9736") }
MongoDB server version: 4.4.11
Welcome to the MongoDB shell.
For interactive help, type "help".
For more comprehensive documentation, see
https://docs.mongodb.com/
To enable free monitoring, run the following command: db.enableFreeMonitoring()
To permanently disable this reminder, run the following command: db.disableFreeMonitoring()
---
>

  • Once connected, change the database to admin.

> use admin

  • Create an admin user and set a password.

>db.createUser({user: "admin" , pwd: passwordPrompt() , roles: [{ role: "userAdminAnyDatabase" , db: "admin"}]})

  • Here is the command output.

> use admin
switched to db admin
> db.createUser({user: "admin" , pwd: passwordPrompt() , roles: [{ role: "userAdminAnyDatabase" , db: "admin"}]})
Enter password:
Successfully added user: {
"user" : "admin",
"roles" : [
{
"role" : "userAdminAnyDatabase",
"db" : "admin"
}
]
}

  • Exit from the mongo console.

> quit()

Install Node.js on Ubuntu

Step 6: Add the Node source repository.

curl -sL https://deb.nodesource.com/setup_14.x | bash -

  • Here is the command output.

[email protected]:/home/ubuntu# curl -sL https://deb.nodesource.com/setup_14.x | bash -
## Installing the NodeSource Node.js 14.x repo...
## Populating apt-get cache...
+ apt-get update
Hit:1 http://sa-east-1.ec2.archive.ubuntu.com/ubuntu focal InRelease
Hit:2 http://sa-east-1.ec2.archive.ubuntu.com/ubuntu focal-updates InRelease
Hit:3 http://sa-east-1.ec2.archive.ubuntu.com/ubuntu focal-backports InRelease
Ign:4 https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/4.4 InRelease
Hit:5 https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/4.4 Release
Hit:6 http://security.ubuntu.com/ubuntu focal-security InRelease
Reading package lists... Done
## Confirming "focal" is supported...
+ curl -sLf -o /dev/null 'https://deb.nodesource.com/node_14.x/dists/focal/Release'

Step 7: Install node.js.

apt-get install nodejs

  • Verify the Node.js version & NPM version.

node --version
&
npm --version

  • Here is the command output.

[email protected]:/home/ubuntu# node --version
v14.18.3
[email protected]:/home/ubuntu# npm --version
6.14.15

Install React.js on Ubuntu

Step 8: Install a create-react-app tool.

npm install -g create-react-app

  • Here is the command output.

[email protected]:/home/ubuntu# npm install -g create-react-app
npm WARN deprecated [email protected]: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
/usr/bin/create-react-app -> /usr/lib/node_modules/create-react-app/index.js
+ [email protected]
added 67 packages from 26 contributors in 4.141s

  • To create a React.js application.

create-react-app myfirstapp

  • Here is the command output.

[email protected]:/home/ubuntu# create-react-app myfirstapp
Creating a new React app in /home/ubuntu/myfirstapp.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
> [email protected] postinstall /home/ubuntu/myfirstapp/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"
> [email protected] postinstall /home/ubuntu/myfirstapp/node_modules/core-js-pure
> node -e "try{require('./postinstall')}catch(e){}"
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
added 1368 packages from 620 contributors in 59.288s
...
Created git commit.
Success! Created myfirstapp at /home/ubuntu/myfirstapp
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd myfirstapp
npm start
Happy hacking!

  • Change the directory to myfirstapp and start the application.

cd myfirstapp
npm start 0.0.0.0

  • Here is the command output.

Compiled successfully!
You can now view myfirstapp in the browser.
Local: http://localhost:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
......
./src/App.js 2.47 KiB [built] [code generated]
./src/reportWebVitals.js 1.38 KiB [built] [code generated]
./src/logo.svg 3.61 KiB [built] [code generated]
webpack 5.65.0 compiled successfully in 7175 ms

Step 9: Open React.js application.

http://server-ip:3000

  • Here is the output.

  • Press CTRL+C in terminal to close the application.

Install Express.js on Ubuntu

Step 10: Install the express-generator.

npm install -g express-generator

  • Here is the command output.

[email protected]:/home/ubuntu/# npm install -g express-generator
[..................] / rollbackFailedOptional: verb npm-session 6d8daffc07283d38
npm WARN deprecated [email protected]: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
/usr/bin/express -> /usr/lib/node_modules/express-generator/bin/express-cli.js
+ [email protected]
added 10 packages from 13 contributors in 1.555s

  • Create a new project.

express firstproject

  • Here is the command output.

[email protected]:/home/ubuntu# express firstproject
warning: the default view engine will not be jade in future releases
warning: use `--view=jade' or `--help' for additional options
create : firstproject/
create : firstproject/public/
create : firstproject/public/javascripts/
create : firstproject/public/images/
create : firstproject/public/stylesheets/
create : firstproject/public/stylesheets/style.css
create : firstproject/routes/
create : firstproject/routes/index.js
create : firstproject/routes/users.js
create : firstproject/views/
create : firstproject/views/error.jade
create : firstproject/views/index.jade
create : firstproject/views/layout.jade
create : firstproject/app.js
create : firstproject/package.json
create : firstproject/bin/
create : firstproject/bin/www
change directory:
$ cd firstproject
install dependencies:
$ npm install
run the app:
$ DEBUG=firstproject:* npm start

  • Change the directory to firstproject and install all NPM dependencies.

cd firstproject
npm install

  • Here is the command output.

[email protected]:/home/ubuntu# cd firstproject
[email protected]:/home/ubuntu/firstproject# npm install
npm WARN deprecated [email protected]: Jade has been renamed to pug, please install the latest version of pug instead of jade
npm WARN deprecated [email protected]: Please update to at least constantinople 3.1.1
npm WARN deprecated [email protected]: Deprecated, use jstransformer
npm notice created a lockfile as package-lock.json. You should commit this file.
added 100 packages from 139 contributors and audited 101 packages in 3.459s
found 4 vulnerabilities (1 low, 1 high, 2 critical)
run `npm audit fix` to fix them, or `npm audit` for details

  • Start the Express web server.

npm start 0.0.0.0

  • Here is the command output.

[email protected]:/home/ubuntu/firstproject# npm start 0.0.0.0
> [email protected] start /home/ubuntu/firstproject
> node ./bin/www "0.0.0.0"
GET / 200 187.524 ms - 170
GET /stylesheets/style.css 200 3.243 ms - 111
GET /favicon.ico 404 13.398 ms - 1072

Step 11: Open Express application.

http://server-ip:3000

  • Here is the output.

 

Leave a Reply

Your email address will not be published.