Installing the MERN Stack on Ubuntu 20.04: A Guide for JavaScript Applications

by

The MERN stack is a powerful combination of four technologies: MongoDB, Express.js, React.js, and Node.js. This full-stack JavaScript solution streamlines the process of developing dynamic and responsive web applications.

MongoDB serves as a widely-adopted NoSQL database, enabling the creation of robust web solutions. Express.js is a flexible Node.js web application framework ideal for hybrid web app development. React.js is a versatile front-end library used to create engaging user interfaces. Node.js provides a server-side JavaScript runtime environment, allowing developers to execute JavaScript code on the server.

This guide demonstrates how to install the MERN stack on an Ubuntu 20.04 server.

Prerequisites

  • Ubuntu 20.04 server.
  • Configured root access on the server.

Getting Started

Begin by updating your system packages using the command below:

apt-get update -y

Once your packages are up-to-date, proceed to the next steps.

Install MongoDB Server

Since the latest MongoDB version is not available in Ubuntu’s default repository, you need to add MongoDB’s repository manually.

Install the required dependencies first:

apt-get install gnupg2 wget curl unzip git -y

Add the MongoDB GPG key with:

wget -qO- https://www.mongodb.org/static/pgp/server-4.4.asc | apt-key add -

Then, integrate the MongoDB repository into your system:

echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/4.4 multiverse" | tee /etc/apt/sources.list.d/mongodb-org-4.4.list

Update the repository and install MongoDB Server:

apt-get update -y
apt-get install mongodb-org -y

Initiate and enable MongoDB service:

systemctl start mongod
systemctl enable mongod

Confirm the MongoDB service status:

systemctl status mongod

You should see:

? mongod.service - MongoDB Database Server
     Loaded: loaded (/lib/systemd/system/mongod.service; disabled; vendor preset: enabled)
     Active: active (running) since [timestamp]; [elapsed time]
       Docs: https://docs.mongodb.org/manual
   Main PID: [PID] (mongod)
     Memory: [Memory]M
     CGroup: /system.slice/mongod.service
             ??[PID] /usr/bin/mongod --config /etc/mongod.conf

Verify MongoDB installation with:

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

The output should include:

MongoDB shell version v4.4.7
connecting to: mongodb://127.0.0.1:27017/?compressors=disabled&gssapiServiceName=mongodb
Implicit session: session { "id" : UUID("[UUID]") }
MongoDB server version: 4.4.7
{
  "authInfo" : {
    "authenticatedUsers" : [ ],
    "authenticatedUserRoles" : [ ]
  },
  "ok" : 1
}

Create MongoDB Admin User

Connect to MongoDB:

mongo

Switch to the admin database:

> use admin

Create an admin user:

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

Successful creation will display:

Successfully added user: {
  "user" : "admin",
  "roles" : [
    {
      "role" : "userAdminAnyDatabase",
      "db" : "admin"
    }
  ]
}

Exit the MongoDB shell:

> quit()

Install Node.js

Add the Node.js source repository:

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

Then install Node.js:

apt-get install nodejs -y

Verify Node.js and NPM versions:

node --version
npm --version

Your output should resemble:

v14.17.2
6.14.13

Install React.js

First, install create-react-app:

npm install -g create-react-app

Create a React.js application:

create-react-app myapp

You should see:

Success! Created myapp at /root/myapp
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 myapp
  npm start

Happy hacking!

Navigate to your app directory and start it:

cd myapp
npm start 0.0.0.0

Post-compilation, access your React.js app at http://your-server-ip:3000. You should see:

NodeJS

To close the application, press CTRL+C.

Install Express.js

Install the express-generator:

npm install -g express-generator

Create a new project:

express myproject

Output should include:

...
   create : myproject/
   ...
   change directory:
     $ cd myproject

   install dependencies:
     $ npm install

   run the app:
     $ DEBUG=myproject:* npm start

Navigate to your project directory, install dependencies, and start the server:

cd myproject
npm install
npm start 0.0.0.0

Access the Express app at http://your-server-ip:3000.

ExpressJS

Conclusion

Congratulations! You’ve successfully installed the MERN stack on your Ubuntu 20.04 server. You’re now equipped to embark on developing full-stack MERN applications. Should you have any questions, feel free to reach out.

FAQ

  • What is the MERN stack?
    The MERN stack is a collection of JavaScript technologies: MongoDB, Express.js, React.js, and Node.js, used to build dynamic web applications.
  • Why should I use the MERN stack?
    The MERN stack allows for seamless development across front and back ends using a single language (JavaScript), enhancing performance and scalability.
  • Is the MERN stack suitable for beginner developers?
    While knowledge in JavaScript is crucial, MERN is approachable for beginners, thanks to extensive resources and community support.
  • Can I install the MERN stack on other Linux distributions?
    Yes, the MERN stack can be installed on other distributions, though installation commands may vary slightly.
  • How do I troubleshoot installation errors?
    Consult official documentation for each technology component and verify system requirements. Community forums and documentation are valuable resources for troubleshooting.