What is Digitalocean?
Digital Ocean is a cloud computing provider that basically offers you a virtual machine (a server) to host your web application.
What do you need?
A basic MERN application (Mongo, Express, React, Node)
In case this is your first time deploying to production, it is better to have a domain name but it is not essential as you can access your website after deployment with an IP address.
Getting Ready:
1- If you do not have an account create one in Digitalocean
4- Create a VPC under networking tap this will create a private network so you can access all resources with private IP addresses like DBs droplets and load balancers.
- In the left corner, select networking then select VPC Network.
- Select the region where you want your VPC better to select one that is near to your country.
- Keep the default IP address to be generated by digitalocean.
- Choose a name and description.
- Create a VPC network.
5- Now lets create a droplet(server) to host our application.
- In the left corner select Droplets then create Droplet.
- Here I will go with Ubuntu, or if you want to go with markeplace click it and search for mern.
- I will not add any Additional Storage or backups as this is only for testing and learning.
- Choose Authentication Method I will go with a password and keep this password with you as you will use it for login to the server.
- Finalize Details by selecting how many droplets you want I will go with one if you want two you can create it and will have the same configuration.
Now let's create a directory to place our application let's create in root directory.
cd /
mkdir mern-apps
cd mern-apps
Now we are in mern-app directory you can do pwd to check path, what we need to do is to git all our code files we can clone any node/express app from github.
Once you clone the project, we need to install node dependencies and prepare the frontend build for production (the react app).
to install node modules:
npm i
To create a frontend build ready for production.
npm run build
Notice the build has the index.html which we will tell nginx(webserver) to root all requests to this file.
Now if you try to copy the public IP in Google Chrome this won't work,
we need to install two things Nginx to accept requests on port 80 and PM2 which is node processing manager that will ensure running the node without logging in to the server.
Install PM2:
sudo npm i -g pm2
Install Nginx:
sudo apt install nginx
We need also to enable the firewall in the server to access the ports right now to check the firewall status is inactive.
to enable
sudo ufw enable
By default, if you enable the firewall all ports are blocked.
We need to enable three ports to access the server ports 80, 443, 22
sudo ufw allow ssh
sudo ufw allow http
sudo ufw allow https
Now if you copy the public IP and run it in Chrome you see the default Nginx webpage.
Great now we are able to install Nginx but we need our front-end page, not the default Nginx web page to do this let's see the nginx config file and change it.
cd /etc/nginx/sites-available
If you do ls -ltr you will see the default file which has all the configuration for the nginx server let see what is inside and change it to our needs.
With nano command you can view and change the file content, the most two important changes are the root and location.
sudo nano default
In Server block change the default root which was for default web server page change it to your index file page in my front-end app it looks like this
root /mern/JWT-/frontend/dist;
if you run the build with react app you get /build but since i used vite as a front-end /dist is the folder name.
if you have an api with you need to add the location of your api.
location /api/ {
proxy_pass http://localhost:8000; # Your Node.js/Express server address and port
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
Sample of default file
Now to save changes of default file click controll x Y enter.
Since we change the nginx config file we need to restart nginx
sudo systemctl nginx restart
Now refresh and you will see your web page out.
Please dont hesitate to ask any Questions.
SOCIAL SHARE CARD GENERATOR