Vuejs-Bulma vuejs demo website: Vue Bulma Demo - A simple demo website to check out Bulma / Vue JS & express in conjunction.

Introduction VueJS Version Bulma Version License

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

Comments

  • Create LICENSE
    Create LICENSE

    Mar 6, 2018

                                                                                                                                                                                                           
    Reply