Sometimes you just want to build a proof of concept or a demo of some kind without all the complications of many Javascript libraries, assembling build tools using Grunt or Gulp as well as database access, and the list goes on.  However, there are times you want to have you demo make use of common HTML fragments, an MVC approach that allows your demo to actually function but also have something that may not get thrown out the door when you build a real product.  You want to salvage everything you spend time on.  Even if you decide to make your demo in AngularJS or whatever other framework you pick, using a Natural Templating engine such as Thymeleaf, a flexible container such as Spring Boot along with an incredible CSS framework like Semantic UI will get you an almost functional demo and you can build the prototype very quickly.

So here is goes…

  1. Create a project in your IDE.  It should be a maven style project and use Spring Initialzr to get you started.  Make sure to select the dependencies for Web and Thymeleaf and DevTools.
  2. Open a Terminal Window, I like to use IntelliJ’s Terminal window feature since it puts me right into the correct folder when I launch it.
  3. Assuming you have Node, NPM etc installed, then you can simply run the Semantic UI install commands on their web site at the bottom.
    1. Change to the src/main/resources/static folder
    2. npm install semantic-ui –save
    3. cd semantic/
    4. gulp build
  4. Optionally rename the existing Spring Boot application.properties to application.yml (but this is completely optional)
  5. Paste in this code into the application.yml file to disable caching for Thymeleaf so that we can make changes on the fly.
    spring:
      thymeleaf:
        cache: false
  6. Please note with IntelliJ you may need to either perform a build on any changes you make or follow my other post to show you how to automatically reload classes when you save a file.
  7. Copy the attached HTML into a file called index.html that will reside in the src/main/resources/template folder.  This is a starter template page.  This will include your Semantic UI files for both viewing as a standalone page with no server as well as the Thymeleaf version that will be served by Spring Boot.
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
          xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
    <head>
        <title>Demo</title>
    
        <link rel="stylesheet" type="text/css" href="../static/semantic/dist/semantic.min.css" th:href="@{/semantic/dist/semantic.min.css}" />
    
    
    </head>
    <body>
    
    <div class="ui container">
    
        <h1>Hello Demo!!</h1>
    
    </div>
    <script src="../static/vendor/jquery.min.js" th:href="@{/vendor/jquery.min.js}"></script>
    <script src="../static/semantic/dist/semantic.min.js" th:href="@{/semantic/dist/semantic.min.js}"></script> 
    </body> </html>
  8. Download jQuery 2.x and make sure it’s added to the vendor/jquery.min.js folder.
  9. At this point, if you did start your Spring Boot Server, you will see an error show up when you hit http://localhost:8080 because there is no mapping or way for Spring Boot to resolve where the index.html file is.  So we need a Controller.  To do this, you can create a new class or you can embed the Class right into the Spring Boot Application.java file.  This code simply gets mapped to the root level URL (http://localhost:8080/) where Spring and Thymeleaf can figure out where the appropriate HTML page is located (ie the name index as the .html is implied but can be configured if you wish).
    @Controller
    public static class MasterController {
       @RequestMapping("/")
           public String index() {
               return "index";
           }
    }
  10. Let’s see where we’re at, run the Spring Boot Main application Java file and hit the default URL (http://localhost:8080) and you should see the Hello Demo show up in the page with the default Semantic UI font.
  11. Now let’s get fancy. Semantic UI comes with a gulp.js build script that we can use to assemble our CSS (using LESS).  This makes your workflow much nicer.  We are also going to use the default theme supplied with Semantic UI.  Since I am using IntelliJ (only the best IDE on the market), you can right click on the /src/main/resources/static/semantic/gulpfile.js and select Show Gulp Tasks.  Then you can double click on the default task called “watch”.  This will allow Gulp to launch the watch so that any changes to the LESS files are automatically compiled and rebuilt, minified, uglified, damned-if-I’m-Impressed-ified.
  12. I won’t get into the details on how Semantic UI works in this post, so for  now, we’ll perform a hack like solution by only updating the semantic/src/site/globals/site.overrides file.  Any CSS changes we need to make to our demo can be put in here.  Magically, Semantic UI will perform the watch, build etc once we make a change.  Give it a shot, add a CSS rule for h1 and change the color to red.  Save the file, wait for the Gulp build to finish and refresh your page.  You should see a red heading.
  13. So this is great and all, but man it’s kind of slow to watch that sucker compile both uncompressed and compressed CSS files.  During development, we prefer to only use the non minified versions so we can debug a bit easier too.  So copy the semantic/tasks/watch.js file as watch-dev.js file.  Remove the code from the watch-dev.js file shown below.
    //compressedStream = stream
    //  .pipe(plumber())
    //  .pipe(replace(assets.source, assets.compressed))
    //  .pipe(minifyCSS(settings.minify))
    //  .pipe(rename(settings.rename.minCSS))
    //  .pipe(gulp.dest(output.compressed))
    //  .pipe(print(log.created))
    //  .on('end', function() {
    //    gulp.start('package compressed css');
    //  })
    //;
    1. Open the gulpfile.js and add the new location of the watch-dev script at the top of the file.
      watchDev     = require('./tasks/watch-dev'),
    2. Change the default target to watchDev instead of watch:
      gulp.task('default', false, [
        'watchDev'
      ]);
    3. Update the task reference:
      gulp.task('watchDev', 'Watch for site/theme changes', watchDev);
    4. Now refresh your gulpfile in IntelliJ so you can see the new task shown as watchDev and run that.  Things should be much quicker when you update the LESS files.
    5. Make sure to update the link tag that loads the semantic CSS file.  Again I can only hope there is a more automated way to handle this:
      <link rel="stylesheet" type="text/css" href="../static/semantic/dist/semantic.css" th:href="@{/semantic/dist/semantic.css}" />