What is Spring Boot?

Spring Boot makes it easy to create stand-alone, production-grade Spring based Applications that we can “just run”. It allows us to create Spring Based projects with no or minimal configuration.

It provides defaults for code and annotation configuration to quickly start new Spring projects within no time.

Advantages of Spring Boot

  1. Create stand alone Spring applications
  2. Embed Tomcat or other servers, no need to deploy war files anywhere
  3. No need to write XML configuration or boiler plate code
  4. Reduces lot of development time and hence increases productivity

Let us now create our first Spring Boot web project.

  1. Make sure you have JDK 7 or 8 installed
  2. Install the latest version of STS ( Spring Source ToolSuite )
  3. Start STS, go to File -> New -> Spring Starter Project
  4. Provide following values:
    Name:  FirstSpringBoot
    Group: Tutorial
    Artifact: Test
    Package: com.first.boot
  5. On the next page, choose Web -> Web under Dependencies.
  6. Click Finish and our project structure will be created.

Project Directory Structure

The directory structure of the project will look like this:

|- FirstSpringBoot
   |- src/main/java
   |- src/main/resources
      |- static
      |- templates
   |- src/test/java
   pom.xml

src/main/java
This directory contains all our Java classes.

src/main/resources
This directory contains our static files as well as our views

src/main/resources/static
This directory contains static files like JS, CSS, fonts, images etc.

src/main/resources/templates
This directory contains our views

pom.xml 
This file defines all project dependencies.

Creating our first page

Let us create a “Hello World” page. Here are the steps:

  1. Create a new file named index.html in src/main/resources/templates directory.
    Add following code to it:

    <!DOCTYPE HTML>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
      <title>Welcome</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
    <body>
      Welcome to your <b>Hello world!</b> page
    </body>
    </html>
  2. Next we will create a new controller. Right click on com.first.boot package under src/main/java and create a new class named IndexController.
    Add following code to the class:

    package com.first.boot;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    @Controller
    public class IndexController {
    
       @RequestMapping("/")
       public String index(){
          return "index";
       }
    }

    Spring Boot will search for index.html file under src/main/resources/templates folder. Spring Boot uses Thymeleaf template engine for views.
    To learn more about Thymeleaf, click here

  3. Add Thymeleaf dependency in pom.xml
    <dependency>
       <groupId>org.springframework.boot</groupId>
       <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
  4. Now, to run our application, right click on project name => Run As => Spring Boot App.
    Open your browser and execute the URL:

    http://localhost:8080/

    You should see your first web page.

Adding Static Resources

Next we will add CSS, JS, fonts and images to our page.

Create following folders under src/main/resources/static:

css, js, images, fonts

Adding CSS

Create a new file index.css under css folder. Add following code to it:

html{
   width: 950px;
   margin: auto;
}

body{
   color: #333;
   background-color: #abc; 
}

Thymeleaf by default searches the static files in resources/static directory. Hence, to use a css file, add following line to <head> section of your index.html file.

<link type="text/css" href="css/index.css" rel="stylesheet" />

Restart your application and visit the index page. You should see the css changes now.

Adding Images

Add some images to resources/static/images directory and add following <img> tag to the body section of your file:

<img src=”images/demo.jpg”/>

Adding Fonts

Download any OTF (Open Type Font) file and copy it in resources/static/fonts folder. Update following lines in your index.css file:

@font-face {
 font-family: AlftaSans;
 src: url(../fonts/AftaSansThin-Regular.otf);
}

html{
 width: 950px;
 margin: auto;
}

body{
 color: #333;
 background-color: #fefce6; 
 font-family: AlftaSans;
}

Adding JavaScript

Create a new file clock.js in resources/static/js folder. Add following code to it:

window.onload = startTime;
function startTime() {
   var today = new Date();
   var h = today.getHours();
   var m = today.getMinutes();
   var s = today.getSeconds();
 
   m = pad(m);
   s = pad(s);
   document.getElementById('time').innerHTML = h + ":" + m + ":" + s;
   var t = setTimeout(startTime, 500);
}
function pad(x) {
 if (x < 10) {x = "0" + x}; // add zero in front of numbers < 10
 return x;
}

Add the file in <head> section of your html file like this:

<script type="text/javascript" src="js/clock.js"></script>

Add following <span> in your body section:

<span id="time"></span>