Creating Vue.js Application using Nuxt.js and NGINX

Vue.js is one of the UI framework that highly in demand nowadays. It is very powerfull to build a Single Page Application along with other tools. Nuxt.js is also a framework build on top vue.js. Why bother to use Nuxt.js over Vue.js itself?
Derick has explain very well about this: https://medium.com/vue-mastery/10-reasons-to-use-nuxt-js-for-your-next-web-application-522397c9366b

So now, we need to install the prerequisites first:
Node.js (>=6.x, 8.x preferred), npm version 3+ and Git.

Install vue-cli latest stable

$ npm install -g vue-cli

Install vue-cli dev branch

$ npm install -g @vue/cli

Done.

Lets do the part to install Nuxt.js:
Nuxt.js is really easy to get started with. A simple project only needs the nuxt dependency. You can start with starter template that been prepared by the team:

$ vue init nuxt-community/starter-template <projectname>

then install the dependencies:

$ cd <project-name> 
$ npm install

and launch the project with:

$ npm run dev

The application is now running on by default http://localhost:3000.

There are several ways to change the default port that nuxt.js serve, you need to edit config in the package.json file. Please refer here: https://nuxtjs.org/faq/host-port/

Or, you can start manually create. The guide well explained here: https://nuxtjs.org/guide/installation

Serving node.js app with NGINX

I have tried to implement to serve Nuxt.js in one of my subdomain and subdirectory. It is amazing. You can build a simple SPA in a matter of time.
The steps that works for me to let NGINX serve Nuxt.js app:

1. Make unit systemd service
2. Configure NGINX configuration

Make unit systemd service This service will automate to run node.js application in the background.

Create unit file in /etc/systemd/system/, lets name it myvueapp.service

[Unit] 
Description=My Vue Server

[Service]
WorkingDirectory=/var/www/waysquare.com/html/myvueapp
ExecStart=/usr/bin/npm run dev 
Restart=always 
# Restart service after 10 seconds if node service crashes RestartSec=10 
# Output to syslog 
StandardOutput=syslog 
StandardError=syslog 
SyslogIdentifier=nodejs-example 
#User=<alternate user> #Group=<alternate group>

Reload systemd daemon

$ sudo systemctl daemon-reload

Enable and start service

$ sudo systemctl enable myvueapp && sudo systemctl start myvueapp

Check the status of the service

$ sudo systemctl status myvueapp

The status of one of my vue app service

Configure NGINX config
To serve different service, I use proxy_pass feature, just add this snippet to your server block:

#example from portfolio.waysquare.com 
# rest of the server block ... 
location / { 
proxy_pass http://127.0.0.1:3000; 
} 
# rest of the server block ....

Or if you serve vue app using subdirectory:

#example from waysquare.com/cv 
#rest of the server block .... 
location ~ ^/cv(?:/(.*))?$ { 
rewrite ^/(.*)/$ /$1 permanent; 
rewrite ^/cv(?:/(.*))?$ /$1 break; 
proxy_pass http://127.0.0.1:3000; 
} 
#rest of the server block .....

The question mark is a regular expression quantifier and should tell nginx to match zero or one of the previous character (the slash).
The first rewrite is to remove trailing slash at the end of URL. Then remove the subdirectory withour changing URL.

Restart Nginx

$ sudo systemctl restart nginx

Then, try to open the vue app url.

Done! Happy Coding :)

Originally published at www.waysquare.com on June 18, 2018.