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…
- Knowledge about Node, installing packages, NVM and using any IDEs.
- 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.
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
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
- Runtime + compiler: If you need to compile templates on the client then you need compiler, else just runtime would be sufficient
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
- Karma and Mocha (For this example I will be selecting Karma and mocha)
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
This will take some time setting up your project, once done, you will get the following message on your 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
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
Run your server in another terminal
Open http://localhost:3000/ in your browser and check if you are able to see the following screen.
In upcoming articles, We will be using above example to learn the following agenda
- How to create a Route using vue-router
- How to create a VueX store
- How to use node client apis in store
- There are links everywhere in the article which might help you understand the concepts from the real documentation.
Reference and Mentions
- City Of Chicago portal: https://data.cityofchicago.org/
- All the links mentioned in the article
Learn more about me here,