Enterprise Java

Build a new Web Application from scratch using Spring boot, Thymeleaf, AngularJS – Part 2

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.

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

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.

Anirudh Bhatnagar

Anirudh is a Java programmer with extensive experience in building Java/J2EE applications. He has always been fascinated by the new technologies and emerging trends in software development. He has been involved in propagating these changes and new technologies in his projects. He is an avid blogger and agile enthusiast who believes in writing clean and well tested code.
Notify of

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Inline Feedbacks
View all comments
Back to top button