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.
| Reference: | Build a new Web Application from scratch using Spring boot, Thymeleaf, AngularJS ? Part 2 from our JCG partner Anirudh Bhatnagar at the anirudh bhatnagar blog. |
