Setup VueJS app on Ubuntu Server

Last Updated at : July 24, 2018 By - Usama Muneer | 1180

    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

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

    sudo ufw app list

    In my case, it returns.

    available-apps

    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 git@github.com: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.

    blog user
    Usama Muneer

    A web enthusiastic, self-motivated & detail-oriented professional Full-Stack Web Developer from Karachi, Pakistan with experience in developing applications using JavaScript, WordPress & Laravel specifically. Loves to write on different web technologies with an equally useful skill to make some sense out of it.

    Related Posts

    Laravel is one of a famous and widely used PHP framework which is growing with immense pace since its version 4.2. Learning Laravel & Setting up your application locally is not much of a difficult task but when it comes to deployment, developers often find it a bit tricky to handle.