How to Deploy Fullstack with Nginx on Digital Ocean

How to Deploy Fullstack with Nginx on Digital Ocean

How to Deploy Fullstack with Nginx on Digital Ocean. .Hi folks, Let’s deploy your full-stack application around the world using Digital Ocean .

Hi folks, Let’s deploy your full-stack application around the world using Digital Ocean .

I am going to present a simple step-by-step guide to deploy a full-stack(VUE+ NODE) on Digital Ocean. We will be mostly focusing on Nginx. It’s very simple with Nginx. This guide is very much similar for React developers.

This guide assumes that you have your Digital Ocean server running.

If you don’t have a Digital Ocean server ready, **then click here to setup your Digital Ocean Server: [Initial Server Setup with Ubuntu 16.04**](https://www.digitalocean.com/community/tutorials/initial-server-setup-with-ubuntu-16-04)

I have my full-stack application ready in my local machine.

This is image title

About My Application:

Frontend: Vue.js, Backend: Node.js

My Node.js server is running on port 3000. and the Vue application is running on port 8080.

Vue.js application makes a GET request on _http:localhost:3000/users?id=1_to get the details about user 1.

Upload your frontend and backend source code to github repository. In case you need help check this : Adding an existing project to GitHub .

Login to your server:

We will be using root user. I recommend you to add a sudo user and try things with that user. HOW TO CREATE SUDO USER ?

ssh [email protected]_DROPLET_IP
cd /home

We are working inside /home because Nginx will not have permissions to access files in root folder.

This is image title

Preparation:

We need to set up a few things before we move to the next steps.

1: Node and NPM

2: Git

3: PM2

4: Nginx

and install them if you don’t have already.

Install Node and NPM:

Run the following command:

curl -sL [https://deb.nodesource.com/setup_5.x](https://deb.nodesource.com/setup_5.x "https://deb.nodesource.com/setup_5.x") | sudo -E bash -
sudo apt-get install -y nodejs

Install Git:

sudo apt-get install git

Install PM2:

npm i -g pm2

What is PM2?

PM2 is a production process manager for Node.js applications (with a built-in load balancer). Simply, allows you to keep applications alive forever.

Install Nginx:

sudo apt-get install nginx -y

What is NGINX? Nginx is open source high-performance HTTP Server. It is one of the most popoular web server because it is know for it’s stability, high performance, simple configuration.

Step 1: Setting up the project

1.1 Setting up Node.js project

Clone your backend project from GitHub.

git clone https://github.com/harshittpandey/backend-app

Go inside the folder and install dependencies.

cd backend-app && npm install

1.2 Setting up Vue.js project

Clone your frontend project from Github.

git clone https://github.com/harshittpandey/frontend-app

Go inside the folder and install the required dependencies.

cd frontend-app && npm install

Let’s bundle our code for production using this command.

npm run build

Step 2: Hosting Application

Step 2.1 Hosting node.js application using PM2

Before hosting your node.js application let’s check if the API is working fine.

I am running my app using npm start because I am using express-generator. You can run node app.js also.

cd backend-app && npm start

This is image title

If It’s working fine then move to the next step.

It’s time to use our process management tool (PM2).

cd backend-app
pm2 start npm --name "app" -- start

If you’re using node app.js. then do,

pm2 start app.js

Now, pm2 will keep your application alive.

2.2 Deploying Vue.js application using Nginx

As we have already donenpm run build .

We just need to configure NGINX.

cd /etc/nginx/sites-available/
nano default

Cut out all lines with Ctrl+K. and copy this code there with your IP Address.

server {
        server_name YOUR_DROPLET_IP;
        listen 80;

        error_page 404 /index.html;
        location ~ ^/(api|images)/ {
         proxy_pass http://localhost:3000;
         proxy_http_version 1.1;
        }
        location / {
         alias /home/frontend-app/dist/; 
        }
}

What am I doing here ?

server_name will be your dropletIP for which it will listen for requests.

then I am checking

If there is any match for /api or /img in the request, then forward the request to localhost:3000/ where our node.js server is running.

Otherwise map the url to the file(index.html) located at /home/frontend-app/dist/

Step 3: Test and Reload Nginx

3.1 First of all, check if the configurations are valid.

sudo nginx -t

Check if the test is successful.

This is image title

3.2 Let’s reload Nginx

sudo systemctl restart nginx

Now It’s time to verify if our server is working or not.

This is image title

Perfect, It’s working fine. NGINX is handling all the request i.e.

1: forwarding request to localhost:3000 that belongs to server like /api or /image .

2: mapping URL that belongs to vue app.

I hope that this step by step guide was easy to understand. In case you have any issue please comment.

Nginx nodejs vuejs

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire NodeJs Developer

Looking to build dynamic, extensively featured, and full-fledged web applications? **[Hire NodeJs Developer](https://hourlydeveloper.io/hire-dedicated-node-js-developer/ "Hire NodeJs Developer")** to create a real-time, faster, and scalable...

Hire Dedicated VueJS Developers

Want to Hire VueJS Developer to develop an amazing app? **[Hire Dedicated VueJS Developers](https://hourlydeveloper.io/hire-dedicated-vue-js-developer/ "Hire Dedicated VueJS Developers")** on the contract (time/project) basis providing regular...

Hire Nodejs Developer

Looking to **hire NodeJS Developer**[https://www.dataeximit.com/node-js-development/](https://www.dataeximit.com/node-js-development/ "https://www.dataeximit.com/node-js-development/") to build a perfect back-end to your website or...

How to Install NodeJS on Ubuntu 19.04

In this tutorial, you will learn how to install Node onto Ubuntu 19.04 Disco Dingo. We will cover installation from the default repositories and, for those wanting more recent releases, how to install from the NodeSource repositories.

A Jira clone built with Vuejs & Nodejs/Graphql

A Jira clone built with Vuejs & Nodejs/Graphql