In this series of blogs we are building a complete web app using Springboot,Angular, etc.
In the last blog, we made a basic landing page with Thymeleaf.

In this blog we will introduce bower, which is used to manage front end dependencies like CSS,JS. We will use a bootstrap template to make beautiful landing page and then deploy the app on Heroku.

1.) Bower
Install bower using this link.
After bower is installed, we need to configure it to use in our app.
To configure Bower, we simply have to add two files in the root folder of your project, a .bowerrc file and a bower.json file.
The .bowerrc file helps us configure in what directory the dependencies should be placed. By default it creates a bower_components folder into the current directory, but we would like to put it inside src/main/resources/static, because Spring will pick up all static resources on that location by default, and make them available for use.

.bowerrc file :

{
  "directory": "src/main/resources/static/bower_components",
  "json": "bower.json"
}

Then run:

$ bower init

This will install a file bower.json in your root folder.

Next step would be to add Jquery and Bootstrap dependencies into our application, this can be done by below command :

$ bower install --save jquery bootstrap

Now that we have got our app configured with Jquery and bootstrap, lets make a beautiful landing page for our app.
To find a template for landing page, we can check out any design here :
http://startbootstrap.com/ has some cool free html templates, Select any one and download the source files.

For example I downloaded this template : http://blackrockdigital.github.io/startbootstrap-freelancer/
To get it working as our home page, we need to do the following :
1) Copy the contents index.html file into our index.html.
2) replace all the bootstrap/JQuery CSS/JS paths with our bower_components path.
3) Copy any custom css or JS files downloaded and put it in static folder in our app, update their paths in the index.html
4) Copy any fonts, images etc static files into the static folder and update their paths in index.html
5) If the template is using legacy HTML we need to let spring boot know about it and add the dependency in pom.
– Add this line in application.properties file (in src/main/resources)

spring.thymeleaf.mode=LEGACYHTML5

– Add this in your pom :

     <dependency>
            <groupId>net.sourceforge.nekohtml</groupId>
            <artifactId>nekohtml</artifactId>
            <version>1.9.21</version>
        </dependency>

Now lets build our app using mvn clean package and run it using mvn spring-boot:run

If all the paths are correct and all the files are present. We will have beautiful responsive landing page as our home page.

In the next blog we will add the login/logout/register features and also add Angular for client side MVC.