Nvidia Unveils Futuristic Gaming Experience at Computex 2023
News

Nvidia Unveils Futuristic Gaming Experience at Computex 2023, Blending Gaming and AI

by Isabel
May 29, 2023
0

At Computex 2023, Nvidia displays a futuristic gaming experience that...

Read more
Adobe Introduces Powerful Generative AI Tools in Photoshop

Adobe Introduces Powerful Generative AI Tools in Photoshop Beta

May 29, 2023
Adobe Photoshop's Generative Fill Feature

Exploring the Power of Adobe Photoshop’s Generative Fill Feature

May 27, 2023
NVIDIA and Microsoft Partner to Accelerate AI

NVIDIA and Microsoft Partner to Accelerate AI

May 25, 2023
google photos security and privacy

Exploring the Top 5 Privacy and Security Risks of using Google Photos

May 24, 2023
InternGPT A New Way to Interact with ChatGPT

InternGPT: A New Way to Interact with ChatGPT

May 27, 2023
How to Use ChatGPT in Linux Terminal

How to Use ChatGPT in Linux Terminal

May 19, 2023
How to Upload a Document to ChatGPT

How to Upload a Document to ChatGPT

May 25, 2023
PandasAI

Exploring the Power of PandasAI

May 29, 2023
Google AI search

Google AI Search: The Future of Search

May 15, 2023
LLM Connected with APIs

Gorilla: LLM Connected with APIs

May 31, 2023
Cloudbooklet
  • News
  • Artificial Intelligence
  • Linux
  • Google Cloud
  • AWS
No Result
View All Result
Cloudbooklet
  • News
  • Artificial Intelligence
  • Linux
  • Google Cloud
  • AWS
No Result
View All Result
Cloudbooklet
No Result
View All Result
Home Google Cloud

How to Install and Setup MERN Stack with Nginx on Ubuntu

by Cloudbooklet
May 18, 2023
in Google Cloud, Compute Engine, Linux
Reading Time: 11 mins read
How to Install and Setup MERN Stack with Nginx on Ubuntu
Share on FacebookShare on TwitterShare on WhatsAppShare on Telegram

MERN stack is a setup with MongoDB, Express, React and Node.js. This is one of the variants of MEAN stack. MongoDB is the database, Express with Node.js is used for backend which communicates with the database, React is the client side or frontend. We will use Nginx reverse proxy to Node.js server and setup Let’sEncrypt SSL.

In this guide you are going to learn how to setup MERN stack on your Ubuntu 20.04 server.

You might also like

How to Setup SSH Keys on Ubuntu

How to Setup SSH Keys on Ubuntu 20.04

May 31, 2023
DragGAN AI editing Tool Install and Use DragGAN Photo Editor

DragGAN AI editing Tool Install and Use DragGAN Photo Editor

May 27, 2023

This setup is tested on Google Cloud, so it should work fine on other VPS, cloud servers running Ubuntu 20.04 or Ubuntu 18.04.

Prerequisites

  • A Ubuntu server with sudo access.
  • A domain name pointed to your server.

Table of contents

  1. Install MongoDB.
  2. Configure MongoDB.
  3. Install Node.js with NVM.
  4. Install React.js.
  5. Install Express.js.
  6. Setup PM2 to run Node.js in backend.
  7. Install Nginx and configure it.
  8. Install Let’sEncrypt SSL.

Initial Server Setup

Start by updating the server packages to the latest available.

sudo apt update
sudo apt dist-upgrade -y

Now you can proceed to setup MERN stack.

Install MongoDB

Here we will install MongoDB Community Edition with LTS using the apt package managed. The current latest version of MongoDB at the time of this article is 5.0.5.

You may need to install gnupg for importing the key.

sudo apt install gnupg

Import the public key using the following command.

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

Add the MongoDB repository to the sources list.

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

Update the packages and install MongoDB.

sudo apt update
sudo apt install -y mongodb-org

Once the installation is completed enable MongoDB to start at system startup.

sudo systemctl enable mongod

Start MongoDB server.

sudo service mongod start

You can view the status using the following command.

sudo service mongod status

Output
● mongod.service - MongoDB Database Server
     Loaded: loaded (/lib/systemd/system/mongod.service; enabled; vendor preset: enabled)
     Active: active (running) since Sun 2022-01-16 22:08:26 UTC; 7h ago
       Docs: https://docs.mongodb.org/manual
   Main PID: 1942 (mongod)
     Memory: 164.5M
     CGroup: /system.slice/mongod.service
             └─1942 /usr/bin/mongod --config /etc/mongod.conf

Jan 16 22:08:26 staging systemd[1]: Started MongoDB Database Server.

Configure MongoDB

Now we can secure MongoDB, configure MongoDB to accept remote connections and also create a new database.

Secure MongoDB

Edit MongoDB config file.

sudo nano /etc/mongod.conf

Scroll down to the security section #security and uncomment it and enable authorization. The final edit should look as below.

security:
  authorization: enabled

Enable Remote Connections

To enable remote connections you need to edit the same file and add your internal or private IP to the network interfaces. Your configuration should look like the one below.

net:
  port: 27017
  bindIp: 127.0.0.1,10.128.10.1

Replace 10.128.10.1 with your IP address.

Open firewall if any for the port 27017.

Restart MongoDB.

sudo systemctl restart mongod

Confirm if MongoDB is allowing remote connections using the following command.

sudo lsof -i | grep mongo

You should receive an output similar to the one below.

mongod 1942 mongodb 11u IPv4 31550 0t0 TCP instance_name.c.project_id.internal:27017 (LISTEN)
mongod 1942 mongodb 12u IPv4 31551 0t0 TCP localhost:27017 (LISTEN)

Create MongoDB Admin User

Connect to MongoDB shell using mongosh command.

mongosh

Change to admin database.

use admin

Create admin user with all privileges and setup password.

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

Enter password when prompted.

Enter exit to exit the shell.

Now you can use the following connection string to connect to MongoDB.

mongodb://admin:password@External-IP:27017/database

Install Node.js with NVM

We will use Node Version Manager (NVM) to install Node.js. With this you can easily with between different Node.js versions.

Download and run the NVM installation script using wget.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

Now load the nvm command to current shell session.

source ~/.bashrc

To list all available Node.js versions you can use the following command.

nvm ls-remote

Install the Node.js version you need with the below syntax.

nvm install v16.13.2

Once installed you can check Node.js and NPM versions.

node -v
v16.13.2

npm -v
6.14.13

Install React.js

Install and build frontend React.js using npx command.

Navigate to the folder where you want to install React app and execute the following command.

npx create-react-app frontend

This will take some time to install all React packages. Once the installation is completed you will see a frontend folder created with all basic React scripts.

Navigate in to frontend directory and trigger the build using npm.

cd frontend
npm run build

This will create a static output with HTML, CSS and JS files for your frontend.

You can point your Nginx web server to this build directory to serve your frontend.

Install Express.js

Install express generation using the npx command.

npx express-generator

Once the installation is completed create your backend application using express command.

cd ~/
express backend

Now your Express should be created. You can install all node modules and start Express server using PM2 in background as mentioned in the below section.

cd backend
npm install

Become a Full-Stack Web Developer with React Specialization. Complete Web Development Course

Setup PM2 to Run Node.js in Background

PM2 is a Node Process Manager which is very useful to start Node servers in background.

Navigate to your Express application and execute the following command.

cd ~/backend
pm2 start npm --name "backend" -- start

Now your Express server is started in the background and listening on port 3000.

Configure PM2 to start Express application at startup.

pm2 startup

You will be provided a long command to execute. Once the command is executed you can save the settings.

pm2 save

Next you can configure Nginx reverse proxy over this port on a subdomain or a subfolder as per your wish.

Install Nginx and Configure it

Nginx is one of the best web server to work with Node.js based applications.

Install Nginx.

sudo apt install nginx

Remove default configurations

sudo rm /etc/nginx/sites-available/default
sudo rm /etc/nginx/sites-enabled/default

Create new Nginx configuration

sudo nano /etc/nginx/sites-available/application.conf

Paste the following. In this configuration we are pointing the main domain path to the build output directory of React.js application and the /api path for the Express.js application.

server {
     listen [::]:80;
     listen 80;

     server_name domainname.com www.domainname.com;

     root /home/cloudbooklet/backend/build/;
     index index.html;

     location / {
         try_files $uri $uri/ =404;
     }

     location /api/ {
         proxy_pass http://127.0.0.1:3001;
         proxy_http_version 1.1;
         proxy_set_header Connection '';
         proxy_set_header Host $host;
         proxy_set_header X-Forwarded-Proto $scheme;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $remote_addr;
    }
}

Save and exit the file.

Enable your configuration by creating a symbolic link.

sudo ln -s /etc/nginx/sites-available/application.conf /etc/nginx/sites-enabled/application.conf

Check your Nginx configuration and restart Nginx

sudo nginx -t
sudo service nginx restart

Install Let’sEncrypt SSL

We can use Certbot to install free Let’s Encrypt SSL certificate for your domain.

sudo apt install python3-certbot-nginx

Execute the following command to install certificate and configure redirect to HTTPS automatically.

sudo certbot --nginx --redirect --agree-tos --no-eff-email -m [email protected] -d domain.com -d www.domain.com

Now you should receive SSL certificate and it will be configured automatically.

Setup auto renewal.

sudo certbot renew --dry-run

Now you can look up your domain in your browser to see the output.

Conclusion

Now you have learned how to install and setup MERN stack on Ubuntu 20.04.

Thanks for your time. If you face any problem or any feedback, please leave a comment below.

Tags: MongoDBNginxReactUbuntu
Share4Tweet3SendShare
Cloudbooklet

Cloudbooklet

Help us grow and support our blog! Your contribution can make a real difference in providing valuable content to our readers. Join us in our journey by supporting our blog today!
Buy me a Coffee

Related Posts

Install WordPress with Docker Compose, Nginx, Apache with SSL

WordPress Deployment Made Easy: Docker Compose, Nginx, Apache, SSL Setup Guide

May 20, 2023
How to Install WordPress on Docker

How to Install WordPress on Docker for Windows, macOS, and Linux

May 20, 2023
How to install python on Ubuntu

How to Install Python on Ubuntu 22.04?

May 31, 2023
what's new in node.js 20

What’s new in Node.js 20?

April 23, 2023

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

I agree to the Terms & Conditions and Privacy Policy.

  • Trending
  • Comments
  • Latest
DragGAN The AI-Powered Image Editing Tool

DragGAN: The AI-Powered Image Editing Tool That Makes Editing Images Easy

May 30, 2023
DragGAN AI editing Tool Install and Use DragGAN Photo Editor

DragGAN AI editing Tool Install and Use DragGAN Photo Editor

May 27, 2023
Bard API key

Everything You Need to Know About Google’s Bard API Key

May 20, 2023
Install PHP 8.1 on Ubuntu

How to Install or Upgrade PHP 8.1 on Ubuntu 20.04

May 17, 2023
DragGAN The AI-Powered Image Editing Tool

DragGAN: The AI-Powered Image Editing Tool That Makes Editing Images Easy

75
Upgrade PHP version to PHP 7.4 on Ubuntu

Upgrade PHP version to PHP 7.4 on Ubuntu

28
Install Odoo 13 on Ubuntu 18.04 with Nginx - Google Cloud

Install Odoo 13 on Ubuntu 18.04 with Nginx – Google Cloud

25
Best Performance WordPress with Google Cloud CDN and Load Balancing

Best Performance WordPress with Google Cloud CDN and Load Balancing

23
How to Setup SSH Keys on Ubuntu

How to Setup SSH Keys on Ubuntu 20.04

May 31, 2023
ChatGPT app

The Easiest Way to Download ChatGPT App Free

May 31, 2023
LLM Connected with APIs

Gorilla: LLM Connected with APIs

May 31, 2023
Soundstorm-Pytorch

Soundstorm-Pytorch: A Powerful Tool for Audio Generation

May 30, 2023

Popular Articles

  • DragGAN The AI-Powered Image Editing Tool

    DragGAN: The AI-Powered Image Editing Tool That Makes Editing Images Easy

    1436 shares
    Share 574 Tweet 359
  • DragGAN AI editing Tool Install and Use DragGAN Photo Editor

    333 shares
    Share 133 Tweet 83
  • Auto-Photoshop-Stable Diffusion-Plugin: A New Way to Create AI-Generated Images in Photoshop

    70 shares
    Share 28 Tweet 18
  • InternGPT: A New Way to Interact with ChatGPT

    54 shares
    Share 22 Tweet 14
  • Midjourney vs Adobe Firefly: A Comparison of Two AI Image Generation Tools

    10 shares
    Share 4 Tweet 3
Cloudbooklet

Welcome to our technology blog, where we explore the latest advancements in the field of artificial intelligence (AI) and how they are revolutionizing cloud computing. In this blog, we dive into the powerful capabilities of cloud platforms like Google Cloud Platform (GCP), Amazon Web Services (AWS), and Microsoft Azure, and how they are accelerating the adoption and deployment of AI solutions across various industries. Join us on this exciting journey as we explore the endless possibilities of AI and cloud computing.

  • About
  • Contact
  • Disclaimer
  • Privacy Policy

Cloudbooklet © 2023 All rights reserved.

No Result
View All Result
  • News
  • Artificial Intelligence
  • Linux
  • Google Cloud
  • AWS

Cloudbooklet © 2023 All rights reserved.

This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.