Skip to content

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.

Screenshot

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 dev (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).