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.

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

• OSX setup

• Window setup

• Linux setup

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

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 create-nuxt-app@latest

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

   • chmod 600 you_key.pem

   • ssh -i you_key.pem ubuntu@your_instance_public_ip

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

3. 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 :rocket:

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

Stay tuned for the next article in series :D

If anything is not clear or you want to point out something, please comment down below.

You may also like other articles on overflowjs.com

Map-Reduce-Filter-Find In Javascript ES6

Proxy In Javascript - 2019

Js ES6 Iterables and Iterators - 2019

Javascript - Generator-Yield/Next & Async-Await - 2019

This keyword In Javascript 2019 - Javascript Context

Javascript- Currying VS Partial Application 2019

Javascript Performance Test 2019 [Part-1] - for vs for each vs (map, reduce, filter, find)

Structure Node.js App - Fractal Pattern - 2019