Front end setup

The front end code for this project is split into 2 places. The CSS and Images are handled in the asset pipeline and the Javascript is compiled using Webpack.

CSS

All design styles are written in SCSS and are located in app/assets/stylesheets/

Any component dependant CSS is located within the .vue file.

Google fonts are being used and are included within the head partial located in app/views/global/_head.html.erb.

Images

All images are located in app/assets/images

Javascript

All javascript is located under /app/javascript

Files stored under app/javascript/packs are compiled by Webpack and can be referenced in the layout file using the file name as follows <%= javascript_pack_tag 'application' %>

Javascript that is imported into an entry file should be organised outside the packs folder.

Notes

IE11 requires the es6-promise polyfill for Vuex to work. This is installed using Yarn and imported intoapp/javascript/store/store.js above Vuex.