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

Anirudh Bhatnagar

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="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.practice</groupId>
    <artifactId>ecomm</artifactId>
    <version>1.0-SNAPSHOT</version>
    
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.3.3.RELEASE</version>
    </parent>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    </dependencies>
    <properties>
        <java.version>1.8</java.version>
    </properties>
</project>

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

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class Application {
    public static void main(String[] args) {
        SpringApplication.run(Application.class, 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;
@Controller
public class HomeController {
    @RequestMapping("/home")
    public String home(){
        return "index";
    }
}

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) 

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

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.

Reference: Build a new Web Application from scratch using Spring boot, Thymeleaf, AngularJS – Part 1 from our JCG partner Anirudh Bhatnagar at the anirudh bhatnagar blog.
Related Articles
↑
Exit mobile version