uk-gov-mirror / ministryofjustice.springboot-mustach-govukstyle Goto Github PK

Please take a note of these in the build.gradle file
    compile('org.springframework.boot:spring-boot-starter-mustache')
    compile('org.springframework.boot:spring-boot-starter-web')

Compile scss files during the boot run
    gulp_build.dependsOn 'installGulp'
    gulp_build.dependsOn 'npmInstall'

    bootRun.dependsOn gulp_build

    apply plugin: "com.moowork.gulp"

    classpath("com.moowork.gradle:gradle-gulp-plugin:0.10")

spring:
  mustache:
    enabled: true
    prefix: classpath:/templates/
    check-template-location: true
    suffix: .html

Several fragment files are created and stored under /resources/templates/fragments
index.html shows how these fragments are used.

Install nodejs (there by install npm automatically)
run npm init at the directory which needs to be the root of the UI project. This will produce the package.json

Install mandatory npm packages

npm i --save gulp
npm i --save gulp-sass
npm i --save gulp-sourcemaps
npm i --save gulp-clean
npm i --save require-dir
npm i --save run-sequence

npm i --save govuk_template_mustache
npm i --save govuk-elements-sass
npm i --save govuk_frontend_toolkit

Gulp is used as the tool to manage the gov-uk scss files. Please see the gulp.js and all the gulp files
under ./gulp folder

Gulp does the following
- Fetches the govuk_template_mustache, govuk-elements-sass and govuk_frontend_toolkit from node_modules and moves
the configured artifacts to src/resources/static/govuk_modules.

- Compiles all the scss files from govuk-elements-sass and govuk_frontend_toolkit and produces a global.css file
under src/resources/static/css/global.css

 This is an important file where we plugin the entire gov-uk style elements. Along with this when gulp build is run
 a global.css file gets produced at /resources/static/css/global.css which contains compiled css elements from
 govuk-elements-sass and govuk_frontend_toolkit.

 $path: "/govuk_modules/govuk_frontend_toolkit/images/" - relative location of various images used by
 govuk-template-saas and govuk_frontend_toolkit.

This file can be found under src/resources/static/govuk_template/assets/stylesheets. This is needed for the header
and footer construction in the html.

Please take a note of how two crucial css files are included in here

<link rel="stylesheet" media="screen" href="/css/global.css"/>
<link rel="stylesheet" media="screen" href="{{{ assetPath }}}stylesheets/govuk-template.css?0.24.0"/>

{{{assetPath}}} is defined in application.yml and injected through the model in the MustacheDemoController.java