User Interface¶
Our boilerplate code located in the frontend
directory is there for your convenience and puts you straight on track for
building impressive single-page applications with Webpack, Vue.js and Vuetify.
Frameworks¶
Vuetify is a powerful open-source Material Design UI component framework for building modern single-page applications.
It is based on VueJS, a JavaScript library that combines the best ideas from AngularJS (Google) and React (Facebook); development is community driven and the API fairly stable.
Vuetify and VueJS are initialized in frontend/src/app.js. Webpack is used as a module loader / bundler. It creates single, optimized JS and CSS files in the server assets public build directory from the original source code. You can find the build configuration in frontend/webpack.config.js
.
Building¶
A build can be triggered by running npm run watch
(watches for changes and re-builds when needed) or npm run build
(single build) in the frontend directory.
NPM is the default package manager that comes with NodeJS, a JavaScript run-time environment that executes JavaScript code outside of a browser. We only use it as a task runner in this project. Dependencies should be installed and updated using Yarn. It is compatible with NPM, but faster and better suited for front-end development.
Dependencies¶
The full list of dependencies can be found in frontend/package.json
. You need to run yarn install
in the frontend directory to install them (automatically happens during installation, see build.xml
). Run yarn add [package name]
to add a new package (library or framework).