Introduction

My first hands on experience on learning the css library Bulma & JS Framework VueJS. This demo website is a way to test out the features of the two libraries.

Demo

Please click here for the demo website

Build Setup / Installation

# clone the repository
git clone https://github.com/faisaltheparttimecoder/bulma-vuejs-demo-website.git

# Navigate to the folder 
cd bulma-vuejs-demo-website

# install dependencies [ Navigate to the link https://nodejs.org/en/download/ if npm is not installed on your machine ]
npm install

# run the website locally
npm run dev

# Once started, on your browser navigate to the below URL
http://localhost:8080

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

Production run

• VueJS router has issue with the "history" mode, more details here
• To fix this, the server used is "express" server and used the "connect-history-api-fallback" to fallback, the configuration is on the file "server.js" which is part of the repo.
• After the production build npm run build, run the command node server.js to start the webserver and see if all the routes work perfectly.
• When pushing to Heroku or Cloud foundry, make sure to change the line after the build npm run build is completed in the package.json file

"build": "node build/build.js"

to

"build": "node server.js"

Plugins Used

Most of the code are raw vueJS & Bulma CSS (that was the intention for learning purpose). The only plugin used are

• ChartKick for charts
• vuetrend for trend lines
• JsonPlaceHolder for all the fake data.
• Templates reference