Setup VueJS app on Ubuntu Server

Introduction

VueJS is one of a famous and widely used JavaScript framework which is growing with immense pace since its release. Setting up your Vue application locally is an easy task but when it comes to deployment, developers often find it a bit tricky to handle. Here we’ve formulated a detailed configuration-first approach for deploying your Vue application on any Ubuntu Server with ease. You just need to follow along.

Step # 01 - Setting up

sudo apt update

sudo apt upgrade

Step # 02 - Setup NGINX

sudo apt install nginx

Step # 03 - Configure Virtual Host

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/sites-available/default

Edit the file and reconfigure it as per your VueJS application.

server {
  listen 3000 default_server; //your desired port
  listen 192.168.100.65:3000 default_server; //your ip_Address
  root /var/www/html/vue-js-app-twt/dist; //you VueJS app path
  index index.html index.htm index.nginx-debian.html;
  server_name _;
  error_page 404 /index.html;
  location /vue-js-app-twt {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-NginX-Proxy true;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_max_temp_file_size 0;
    proxy_pass http://192.168.100.65:3000;
    proxy_redirect off;
    proxy_read_timeout 240s;
  }
}

Step # 04 - Setup Firewall for NGINX

Also Read: Top Programming Jobs in UK

You can check the applications configurations that ufw knows by typing in:

sudo ufw app list

In my case, it returns.

In case you wish to add other application permissions to talk through ufw, you may allow like

sudo ufw allow 'Nginx HTTP'

Step # 05 - Checking NGINX Service

systemctl status nginx

You may also verify if the configurations you've made is fine by typing in the following command

nginx -t

Now the Nginx is running on your assigned IP address or domain in your browser with default nginx page.

Finally reload the actual NGINX configuration to take effect.

sudo nginx -s reload

This will reload and apply the new configurations. Now you can visit http://your-ip-address:3000/ to access the VueJS Application.

Step # 06 - Setup VueJS App

The most important step remains is to put together the Vue files in /var/www/html/vue-js-app-twt

cd /var/www/html/

Git clone [email protected]:usamamuneerchaudhary/vue-js-app-twt.git

cd into vue-js-app-twt

npm install

npm run build

Finally

You may access your VueJS application by typing in http://your-ip-address:3000/ in your browser and it will work just like magic.

If you have any questions or feedback related to this blog, let us know in the comment section below.

Do follow us on Twitter.