Tutorials

How to Install MERN Stack on Debian 11

So are you also confused like most of the MERN beginners on how to create your first MERN project? and also how to setup the environment for your project? Even I was also confused when I created my first MERN project. 

What is MERN ?

MERN stack consists of four key technologies MongoDB, Express, React, and Node. It is specially designed for easier and faster deployment of full-stack web applications. It is one of the most popular and user-friendly development structures that helps you to improve your applications to a great extent. The MERN stack allows you to build a 3-tier architecture (frontend, backend, database) entirely using JavaScript and JSON.

In this tutorial, I will show you how to install the MERN stack on Debian 11.

Prerequisites

  • A server running Debian 11.
  • A root password is configured on the server.

Getting Started

Before starting, it is recommended to update your system's package cache to the latest version. You can update it using the following command:

apt-get update -y

After updating the package cache, install other required dependencies using the following command:

apt-get install gnupg2 curl -y

Once all the required dependencies are installed, you can proceed to the next step.

Installing MongoDB Server

MongoDB is a NoSql and object-oriented database technology used in large data storage. By default, MongoDB is not included in the Debian 11 default repository. So you will need to add the MongoDB repository to APT.

First, download and add the MongoDB GPG key with the following command:

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

Next, add the MongoDB repository to APT with the following command:

echo "deb http://repo.mongodb.org/apt/debian buster/mongodb-org/4.4 main" | tee /etc/apt/sources.list.d/mongodb-org-4.list

Next, update the repository and install the MongoDB server package using the following command:

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

After the installation, start the MongoDB service and enable it to start at system reboot.

systemctl start mongod
systemctl enable mongod

You can verify the MongoDB version using the following command:

mongod --version

You should see the following output:

db version v4.4.8
Build Info: {
    "version": "4.4.8",
    "gitVersion": "83b8bb8b6b325d8d8d3dfd2ad9f744bdad7d6ca0",
    "openSSLVersion": "OpenSSL 1.1.1k  25 Mar 2021",
    "modules": [],
    "allocator": "tcmalloc",
    "environment": {
        "distmod": "debian10",
        "distarch": "x86_64",
        "target_arch": "x86_64"
    }
}

After installing MongoDB, you can proceed to install Node.js.

Installing Node.js

Node.js allows you to run JavaScript on the server-side and outside of the browser. It uses an event-driven model that makes it lightweight for applications that run across distributed devices.

To install the latest version of Node.js, you will need to add the NodeSource repository to your system.

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

Once the repository is installed, run the following command to install the Node.js version 16 to your system:

apt-get install nodejs -y

Once the installation is completed, verify the Node.js version with the following command:

node --version

You should see the following output:

v16.8.0

Installing React.JS

React is an open-source JavaScript library and used to develop front-end web applications. It allows you to make reusable components for a single-page user interface.

You can install the create-react-app tool using the NPM as shown below:

npm install -g create-react-app

After the installation, create a React app with the following command:

create-react-app reactapp

You should see the following output:

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

Happy hacking!

Now, change the directory to reactapp and start the application using the following command:

cd reactapp
npm start 0.0.0.0

You should see the following output:

> [email protected] start
> react-scripts start "0.0.0.0"
Compiled successfully!

You can now view reactapp in the browser.

  http://localhost:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

Now, open your web browser and test your React application using the URL http://your-server-ip:3000. You should see the React default page:

Press CTRL+C to stop the application.

Installing Express

Express is a Node.js framework used for the rapid development of node-based web applications.

You can install it using the NPM command as shown below:

npm install -g express-generator

After the installation, create an Express application with the following command:

express mearnapp

You should see the following output:

   create : mearnapp/
   create : mearnapp/public/
   create : mearnapp/public/javascripts/
   create : mearnapp/public/images/
   create : mearnapp/public/stylesheets/
   create : mearnapp/public/stylesheets/style.css
   create : mearnapp/routes/
   create : mearnapp/routes/index.js
   create : mearnapp/routes/users.js
   create : mearnapp/views/
   create : mearnapp/views/error.jade
   create : mearnapp/views/index.jade
   create : mearnapp/views/layout.jade
   create : mearnapp/app.js
   create : mearnapp/package.json
   create : mearnapp/bin/
   create : mearnapp/bin/www

   change directory:
     $ cd mearnapp

   install dependencies:
     $ npm install

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

Now, change the directory to your application directory and install all application dependencies using the following command:

cd mearnapp
npm install

Next, start the application using the following command:

npm start 0.0.0.0

You should see the following output:

> [email protected] start
> node ./bin/www "0.0.0.0"

Now, open your web browser and access your Express application using the URL http://your-server-ip:3000. You should see the following page:

Conclusion

In the above guide, you learned how to install the MERN stack on Debian 11. You can now use this framework for the rapid development of web and mobile applications.