This module holds all web resources that make the client application of spring.io:

• JavaScript modules
• CSS styles
• images and fonts
• front-end dependencies

This module is using several tools for its own build system:

• node.js and npm
• Cram
• Bower
• Gulp

You'll need a 0.10.x version of node.js installed on your system. Usage of the Node Version Manager (nvm) is perfectly fine.

When running the application with:

$ gradle :sagan-site:bootRun

Resources in sagan-client are served directly from the sagan-client module, so you can develop against the unoptimized version of the client.

If you want to know more about the JavaScript build, this chapter will help you; reading this is not required.

The JavaScript application can be built manually with (the build result is located in the dist folder):

$ npm run build

npm is the node package manager; it installs required dependencies in the node_modules directory. Check the package.json file to find:

• all dependencies and their versions in devDependencies
• all available scripts that you can run with npm run scriptname

Note: we make extensive use of npm scripts so you don't have to install binaries globally on your system's PATH. npm dynamically adds binaries listed in node_modules/.bin to its own PATH.

Cram assembles JavaScript resources into bundles. Cram does not take care of the optimizing phase. Cram is run by the gulp-cram plugin, as part of the gulp build.

Bower installs front-end dependencies like jquery or twitter bootstrap intosrc/lib. That way, developers don't have to copy/paste/commit those resources manually. All dependencies and their versions are listed in bower.json; we're also defining overrides in order to specify which resources we want to retain when packaging for production (we certainly don't want to add hundreds of files that have no use in our application). Those overrides are used by the gulp-bower-src during the gulp build.

Gulp is the build system we're using to make things work together. We've defined all tasks in our gulpfile.js file. In this build, we're using dependencies that were downloaded by npm and we're concatenating/optimizing/packaging resources that make our client application.