Author Archives: yogesh.mali@gmail.com

Spring Boot and Microservices

Over the last few months, I have worked on Spring Boot and tried to collect my knowledge around Microservices. I was discussing lot of this with my friends and one friend did suggest me to write a book. Initially I was little hesitant to write a book about something I was learning. But also the whole point of learning is to teach someone at some point of time.

Spring Boot and Microservices

So I took this as a challenge to write a book about Spring Boot and Microservices. Initially I created series of posts and posted on this blog to see how much it could benefit people. And now to make it easy for every one, I have collected all this information and wrote an ebook. This ebook Spring Boot and Microservices is free to download. I hope this will help people to understand the concepts of Microservices and my example can help them to head start the building their projects.

Spring Boot and Microservices

What’s next?

Where do we go from here? There are a lot of questions about the next strategy for Spring Boot and Microservices. What I have covered in this book, is a tiny portion of big picture. There is lot of options like scaling the service, adding a health check for the service, and deploying the service on the cloud with automation. But for right now, I just want to take a break from thinking about this and I will come up with a next plan soon.

Till that time, you can download, read, and send me your feedback about the book. It would be great if you could leave a review for the book here.

If you have any questions, please leave your comments on this blog and I will try my best to answer them.

How to deploy Spring Boot Application on docker – Part IX

In this post, I show how to deploy a spring application in a docker container.

What is docker

Docker is a container platform delivered by a company named “Docker Inc.” It can be used by developers, operators, and enterprise users to deliver and use packaged software. Docker has something called a container. A container can be a virtual machine (VM) in lay man’s terms, but still a little different from VM. Container contains packaged software delivered in a way that it can be run isolated on a shared operating system. As per official definition – Unlike VMs, the container does not bundle a full operating system – only libraries and settings required to make the software work are needed.

In this demo, we will use our spring boot application built throughout from Part I to Part VIII.

I am using Windows Platform Toolbox for docker to build my docker containers. 

We will build a container with MySQL database deployed and another container where we will deploy spring boot application. This spring boot application container will connect to MySQL database container at runtime. The process is a little complicated, but once you get your hands on the docker container, it becomes very straight forward to understand. Also for this post, I will not explain anything about spring boot application. You should review all the previous posts I have written explaining how to build and deploy spring boot application on an embedded tomcat.

Once we know about docker, it is easy to deploy an application in docker.

Building a docker container with MySQL

Few things to remember

  1. Make sure your spring boot application is working with MySQL database before you build a container.
  2. If your application contains user administration and password, make sure you have a super administrator whose password you can insert in the database with password_hash. This is specifically true for the application we will be deploying in the docker container.

For most standard applications (like MySQL, java 8, spring-boot), there are a number of images available in the docker hub. When we will run our docker container for the database, the docker shell will pull the version of that application from the hub to build a container. We will not be creating any new or blank docker image. To run a docker container with mysql version 5.6, we will use below command.



docker run --name benefitsmysql -e MYSQL_ALLOW_EMPTY_PASSWORD=yes -e MYSQL_DATABASE=benefitsmysql -p 3308:3306 -d mysql:5.6

 

  • The name of our docker container is benefitsmysql.
  • We are not using any password. This is not recommended for production code, I am just doing this for demo purposes.
  • The database name is benefitsmysql.
  • Also this database is running at port 3308 to 3306 of localhost machine.
  • -d to tell Docker to daemonize the container and keep it running.
  • mysql:5.6 to download MySQL 5.6 Server image from Docker public repo

Once this is started, there are couple of ways you can verify if we are able to connect to this database or not.

Get the ip address of this container host with command docker-machine ip . Now in mysql administrator workbench, access the mysql server with ip address and port 3308 and see if you can access the database.

Another way on docker shell terminal – use this command docker exec -it benefitsmysql -l , this will connect you as a root to the shell where mysql is installed. And then you can use mysql as regular command to access mysql.

To run our Spring boot application successfully, once you access mysql, create the following tables:



use benefitsmysql;

create table companyprofile (id int not null auto_increment, establisheddate date, status varchar(50),corporationtype varchar(50), primary key(id));

create table company(id int not null auto_increment, name varchar(255), statusid int, type varchar(255), ein varchar(50), companyprofileid int, primary key(id), foreign key(companyprofileid) references company(id));

create table userprofile(id int not null auto_increment, dob date, doh date, maritalstatus varchar(50),sex varchar(50),ssn varchar(50),weight varchar(50), height varchar(50),employmentstatus varchar(50), terminationdate date, primary key(id));

create table user(id int not null auto_increment, createdate date, email varchar(255),firstname varchar(255), middlename varchar(255), lastname varchar(255),username varchar(100),jobtitle varchar(255),password_hash text,enabled tinyint(4), userprofileid int, primary key(id), foreign key(userprofileid) references userprofile(id));

create table role(id int not null auto_increment, role varchar(255), primary key(id));

create table user_role(user_id int not null, role_id int not null, primary key(user_id, role_id));

 

Building a docker image for Spring Boot Application along with mysql

To dockerize my spring boot application, we will use a maven plugin to build a docker image.


<plugin>
		<groupId>com.spotify</groupId>
            	<artifactId>docker-maven-plugin</artifactId>
            	<version>1.0.0</version>
            	<configuration>
                	<imageName>${docker.image.prefix}/benefits</imageName>
                	<dockerHost>https://192.168.99.100:2376</dockerHost>
                	<dockerCertPath>C:\Users\Yogesh Mali\.docker\machine\machines\default</dockerCertPath>
                	<dockerDirectory>src/main/docker</dockerDirectory>
                	<resources>
                    	<resource>
                        	<targetPath>/</targetPath>
                        	<directory>${project.build.directory}</directory>
                        	<include>${project.build.finalName}.jar</include>
                    	</resource>
                	</resources>
            	</configuration>
	</plugin>

I am passing dockerDirectory where Dockerfile will be stored to build our image. Also another change I have made to my original pom file, is that i have added packaging as jar.


<groupId>com.betterjavacode</groupId>
	<artifactId>Benefits</artifactId>
	<packaging>jar</packaging>
	<version>0.0.1-SNAPSHOT</version>
  .................
  <plugin>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-maven-plugin</artifactId>
      <configuration>
          <mainClass>com.betterjavacode.benefits.Application</mainClass>
      </configuration>
      <executions>
          <execution>
              <goals>
                 <goal>repackage</goal>
              </goals>
          </execution>
      </executions>
  </plugin>

I have also changed in my application.properties to point to mysql database container by updating database url with ipaddress of docker container.

spring.datasource.url=jdbc:mysql://192.168.99.100:3308/benefitsmysql

My Dockerfile to build a docker image is as below:


FROM java:8
VOLUME /tmp
ADD Benefits.jar Benefits.jar
EXPOSE 8443
RUN bash -c 'touch /Benefits.jar'
ENTRYPOINT ["java","-Djava.security.egd=file:/dev/./urandom","-jar","/Benefits.jar"]

Basically this will build a Benefits.jar using java 8 and will expose port 8443 that I can use to access my application.

Now build a new docker container image by using maven goal as

mvn clean package docker:build

To run the application

docker run -p 8443:8443 --name benefits --link benefitsmysql:mysql -d containerid

This will execute the jar built within that container. Important to note here is --link as it links other container where we have mysql server deployed. So we are linking two containers and we will call the database from our spring boot application container. The same command can be used little differently to see the detail execution log as below

docker run -p 8443:8443 --name benefits --link benefitsmysql:mysql -it containerid

 

Executing the application

Once the application starts successfully, we will access our application with url https://192.168.99.100:8443/home , this will look like below:

How to deploy on docker container

Another note – Make sure to update IP addess in all angular js references.

In this post, we showed how we can deploy Spring boot application connected to MySQL on a docker container. Code for this post will be available on GitHub repository here

References

To write my post, I used the following references

  1. Docker
  2. Connection refused error
  3. Spring Boot docker

 

How to use Spring Security in web application – Part VIII

In this post, we will show how to use Spring Boot Security to login, authorization based on user role, log out, and error handling.

We will be discussing the following use case

  1. A user accesses a home page for an application.
  2. A user enters credentials
  3. If correct credentials, we create a session and verifies the user role. User with USER role sees the user profile page. User with ADMIN role sees the list of users page.
  4. Incorrect credentials, the user will see the login screen once again to enter credentials.
  5. A user clicks on logout, the session is deleted and the user is redirected to the login page.
  6. If a user (of any role) tries to login after logout, the user should be redirected to the appropriate page
  7. In a scenario where a user is neither USER nor ADMIN, he is redirected to the error page
  8. Handling of CSRF token

To completely understand this post, make sure you have gone through my other posts on the Spring Boot series.

  1. Spring Boot REST CRUD API
  2. Swagger Documentation
  3. User Interface using AngularJS

 

Database changes

Since this post involves authorization for users, we have to do some database changes. We will add a couple of tables and respective model classes in our REST API modification.

  • Table role
  • Table user_role

create table role (id int(11) auto_increment primary key not null, role varchar(255) )

create table user_role (user_id int(11) primary key not null, role_id int(11) primary key not null))

user_role the table helps to maintain a many-to-many relationship between the user and role table. We will have only two roles for demo purposes, USER and ADMIN.

Another change we have done in table user is that we have added a field called password_hash to store password set by user/administrator for a user to login. We will be storing a hash password value of the original password that the user will set.

Dependencies

Since we will be using Spring-security for authentication and authorization purposes, we will add the dependency for spring security as follows:

<dependency>   

<groupId>org.springframework.boot</groupId>   

<artifactId>spring-boot-starter-security</artifactId>

</dependency>

Controllers and Web Layer

Other than those changes mentioned, we will demonstrate this post in top-down fashion rather than bottom-up fashion.

So for the web layer, we will define a new controller LoginController and modify our existing MainController.

package com.betterjavacode.benefits.controller;

import org.apache.logging.log4j.LogManager;
import org.apache.logging.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.core.Authentication;
import org.springframework.security.core.context.SecurityContextHolder;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import com.betterjavacode.benefits.entities.User;
import com.betterjavacode.benefits.interfaces.UserManager;

/**
*
* @author Yogesh Mali
*
*/
@Controller
public class LoginController {

public static final Logger LOGGER = LogManager.getLogger(LoginController.class);

@Autowired
UserManager userManager;

/**
*
* @param model
* @return
*/
@RequestMapping(value = "/user", method = RequestMethod.GET)
public String userpage(Model model) 
{
  LOGGER.info(" Enter >> userpage() ");
  Authentication auth = SecurityContextHolder.getContext().getAuthentication();
  String name = auth.getName();
  User user = userManager.findUserByEmail(name);
  model.addAttribute("name", user.getFirstname());
  model.addAttribute("userid", user.getId());
  LOGGER.info(" Exit << userpage() ");
  return "user";
}

/**
*
* @return
*/
@RequestMapping(value = { "/login" })
public String login() {
  return "login";
}

/**
*
* @return
*/
@RequestMapping(value = "/403", method = RequestMethod.GET)
public String Error403() {
  return "403";
}
}

As shown in this controller, we have defined a user page, a login page, and an error page (403). A user with the role of either USER or ADMIN or both can access a user page which shows that logged in user’s profile.

Every user irrespective of roles will see the login page for authentication. If there are any errors during authentication or authorization, the user will see an error page displaying access denied page (403).

Source code for login page is as below:

<!DOCTYPE html><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head> <title>Benefits Application</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" th:href="@{/css/login.css}" />  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head>
<body>
<div class="container"> <form th:action="@{/login}" method="POST" class="form-signin">
<h3 class="form-signin-heading" th:text="Welcome"></h3>
<input type="text" id="email" name="username"  th:placeholder="Email" class="form-control" style="width:350px"/>
<input type="password"  th:placeholder="Password" id="password" name="password" class="form-control" style="width:350px"/>
<div align="center" th:if="${param.error}">
<p style="font-size: 20; color: #FF1C19;">Email or Password invalid, please verify</p>

</div>
<button class="btn btn-lg btn-primary btn-block" name="Submit" value="Login" type="Submit" th:text="Login" style="width:350px"></button> </form></div>
</body></html>

This login page shows a simple form to input username (email) and password and process that authentication using spring-security database authentication method.

@RequestMapping(value = "/home", method = RequestMethod.GET)
public String homepage(Model model) 
{
  LOGGER.info(" Enter >> homepage() ");
  Authentication auth = SecurityContextHolder.getContext().getAuthentication();
  String name = auth.getName();
  User user = userManager.findUserByEmail(name);
  model.addAttribute("name", user.getFirstname());
  LOGGER.info(" Exit << homepage() ");
  return "index";
}

Changes in MainController are about an authenticated user and passing that user’s first name to model to display in HTML page. UserManager in the service layer has been enhanced to return a user based on username (which is email). We have also added an email to be unique as a constraint in the database.

User page for a user with role USER is nothing but a user profile information that he can edit and update any time.

<html ng-app="benefitApp"><html ng-app="benefitApp"><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Benefit Application</title><script>document.write('<base href="' + document.location + '" />');</script> <link rel="stylesheet" href="/css/bootstrap.css" /><script src="https://code.angularjs.org/1.6.1/angular.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-resource.js"></script><script type="text/javascript" src="./js/app.js"></script></head><body ng-controller="UserCtrl">Hello
<p th:text="${name}"></p>

<div>
<ul class="menu">
<li><a th:href="@{'userProfile/' + ${userid}}">Profile</a></li>
</ul>
<div ng-view="ng-view"></div>
</div>
<div class="input-group">
<div class="controls">    <a ng-click="logout()" class="btn btn-small">Logout</a></div>
</div>
</body></html>

Authentication

Now we have the application ready with all the required backend details for adding the authentication part. Remember we are using spring-security for authentication and authorization of an application.

package com.betterjavacode.benefits;

import javax.sql.DataSource;

import org.apache.logging.log4j.LogManager;
import org.apache.logging.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.autoconfigure.security.SecurityProperties;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.annotation.Order;
import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.builders.WebSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;

@Configuration
@ComponentScan("com.betterjavacode.benefits.services")
@EnableWebSecurity
@Order(SecurityProperties.ACCESS_OVERRIDE_ORDER)
public class SecurityConfig extends WebSecurityConfigurerAdapter {

public static final Logger LOGGER = LogManager.getLogger(SecurityConfig.class);

@Autowired
private SimpleAuthenticationSuccessHandler loginSuccess;

@Autowired
private LogoutSuccess logoutSuccess;

@Autowired
private BCryptPasswordEncoder bCryptPasswordEncoder;

@Autowired
private DataSource dataSource;

@Value("${spring.queries.users-query}")
private String usersQuery;

@Value("${spring.queries.roles-query}")
private String rolesQuery;

@Autowired
protected void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {
LOGGER.info(" Enter >> configureGlobal() ");
auth.jdbcAuthentication()
.usersByUsernameQuery("select email,password_hash,enabled from user where email=?")
.authoritiesByUsernameQuery("select u.email,r.role from user u inner join user_role ur on(u.id=ur.user_id) inner join role r on(r.id=ur.role_id) where u.email=?")
.dataSource(dataSource)
.passwordEncoder(bCryptPasswordEncoder);
LOGGER.info(" Exit << configureGlobal() ");
}

/**
* Handle Login - Authentication and Redirection
*/
@Override
protected void configure(HttpSecurity http) throws Exception {
http.csrf()
.disable()
.authorizeRequests()
.antMatchers("/home")
.hasAuthority("ADMIN")
.antMatchers("/user")
.hasAnyAuthority("USER", "ADMIN")
.and()
.formLogin()
.loginPage("/login")
.successHandler(loginSuccess)
.permitAll()
.and()
.logout()
.logoutSuccessHandler(logoutSuccess)
.deleteCookies("JSESSIONID")
.invalidateHttpSession(false)
.permitAll()
.and()
.exceptionHandling()
.accessDeniedPage("/403");

}

/**
* Exclude resources from user-access
*/
@Override
public void configure(WebSecurity web) throws Exception {
web.ignoring()
.antMatchers("/resources/**", "/static/**", "/css/**", "/js/**", "/images/**");
}
}

What’s happening in this code?

  • When a user with role ADMIN or USER calls either /home or /user pages respectively, the user will need to log in.
  • Once the user inputs credentials, validation of credentials happens against the JDBC database authentication mechanism provided by spring-security.
  • If a user of the role USER tries to access the ADMIN home page, the user sees an error 403 page. Authentication Success Handler handles the redirection strategy.
  • If the user clicks the LOGOUT button on the page he is on, the session gets deleted and the user logs out of the application. The user will see the login page. All the cookies will be deleted. Logout Success Handler handles the redirection.

 

Changes in AngularJS User Interface Controller

As shown in user.html page, once the user with role USER is logged in, he sees URL for his profile information. If a user clicks this URL, the user sees his or her profile information. This page has a controller called UserCtrl which basically handles the logout on this initial page. User Profile is shown on userprofile.html page which has singleusercontroller. This angular js controller handles updating user profile information or logout. The github repository contains the rest of the code.

Handling CSRF Token

There are two ways we can handle Cross-Site Request Forgery token in the Spring application. The first way is by disabling this token generation. This is not a recommended approach as this put your application to possible CSRF security attacks for hackers. If you are just doing this for demo purposes, you can disable this in SecurityConfig.java by calling http.csrf().disable().

As Spring points out, a request coming through browsers should contain CSRF Protection.

We will be using spring security to handle CSRF token on the server-side rather than on the client-side.  So every request that comes to the server, we will add a CSRF token and then verified. Angular JS verifies the cookie for the CSRF token before a user can post any request.

Add a CSRF Filter Class

We will add a filter that will handle setting of CSRF token in a cookie. Angular JS expects a cookie name to be as XSRF-TOKEN. This class will look like below:

public class CSRFHeaderFilter extends OncePerRequestFilter {

@Override
protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException 
{
  CsrfToken csrf = (CsrfToken) request.getAttribute(CsrfToken.class.getName());
  if (csrf != null) 
  {
    Cookie cookie = WebUtils.getCookie(request, "XSRF-TOKEN");
    String token = csrf.getToken();
    if (cookie == null || token != null && !token.equals(cookie.getValue())) 
    {
      cookie = new Cookie("XSRF-TOKEN", token);
      cookie.setPath("/");
      response.addCookie(cookie);
    }
  }
  filterChain.doFilter(request, response);
}

}

Now we will enable csrf token in SecurityConfig as shown below

.and()
.csrf()
.csrfTokenRepository(csrfTokenRepository())
.and()
.addFilterAfter(new CSRFHeaderFilter(), CsrfFilter.class);

What is csrfTokenRepository?

We tell spring-security to expect CSRF token in the format that Angular wants to send it back , a header called X-XSRF-TOKEN instead of default X-CSRF-TOKEN. With these changes, we don’t have to do anything on client side.

private CsrfTokenRepository csrfTokenRepository() 
{
  HttpSessionCsrfTokenRepository repository = new HttpSessionCsrfTokenRepository();
  repository.setHeaderName("X-XSRF-TOKEN");
  return repository;
}

Demo

In this post, we showed how to use spring security for authentication and authorization. Now we will show how to run the application. Once the application is built and run from eclipse, access the page https://localhost:8443/home , we will see below screen:

Using Spring Security in web application - login screenIt will be the same screen if you access https://localhost:8443/user. Now if we enter credentials of an admin user, we will see below screen:

Using Spring Security in web application - admin screen

User screen will be as below:

Using Spring Security - User Screen

If you click logout, it will log the user out and show login screen again. In this way, we showed how we can use spring security for authentication and authorization. Code for this is available at Github repository.

References

  1. Spring Boot Security
  2. Login Page Angular JS and Spring Security

 

Microservices – A Primer

In this post, I cover a primer about microservices.

What is Microservices? A Primer about Microservices

Wikipedia definition says

Microservices is a variant of the service-oriented architecture (SOA) architectural style that structures an application as a collection of loosely coupled services.

Firstly, there is no official definition of Microservices by industry standards. It’s a recent phenomenon in the software industry to architect the new software which should be lightweight, easier to deploy, and scale, easier to refactor individually, and could work independently.

However, to understand in detail, you can definitely read Martin Fowler’s Microservices or Chris Richardson’s Microservices.

Secondly, microservices are small services that can run independently but can also easily communicate with other services.

Microservice Architecture vs Monolithic Architecture

In a traditional monolithic architecture style, there is a single application with a single code base. An application contains a number of modules that are interrelated and can have external dependencies. It’s a multi-tier enterprise application and has been used to build software for long.

Above all, the microservice architecture style was born out of a need to build an application that could easily be supported for mobile applications. The older style was not easy to support for mobile and new generation way to the handling of data. Any large enterprise application can be easily built using the microservices architecture style. A famous example is NETFLIX.

How to identify the Microservice Architecture Pattern?

A simple ground rule of the microservice architecture pattern is to build a standalone service that can be run without depending on any other service. In other words, a large application can have more than one service talking to each other, communicating with their own databases, but still performing the business logic. Databases are used to ensure loose coupling of services.

For instance, a large enterprise e-commerce application can consist of the following services

  1. Backend service REST API to manage data
    1. Account Service
    2. Shipment Service
    3. Inventory Service
  2. Runtime service to handle runtime and backend data to process business logic
  3. Logging service
  4. Error Handling service
  5. Session service

Additionally, UI for the e-commerce application can be built independently to use backend services to show/edit data.

By standards, there are few rules to identify microservices patterns

  1. Decomposition by business capability
  2. Database per service pattern
  3. API gateway pattern
  4. Client-side discovery and Server-side discovery

Pros and Cons of Microservices

Pros

  1. Deployability – Easier to deploy and one can deploy them independently, without affecting other services.
  2. Reliability – A fault in the service can only bring down that service. Depending on the handling of the fault in the application, the rest of the application can still continue to work.
  3. Scalability – Similarly, the scaling of each microservice will depend on requirements using clusters and grids.
  4. Availability – Dispatching the patch or newer version of service requires less downtime compared to regular monolithic applications.
  5. Management – Easier to manage
  6. Design and Development – Each service helps the developer to manage the service easily without worrying about other services.

Cons

  1. Performance – All services involved in the application have to communicate with each other over the network and that could hamper the performance.
  2. Testability – Automated tests are harder to manage and run.
  3. Memory usage – Possible duplicate data across services and a lot of duplication in the cache.

References

In conclusion, I covered a primer about microservices. If you want to read more about Microservices at following links:

  1. Microservices by Chris Richardson
  2. Microservices by Martin Fowler
  3. Stackoverflow post about microservices

Lastly, if you enjoyed this post, subscribe to my blog.

 

How To: AngularJS User Interface to CRUD Spring Boot REST API

In this post, we will add an user interface using AngularJS to the REST api we created here.

Controller for home page

First we will create a controller in Spring Boot rest API to call our home page. All the requests that will come to web server, will go through this controller and the controller will return a home page for the request based on path.

MainController.java will look like below:

package com.betterjavacode.benefits.controller;

import org.apache.logging.log4j.LogManager;
import org.apache.logging.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class MainController 
{

     public static final Logger LOGGER = LogManager.getLogger(MainController.class);

     @RequestMapping(value = "/home", method = RequestMethod.GET)
     public String homepage() 
     {
         LOGGER.info(" Enter >> homepage() ");
         return "index";
     }
}

Any request coming to https://localhost:8443/home will return a page from index.html.

Create a Home Page

Now, we will create an index.html page. We will also be using angular JS framework as part of this home page so that we can build a single page application. If you are not aware of Angular JS or new to this framework, you can read about it AngularJS. One thing to remember while creating this page is a directory structure. Lot of issues that arise to create html pages are because of directory structure. Directory structure will look like below:

directorystructure

The home page index.html page is under main/resources/templates/ directory and it looks like below

<html ng-app="benefitApp">

<head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><title>Benefit Application</title>

<script>document.write('<base href="' + document.location + '" />');</script>

<link rel="stylesheet" href="/css/bootstrap.css" />

<script src="https://code.angularjs.org/1.6.1/angular.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-resource.js"></script>

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

</head>

<body ng-controller="MainCtrl">

Hello {{name}}!
<div>
<ul class="menu">
<li><a href="listUser">user-list</a></li>
<li><a href="listCompany">company-list</a></li>
</ul>
<div ng-view="ng-view"></div>
</div>
</body></html>

Home page shows that this is an angular app with name benefitApp. This also declares a controller MainCtrl with an angular view. Important to see we are importing angular.js, angular-route.js and angular-resource.js modules. Click on user-list or company-list, will show list of users and list of companies respectively.

Create a controller

Now to handle the controller (MainCtrl), we added in index.html, we will add app.js which will declare the controller. This javascript file also contains config data to handle all the routing of pages. That’s why we will be importing “ngRoute” and “ngResource” angular modules.

var app = angular.module('benefitApp', ['ngRoute','ngResource']);

var app = angular.module('benefitApp', ['ngRoute','ngResource']);
app.controller('MainCtrl', function($scope, $routeParams) {

$scope.name = 'World';

$scope.$routeParams = $routeParams;

})

 

Through out the interaction on web pages, we will be using different controllers for editing user or company information and creating user or company. The same file app.js will also handle routing of these pages which is shown below

app.config(function($routeProvider,$locationProvider) {

$locationProvider.html5Mode(true);

$routeProvider.when('/listUser',

{templateUrl: 'views/listUser.html', controller: 'userController'});

$routeProvider.when('/listCompany',

{templateUrl: 'views/listCompany.html', controller: 'companyController'});

$routeProvider .when('/editUser/:userId',

{ templateUrl : 'views/editUser.html' }) ;

$routeProvider .when('/editCompany/:companyId',

{ templateUrl : 'views/editCompany.html' }) ;

$routeProvider.when('/createUser',

{templateUrl:'views/createUser.html'});

$routeProvider.when('/createCompany',

{templateUrl:'views/createCompany.html'});

});

Rest of the code showing all controllers’ logic has been skipped for post purposes. It is available on github repository.

UserController or CompanyController are calling rest apis which we have built using Spring boot.

Demo

Now build the code and run our embedded tomcat webserver. Fire up the url https://localhost:8443/home – it will look like below:

Home Page created with AngularJS for CRUD REST API

Click on user-list and it will show list of users inside the same page as below:

List of User Page created with AngularJS

Click on edit button and we will see a form to update user information:

edituserpage

Download –

In this post, we showed how to create a simple CRUD user interface using angular JS for Spring Boot REST API. The code for this is available in repository