Vue.js - Getting Started In 2019 (Part-1) 

This will be a series of articles where you will understand all aspects of Vue.js to build a production ready app. If you haven't read the other articles, do give a read.

Part 2 - Structuring & Authentication In Vue.js

Part 3 - Making CRUD App in Vue.js

This article will cover the what, why, basic and deployment of simple Vue.js app on AWS and is meant for absolute beginners to Vue.js.


What is Vue?

Vue (pronounced /vjuː/, like view) is a progressive framework for building UI and also can be used to target native. Unlike other monolithic frameworks, Vue is an incrementally adoptable ecosystem that scales between a library and a full-featured framework.

The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Why should we use Vue not React or Angular?

We are in the era of the modern javascript frameworks, every day a some new framework popups out. Infact, we already have frameworks like React and Angular which are backed by tech gigs like Facebook and Google and having a good community support.

If you study about the Angular it’s a MVC based framework which lacks Virtual Dom and while React on the other hand is just a View Layer but got Virtual Dom. So, here comes the Vue which provides two way data binding like Angular and virtual Dom support like React. It’s just learning from the mistakes of others which makes it better as compared to the others. Even if you see the Present Github Stars of React and Vue and Angular, the Vue is leading the other too, which simply signifies that the Vue is accepted by the js community.

You can read this awesome article to get your why.


Library size ⏲️ comparison

The sizes of the libraries are as follows:

  • Angular: 500+ KB

  • React: 100 KB

  • Vue: 80 KB

Enough of theory, let’s start doing some stuff

Env. Setup

  1. Install Node.js

Once you have Node.js installed, check Node.js works by running below command

node -v
  1. Next step is to install vue-cli which is a command line helper for generating and managing Vue.js applications.

npm install -g @vue/cli
  1. Check vue-cli works by running

vue --version

Getting Started With Project

Let’s generate a Vue project, by running below command and following the cli interface.

vue create my-project 

Once you are done, you will see a project created in the same directory where the command was ran.

Next run the following command

cd my-project
npm run serve

and you will see the below

npm run serve starts a development server up that watches our app’s source code for changes. Notice that other people on your network may visit your app using the -Network IP address displayed on your CLI.

Open up your browser and navigate to the URL shown on your terminal, in the above case http://localhost:8080

I personally don’t use vue-cli much but instead I prefer to use Nuxt Framework which actually presets all the configurations needed to develop the vue js application. It also quite identical to the Next.js (which has same kind of implementation).

Let’s install Nuxt app

npm install -g [email protected]

To create a Nuxt project run the below command

create-nuxt-app test-project

Use below image as example to answer command line questions

Run the following now

cd test-project
npm run dev

Deploying Nuxt Single Page App On AWS

Prerequisite Understanding of AWS Ec2 and you have added the project on git repo

Deploying Universal App is bit complex as compared to Single Page Applications as in case of SPA there are few assets files and one index.html file which you can host on any normal web server.

Let’s start now

  1. Creating an AWS EC2 instance -

    • Create a ubuntu 16.04 instance, make sure to open the ports 80(http) and 443(https) inside the security group.

    • Create a pem key and download it.

  2. SSH into the EC2 instance

  1. Install Nodejs and NPM

    cd $HOME
    wget https://nodejs.org/dist/v10.15.3/node-v10.15.13-linux-x64.tar.gz -O node.tar.gz
    tar -xzvf node.tar.gz
    echo "now moving path"
    mv node-v10.15.13-linux-x64 node
    rm node.tar.gz
    echo "PATH=\"\$HOME/node/bin:\$PATH\"" | tee -a .profile
    
    cd $HOME
    sudo rm /usr/bin/{node,npm}
    sudo ln -s $HOME/node/bin/node /usr/bin/node
    sudo ln -s $HOME/node/bin/npm /usr/bin/npm
  1. Cloning the repo

    git clone repo-name
  1. Setup project

    cd project
    nano .env
    NODE_ENV=production // add the following line and save
    sudo npm install
    sudo npm run build
  2. Install pm2

    sudo npm install -g pm2
    pm2 // inside the project dir

  1. Install ngnix and setup reverse proxy using nginx

    sudo apt-get install nginx
    cd /etc/nginx/sites-available
    sudo nano default
    
    // replace the location code block below code
    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; 
    } 
    
    sudo nginx -t
    sudo systemctl restart nginx
    

YAY, ITS DONE 🚀

Try typing the ip of server and if everything goes well you will see

Email

About Shubham Bansal

Shubham has been full stack developer/Engineer, building scalable systems for startups, also a tech freelancer remotely working with many organisations around the globe to make fault tolerant systems.

Subscribe to our email list

More Tags Of Your Interest