Bootzooka’s frontend is a true Single Page Application built with Angular. It can be treated as a completely separate application or as a client for Bootzooka server.
As a separate application it deserves its own build process handling all the details (linting, testing, minifying etc). Hence the frontend part is almost completely decoupled from server side code. The only coupling is on the level of packaging final application (which is described later in this doc).
To work with the
ui module you need to have
node.js installed in version 5.0 or newer. Make sure you have both
npm commands available on
Bootzooka frontend project uses a
node.js-based build tool called Webpack to automate build stuff. Bootzooka has Webpack already in its dependencies so you don’t need to install it globally. When referring to executables in your
package.json you can also use those from
./node_modules/.bin/, e.g. simply
webpack, without referencing the whole path.
In case you would like call webpack from command line you can always use
Webpack is a next generation module bundler. Npm is a package manager; we use it to manage the build dependencies (via
devDependencies, node modules such as: webpack plugins, karma test framework etc.) and application dependencies (via
dependencies, for example
If this is your first attempt to run
ui, please go to
ui project and run
This will install all required dependencies for this project. If all is well you can start your development version of frontend by issuing
npm start from command line (or running the provided
frontend-start script in the main directory). It should start your browser and point you to Bootzooka home page.
Build system exposes several tasks that can be run, you can find them in
webpack.config.js contains all the build configuration.
The most important tasks exposed are:
npm run dist
npm run build
npm run test
This task serves Bootzooka application on port
0.0.0.0 (it is available to all hosts from the same network). Your default browser should open at this location. All requests to
/api/ context for data will be proxied to port
8080 when it expects backend server to be run.
Webpack will watch for any change in frontend files (templates, js files, styles) and every change is automatically compiled (if necessary) and browser is automatically refreshed to apply changes. No need to refresh it by hand.
In this task all scripts are served in non-concatenated and non-minified version from their original locations (if possible).
npm run disttask
This task is similar to the one above with one difference: it preprocesses all the files in order to create distribution (it currently includes concatenation of scripts files), runs tests and serves application from this freshly baked distribution version. This server’s version doesn’t watch for file changes.
npm run buildtask
It runs all tests and builds everything to as distribution version to
dist directory. It doesn’t fire up the proxy server.
npm run testtask
This task runs tests and watches for changes in files. When change is detected it runs tests automatically. This is especially helpful in hard-development mode. Tests are run with Karma runner using PhantomJS as default browser. Whole tests configuration is in
karma-config.js file in
Although in development
ui is separate project there is no need to deploy it separately. All files from
ui/dist/webapp (which are generated during
npm run build) are used by
backend to build the final fat-jar application. All necessary integration with SBT (backend build) is provided. That means when you issue
package in SBT, you get a complete web application which contains both server side and frontend components.