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="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(&quot;/home&quot;)
    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)

<!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.

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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