Starter kit with VueJS, VueX, Router, Webpack, Vue-bootstrap and ExpressJS

Want to create a production web application using awesome libraries/framework like VueJS, VueX Webpack, Router, ESLint, Vue-bootstrap and ExpressJS???

continue reading then…

Prerequisite:

1. Knowledge about Node, installing packages, NVM and using any IDEs.
2. Basics of JavaScript (ES5 or ES6+)
3. Creating a node client using expressJS

A brief introduction of what each of these means:

VueJS: The progressive JS framework which is Approachable, Versatile and Performant.

VueX: VueX is a state management pattern for medium or large scale SPA inspired by Flux, Redux, and The Elm Architecture. Its implementation is tailored specifically for Vue.js for its reactive nature.

Router: Vue Router is the official router for Vue.js. It deeply integrates with Vue.js core to build Single Page Applications with Vue.js a breeze, with many important advantages.

Vue-bootstrap: Build responsive, mobile-first projects on the web using Vue.js and the world’s most popular front-end CSS library — Bootstrap V4.

Webpack: Webpack bundles your assets, scripts, images, and styles.

ExpressJS: Popular web framework for NodeJS.

Let’s begin creating a starter kit !!

Step 1: Install vue-cli globally

We will be using vue-cli to initiate the project with vue-templates.

npm i -g @vue-cli

Step 2: Open terminal/command prompt and create a project folder

mkdir vue_starter_kit_demo
cd vue_starter_kit_demo

Step 3: Initiate vue project with webpack (vue init webpack <project_name>)

vue init webpack vue_starter_kit_demo

This will ask you following details about your project that will be updated in the package.json file.

a. Project name: you can change the project name here else it will pick the name from vue init command

b. Project description: you can add any description of your project

c. Author: your name or company name

d. Vue build: this has two options in it, I have selected option 1 for this example

1. Runtime + compiler: If you need to compile templates on the client then you need compiler, else just runtime would be sufficient

2. Runtime-only

e. Install Vue-router: Y (yes)

f. Use ESLint to lint your code: Y (yes) (You can enter N if you don’t want any restriction for now)

g. Pick an ESLint preset (I prefer to go with Airbnb, but it’s up to you)

h. Setup unit tests: Y (yes) (You can enter N if you don’t want any unit test set up in your project)

i. Pick the test runner

1. Jest
2. Karma and Mocha (For this example I will be selecting Karma and mocha)
3. none

j. Setup e2e tests with Nightwatch: N(No) for this example, but night watch is an amazing automation e2e testing tool.

k. Should we run npm install: you can choose between npm, yarn or do it yourself manually

After you complete all the above steps, hit enter and relax

Terminal

This will take some time setting up your project, once done, you will get the following message on your terminal

Terminal

We are ready with amazing stuff, your project will have Vue, Router, Eslint, Webpack and lot of other awesome stuff, Open your project in your IDE and check the package.json file to learn more.

Run your application

npm run dev

This will serve the application in localhost:8080

Browser

Step 4: Let us add VueX for better state management and vue-bootstrap to build a responsive web application

npm i vuex
npm i bootstrap-vue

Step 5: Add an express client to your application, check this medium article on how to create an expressJS client

Note: also try axios instead of es6-promise and isomorphic-fetch

npm i express
npm i es6-promise
npm i isomorphic-fetch

Step 6: create a new file and name it server.js in your project folder and create a node server as shown in the medium article above

Run your server in another terminal

node server.js

Open http://localhost:3000/ in your browser and check if you are able to see the following screen.

Browser

Checkout the complete example in github

In upcoming articles, We will be using above example to learn the following agenda

1. How to create a Route using vue-router
2. How to create a VueX store
3. How to use node client apis in store

Add-ons

1. There are links everywhere in the article which might help you understand the concepts from the real documentation.

Reference and Mentions

1. City Of Chicago portal: https://data.cityofchicago.org/
2. All the links mentioned in the article

Learn more about me here,

www.prashanthpnaika.com

https://www.linkedin.com/in/prashanthnaika

https://github.com/pnaika