Ensure that you have the NodeJS and NPM installed and ready to go
Create a folder for your Vue application
mkdir myApp
cd myAppInitialize the application
npm init -yInstall Webpack and make it a development dependency. Webpack compiles and builds our application into a bundle, which can later be deployed on the production environment.
npm install webpack --save-devnpm install webpack-cli --save-dev
Create two sub folders app & build
mkdir app
mkdir buildWebpack needs instructions on what it needs to do. This is done by creating the configuration file specific to Webpack. Create a file webpack.config.js on the root folder. Add the following snippet to webpack.config.js. This tells webpack that index.js is our entry point for the app. It also specifies the name and location of bundle that Webpack will create.
Install VueJS locally and save it as run-time dependency
npm install vue --saveWithin the Vue package, there are many different implementations of Vue. We need to tell Webpack which implementation of VueJS to use. Modify the webpack.config.js as follows.
const path = require('path');const PATHS = { app: path.resolve(__dirname,'app'), build: path.resolve(__dirname,'build')};module.exports = { entry: { app: PATHS.app + "/index.js" }, output: { path: PATHS.build, filename: 'bundle.js' }, resolve: { alias: { 'vue': 'vue/dist/vue.common.js' } }};
Create a new file index.js under the app folder and put the following code in it
import Vue from 'vue';new Vue({ el: '#app', data: { message: "Hello There" }});
Create a new file index.html under the build folder. Populate the file with following code.
<!doctype html><html> <head> <title>My First Vue App </title> </head> <body> <div id="app"> <p>{{message}} </div> <script src="./bundle.js"></script> </body></html>
Now that we have the JavaScript file and html file, We can now use Webpack to compile and build our application. Before we use Webpack. We need to let NPM know that Webpack is our build tool. This is done in package.json file.
{ "name": "myapp", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --progress --display-error-details" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "vue": "^2.3.3" }, "devDependencies": { "webpack": "^2.6.0" }}
Now it’s time to compile & build the application
npm run buildYou should see a new file “bundle.js” in the build folder. Double click on the index.html.
You have build your first Vue application. However this is not a sustainable way of building web application. We need a way to detect changes to our JavaScript and Stylesheets and automatically compile and build our application. This is done using webpack-dev-server. Along with building our application, webpack-dev-server will host our application on it’s internal web server. This is very convenient during the development phase because we don’t have to waste time setting up up a web server.
Install webpack-dev-server as a development dependency
npm install webpack-dev-server --save-devWe need to let Npm know how to use webpack-dev-server
{ "name": "myapp", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --progress --display-error-details", "start": "webpack-dev-server --progress --colors --inline --content-base build" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "vue": "^2.3.3" }, "devDependencies": { "webpack": "^2.6.0", "webpack-dev-server": "^2.4.5" }}
To use webpack-dev-server, Run the start command
npm run startIf npm run start command fails here, Check if there is another web server in this machine and if something else is is running on port 8080. webpack-dev-server by default runs on port 8080. Fire up the browser and browse to
http://localhost:8080. If you are not seeing a “Hello World”, we need to change the settings so that the web page is served on a port other than 8080. Modify the webpack.config.js to run the application from a port other 8080
const path = require('path')const PATHS = { app: path.resolve(__dirname,'app'), build: path.resolve(__dirname,'build')};module.exports = { entry: { app: PATHS.app + "/index.js" }, output: { path: PATHS.build, filename: 'bundle.js' }, resolve: { alias: { 'vue': 'vue/dist/vue.common.js' } }, devServer: { host: '127.0.0.1', port: 4040, }};
We just modified the configuration of webpack to run our app under the port 4040. Rebuild your app again
npm run startOn your Internet browser, navigate to http://localhost:8080 or http://localhost:4040 ,which ever you configured the app to run under. You should see “hello there” on the web page. Now go and change “Hello there” in index.js to something else. Webpack-dev-server will detect the change automatically, rebuild the app behind the scenes and will refresh the web page for you as well. You should be seeing the change you made reflected on the web page now.
Besides detecting changes in the JavaScript files , Webpack can also detect changes in css files and rebuild and update our application on the fly. To make this work we need to do some work upfront. We need install couple of loaders that deal with style sheets. These loaders are development dependency. If webpack is running, exit out by clicking CTRL-C.
npm install css-loader style-loader --save-devModify the webpack.config.js to let webpack know, when and how to process the css & style loaders that we installed in the previous step.
const path = require('path')const PATHS = { app: path.resolve(__dirname,'app'), build: path.resolve(__dirname,'build')};module.exports = { entry: { app: PATHS.app + "/index.js" }, output: { path: PATHS.build, filename: 'bundle.js' }, resolve: { alias: { 'vue': 'vue/dist/vue.common.js' } }, devServer: { host: '127.0.0.1', port: 4040, }, module: { rules: [ { test: /\.css$/, use: ['style-loader','css-loader'] } ] }};
Under the app folder, create a css folder and add a new file “main.css”. put the following stylesheet definitions in main.css
body {background: lightblue;}
Modify the index.js to include the following line to the top of the file.
require('./css/main.css');Tell webpack to build the application and start the application
npm run startNavigate to the webpage http://localhost:8080 (or http://localhost:4040) . You should see a light blue background on your web page.
Now let’s change the stylesheet to see how webpack and detect changes on a css file and rebuild and reload our app on the fly. Change the contents of main.css with following.
body { background: lightgreen;}
By the time you change the stylesheet, webpack has already detected the change, complied and rendered the changes. On the webpage you should be able to see the background color to light green.
Now let’s make this app work with Bootstrap. Install bootstrap using NPM. We will not be using “ — save-dev” flag when installing bootstrap. Bootstrap is not a development dependecy, it’s a runtime dependency.
npm install bootstrap --saveTo make bootstrap work with Webpack, we need couple of additional loaders. They are file-loader and url-loader. Besides CSS files, bootstrap also includes fonts, urls and images. Webpack needs to know, how to process the different resource types that come with bootstrap. These two loaders are develoment dependecy.
npm install file-loader url-loader --save-devModify the webpack.config.js to tell how to process different resource types that come with bootstrap. The “module” section in the webpack.config.js has to be modified as follows.
module: { rules: [ { test: /\.css$/, use: ['style-loader','css-loader'] }, { test: /\.png$/, use: "url-loader?limit=100000" }, { test: /\.jpg$/, use: "file-loader" }, { test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader?limit=10000&mimetype=application/font-woff' }, { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader?limit=10000&mimetype=application/octet-stream' }, { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, use: 'file-loader' }, { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader?limit=10000&mimetype=image/svg+xml' }]}
Include the bootstrap in index.js, make sure the require statement for bootstrap is before require statement for “main.css”. This is to ensure that our custom styles don’t get overwritten by bootstrap. Also include a bootstrap component in this file to test out the setup
require('bootstrap/dist/css/bootstrap.min.css');require('./css/main.css');import Vue from 'vue';Vue.component('my-button', { template: '<input type="button" class="btn btn-primary" value="Hello bootstrap">'})new Vue({ el: '#app', data: { message: "Hello There"}});
Modify the index.html to include the component “my-button”. Since the change is to the html file and webpack does not detect changes on html file, you will have to refresh the webpage yourself to see the changes.
Build the application
npm run startNavigate to the web page http://localhost:8080, you should see a button with bootstrap styling.
This ends the setup for getting started with Vue, Webpack & Bootstrap.
