Bootzooka

Simple project to quickly start developing a web application using AngularJS and Akka HTTP, without the need to write login, user registration etc.


Frontend application

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

Thanks to great tools existing in JavaScript ecosystem it is fully automated and easy to configure/extend later on.

Installing Node.js

To work with the ui module you need to have node.js installed in version 5.0 or newer. Make sure you have both node and npm commands available on PATH.

Installing Webpack

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 node ./node_modules/.bin/webpack.

Why Webpack AND npm?

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 angular).

First run

If this is your first attempt to run ui, please go to ui project and run

npm install

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.

Development

Build system exposes several tasks that can be run, you can find them in package.json file. webpack.config.js contains all the build configuration.

The most important tasks exposed are:

npm start task

This task serves Bootzooka application on port 9090 on 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 dist task

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 build task

It runs all tests and builds everything to as distribution version to dist directory. It doesn’t fire up the proxy server.

npm run test task

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 ui project.

Distribution and deployment

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.