Deploy nuxt app (Vue.js) with Pm2 and Nginx Step by Step.

In this article am going to show you  how to deploy a vue (made with nuxt for server side rendering) project to digital ocean or any other hosting provider.We are going to use pm2 (production process manager) for Node apps and and Nginx for reverse — proxy.

Make A Vue Project

We are going to use nuxt to make our vue project which will allow us to do server side rendering which is essential for seo.

Before you proceed make sure you have the following installed:

1. Node.js
2. Npm or yarn
3. vue-cli

To get started start by running this command to start a vue(nuxt) project.

vue init nuxt-community/starter-template <project-name>

Replace with the name you want to call your app.

Then install the dependancies

cd <project-name>
npm install

with this we have our app ready for deployment

Building  The Application

We need to build  our application which will  bundle all the application assets and later we can run the application.

Run the following commands to build and start our application on port 3000 which is the default port that nuxt runs on.

npm run build
npm run start
 or using yarn
yarn run build
yarn run start

if you visit  http://localhost:3000. you should see your application running

Note:Always run Npm run build every time you make changes to your application and you need to restart it

Why we need pm2

Now that we have our application ready its time to start our deployment process

Pm2 is a production process manager that helps us to keep our app alive at all times.it also  restart the application during boot time  offloading us the task of  restarting our application every time we power on our computer.

Using Pm2 To Run Our Vue (Nuxt) App

Start by running this commands to install pm2

npm install pm2 -g

Now that we have pm2 installed run the falling command to start our vue app with pm2.

pm2 start npm --name "your-app-alias" -- start

Incase you rebuild you app and want to restart you app you can run.

pm2 restart your-app-alias

Where app alias is the name of your app.

Using Nginx As A Reverse Proxy For Our Vue App

Now that we have our app running on port 3000.We need a way for users to connect to it.Luckly nginx provides this for  us.

The nginx  setup is quite simple.

Start by installing nginx.

sudo apt-get update
sudo apt-get install nginx

We need to edit the nginx configuration file to connect to  our app.To edit it open /etc/nginx/sites-available/default  configuration file by running:

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

Replace the file content with the following configurations. If your application is set to listen on a different port you should update the port number to the one your application is using.in this example i will use port 3000.Also replace the server_name with your domain name.

server{
listen 80 default_server;
listen [::]:80 default_server;
server_name example.com www.example.com

root /usr/share/nginx/html;
 
index index.php index.html index.htm; 
location / {
        proxy_pass http://localhost:3000;
        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;
    }
}

To enable the Nginx server block configuration we have just created,we need to create a symbolic link of our conf file to the sites-enabled directory:

1

sudo ln -s /etc/nginx/sites-available/default /etc/nginx/sites-enabled

Confirm that your configuration is correct by typing.

nginx -t

If this returns without indicating any issues, we can restart the Nginx process to read the our new config:

1

sudo systemctl restart nginx

Now that everything is setup restart nginx and visit your site on the browser.For example if you site is hosted at the domain  https://kenyaappexperts.com  visit it and you should now see you site up and running.

Conclusion

Now we have our vue.js (nuxt)  application running.Everytime you make changes you should make sure you alway rebuild your application.

You can also enroll for our free vue.js courses at https://codesahara.com.

Happy Coding!!!!