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

In this series of blog posts we will be building a complete responsive web application using the following tech stack :

1) Spring boot
– Spring MVC web
– Spring Data JPA
– Spring Security
2) Thymeleaf for server side templating
3) Angular JS for client side MVC ( including JS dependency management with bower)
4) Deploy the app on AWS/EBS/Heroku/Openshift

We will use good old maven to get started.

STEP 1: Simple Hello world UI with Thymeleaf

1.) To begin with lets create a workspace in our local filesystem to start the project.

Anirudhs-MacBook-Pro:~ anirudh$ mkdir practice && cd practice

2.) Open your favorite IDE (eclipse/IDEA) and start a new project using maven, (you can also use a quickstart maven archetype). Provide the group id and artificat id of your choice.
I used the following :

   group id : com.practice
   artifact id : ecomm

3.) Once the project is created, open Pom.xml and paste the following below

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns=""





4.) Now Add Application.class for SpringBoot in your package ( at com.practice)

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

public class Application {

    public static void main(String[] args) {, args);


5) Add a Controller
Make a new package inside com.practice with name controller and add HomeController.Java

package com.practice.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

public class HomeController {

    public String home(){
        return &quot;index&quot;;


Note the annotation is not “@RestController” it is just “@Controller” which is Spring MVC controller which returns a view.

6) Finally we will make a view HTML file. Thymeleaf is the templating library here which is used to generate this.
Place this index.html in the location : src/main/resources/templates ( Spring boot convention)

<html xmlns:th="">
    <title>First Page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Hi, this is my first landing page using server side templating by Thymeleaf

7.) Run the application
Go to the console and go to the home directory, where you have pom.xml file and run mvn clean package

Anirudhs-MacBook-Pro:practice anirudh$ mvn clean package

After the project is build , run using spring-boot:run

Anirudhs-MacBook-Pro:practice anirudh$ mvn spring-boot:run

Now go to http://localhost:8080/home and find your landing page.

In the next blog we will add more functionality, expose REST Services and add introduce Angular JS in our app.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s