Deploying a MERN Stack App on DigitalOcean: A Step-by-Step Guide
Introduction
In the dynamic realm of web development, deploying a MERN (MongoDB, Express.js, React.js, Node.js) stack application marks a crucial milestone. Whether you're a seasoned developer or just starting your journey, mastering the deployment process is essential for showcasing your creations to the world. In this guide, we'll embark on a journey to demystify the intricacies of deploying a MERN stack application, ensuring a seamless transition from development to production.
Understanding the MERN Stack
Before diving into deployment, let's briefly revisit the components of the MERN stack. MongoDB serves as the database, offering a flexible and scalable solution for storing data. Express.js provides a robust framework for building web applications on the Node.js runtime environment. React.js, a JavaScript library for building user interfaces, handles the frontend, offering a dynamic and interactive experience. Lastly, Node.js powers the backend, facilitating server-side logic and API integrations.
Note: React.Js can be replaced by the Next.Js and other libraries.
DigitalOcean
DigitalOcean stands out as a leading cloud infrastructure provider, offering simplicity, scalability, and reliability for deploying web applications. With a user-friendly interface, robust features, and competitive pricing, DigitalOcean provides an ideal environment for hosting MERN stack applications. You can get a $200 credit when you create a new account for 60 days.
Configuration and Setup
Before configuration and setup for the deployment make sure that you backed up and frontend is working properly in your local machine. Once you verify that you are ready to deploy your code on the digital ocean cloud. Firstly you need to setup the Nginx, “8 Steps to setup Nginx Server on Ubuntu”. After you setup the Nginx now follow the following steps:
1. Install Node.Js
$ sudo apt install nodejs
If you like to setup your database on the same server then you can use the following command to install the MongoDB otherwise you can create the MongoDB Database using Atlast
2. Steps - Installing MongoDB
Add Key list
$ curl -fsSL https://www.mongodb.org/static/pgp/server-4.4.asc | sudo apt-key add -
Check Key list
$ apt-key list
Now, run the following command to create the MongoDB file on your machine
Create a source list file
$ echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/4.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-4.4.list
Note: If you like to work with the latest version of the MongoDB then you can change the version accordingly like “mongodb-org-4.4” to “mongodb-org-6.0” from the start of step 2
Update the software
$ sudo apt update
Install MongoDB
$ sudo apt install mongodb-org
Start MongoDB Service
$ sudo systemctl start mongod.service
Check the Status of the Database
$ sudo systemctl status mongod
Enable MongoDB Service
$ sudo systemctl enable mongod
Stop MongoDB Service
$ sudo systemctl stop mongod
After stopping the service of MongoDB you can run the following command to start it again
$ sudo systemctl start mongod
Now Curl the GitHub repo on your server
3. Clone Repo
Backend
$ git clone github.com/<username>/<backend>
Frontend
$ git clone github.com/<username>/<frontend>
Now you can install node_module using the package manager (npm or yarn) If you are using the npm as a package manager then you can directly install node_modules on each folder using
$ npm install
If you are using the yarn as a package manager then you need to install the yarn
4. Install yarn
$ sudo apt remove yarn
$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
$ sudo apt-get update
$ sudo apt-get install yarn -y
5. Setup Nginx
After the configuration of the database and the clone of the GitHub repo, now you are ready to setup the nginx configuration.
Copy a sites-available file in sites-enabled
$ sudo ln -s /etc/nginx/sites-available/company /etc/nginx/sites-enabled
The file looks like
server {
listen 80 default_server;
listen [::]:80 default_server;
root /var/www/html;
server_name example.com www.example.com;
location / {
proxy_pass http://localhost:3000/; // replace this with your frontend port
proxy_buffer_size 1M;
proxy_buffers 4 1M;
}
location /api/ {
proxy_pass http://localhost:4001/; // replace this with your backend port
proxy_buffer_size 1M;
proxy_buffers 4 1M;
try_files $uri $uri/ =404;
}
}
The URL for the implementation of the API is “example.com/api/”
Once the file is copied test the nginx server
Test
$ sudo nginx -t
Reload
$ sudo systemctl reload nginx
6. Install pm2
$ npm install pm2 -g
7. Run nest with pm2
enter inside the backend folder then run the following command
$ yarn build
$ pm2 start dist/main.js --name <application_name>
8. Run next with pm2
enter inside the frontend folder then run the following command
$ yarn build
$ pm2 start yarn –name “<name>” -- run start
Run react with pm2
enter inside the frontend folder then run the following command
$ yarn build $ pm2 start serve -n react-app -- --port 3000
9. Encrypt the URL SSL Encryption
$ sudo apt install certbot python3-certbot-nginx
10. Allow HTTPS firewall
Check Status
$ sudo ufw status
Allow
$ sudo ufw allow 'Nginx Full'
$ sudo ufw delete allow 'Nginx HTTP'
11. Obtain the SSL certificates
$ sudo certbot --nginx -d example.com -d www.example.com
Verify timer for auto-renew
$ sudo systemctl status certbot.timer
Test the auto-renew
$ sudo certbot renew --dry-run
Conclusion
Remember, deploying a MERN stack application is not just about making it available online; it's about delivering a seamless and engaging experience to your users. Whether you're building a personal project, a portfolio, or a business application, the skills you've gained through this deployment process will serve you well in your future endeavors.
Now that your application is live, take pride in your accomplishment and keep pushing the boundaries of what you can create with the MERN stack. Happy coding!
If you need further assistance or have any questions along the way, feel free to reach out. Happy deploying!
