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

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 folllowing 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.

Replace <project-name>with the name you want to call your app.

Then install the dependancies

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.

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

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

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

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.

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:

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.

Confirm that your configuration is correct by typing.

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!!!!

 

 

 

Leave a Comment