Wednesday, July 18, 2018

Running VueJS Hello World Application using parcelJs

In my previous article Learned how to install parcel and Hello world example.

This tutorial we will walk through  Hello World VueJs application using Parcel module bundler.parcelJS is web application module bunder with zero configuration and best in performance. A lot of VueJS applications uses either plain NPM commands or webpack as module bunder to run and test it
VueJS is an opensource framework for building UI application

Prerequisites

Nodejs framework is needed to install it. Nodejs comes with node and npm commands
First Create an empty project using mkdir vuejsdemo, Empty Directory is created.
Next step is to create package.json in an empty directory using npm command

npm init-i
package.json file will be created in a project.
package.json file contains initial project configuration details as below

{
  "name": "vueJsDemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
}

Install Vuejs Library

npm install --save vue
This installs vue dependency in local project node_modules folder and will add a dependency in package.json. Please see below screenshot for more information.

vuejs parceljs setup

Install pareljs npm dependency

npm install --save-dev parcel-bundler
This install parcel-bunder dependency in your project adds as dev dependency in package.json Using yarn package manager if you are using yarn command without npm, use below commands

yarn add vue
yarn add --save-dev parcel-bundler
Next step is create a required project files.files are index.html, App.vue and entry javascript files Index.html

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>ParelJS Vue Hello worldApplication</title>
 </head>
 <body>
      <div id="mainApp"></div>
    <!-- Parcel will rewrite this path on build. -->
    <script src="./src/main.js"></script>
 </body>
</html>

Next create App.vue file

<template>
  <div id="mainApp">
<h4>
{{ msg }}</h4>
</div>
</template>


Create a entry file Main.js which is the starting point of execution in Vuejs application
import Vue from 'vue';
import App from './App.vue';
new Vue({
  el: '#MainApp',
  render: h => h(App)
});

Next step is to add below entries in package.json
import Vue from 'vue';
  "scripts": {
  "dev": "parcel index.html",
  "build": "parcel build"
}

Running Vuejs Project using ParelJS 

We generated basic applications files. Now we are ready to run the app using npm run dev project with Live reloading supports. Server started in localhost:1234. open localhost:1234 URL in browser npm run dev command is a  for starting development server. npm run prod command is to build code for a production server.
Please see the below screenshot to access Hello world application

VueJs app with ParcelJS

EsLint tool support

parcel has support for this tool. Please install npm install eslint and configure in the project.
Example .eslintrc

Moodule.exports = {
  extends: [
    // add more generic rulesets here, such as:
   'eslint:recommended',
    'plugin:vue/essential'
  ],
  rules: {
    // override/add rules settings here, such as:
    // 'vue/no-unused-vars': 'error'
  }
}

ParcelJS assets transform

parcel has inbuilt support for different assets like javascript/CSS and HTML 
Use babel transpiler for javascript assets, PostCSS for CSS and postHtml for HTML changes.
To integrate this assets, Create a file .babelrc and .postcssrc and .eslintrc.js for eslint functionality
create .babelrc, .postcssrc, and posthtmlrc files as belows

.babelrc example
{
  "presets": [
    "env"
  ]
}
.postcssrc example

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true
    }
  }
}
.posthtmlrc example

{
  "plugins": {
    "posthtml-img-autosize": {
      "root": "./images"
    }
  }
}

Typescript support for vuejs using parcel. 

Please install typescript using npm install -g typescript command, next step is to create a typescript file and integrates