Angular + Spring Boot integration using Gradle


Introduction

In this post I’ll show you how to serve an Angular (>2) frontend application using a Java Spring Boot application as the backend and static page web server, and a Gradle script to perform automated build and deploy tasks both for Spring and Angular.

Requirements

The technology stack required for this tutorial is:

The main goal is to achieve a npm install + build that integrates with Java’s gradle build and deploys the distribution files into Spring’s static resources directory. You could replace Angular CLI for any other Frontend build tool / framework such as React.

Backend

The backend of the stack will be a Spring Boot application.

We can generate a bootstrapped application using Spring’s Initializr utility as follows:

Spring Initializr

Select the basic options for a Gradle Java Project with support for Web and click “Generate Project” to download an initial application.

Next extract the project to a location of your choice.

In order to test frontend and backend integration, we are going to build a simple REST endpoint that generates a “Hello world!” String.

Create a new class (e.g. TestController) and modify it as follows:

 

Frontend

Once the Spring bootstrapped application has been extracted and modified, we must initialize the Frontend application.

In this case we are going to use angular-cli to prepare a bootstrapped empty Angular application.

The Angular application should be placed in the project’s directory ./src/main/webapp. The easiest way to achieve this is to open a terminal, navigate to ./src/main in the project’s root and execute the following Angular CLI command:

Angular CLI Bootsrap application

Angular build configuration

Some additional settings must be made to the default angular-cli.json configuration in order to ease the deployment of the application with Spring Boot.

apps.outDir property should be changed from “dist” to “dist/static”. Also the project.name property should be changed from “webapp” to the real name of the application.

Backend integration

In order to test integration with the Backend, we are going to make some simple modifications to the newly created application to connect to the REST endpoint we just created:

We’ve added to the component’s html a button to trigger the REST request, and a placeholder to show the result.

We’ve added a function that will be triggered by the button to call the REST endpoint and show the result in the placeholder.

Gradle Build Script

Finally we are going to modify the build.gradle script to create frontend integration tasks.

The resulting script looks as follows:

We’ve included a new variable webappDir that points to the Frontend’s application directory.

sourceSets  have been modified to include Andular’s dist directory where the application is packaged and deployed by Angular CLI.

We’ve added a dependency to the standard processResources task to one of our newly generated tasks: buildAngular.

Two new tasks have been created. buildAngular will run ‘ng build’ command. This task will be added to the standard build tasks and be called after installAngular task,

It’s important to notice that both these tasks should execute slightly different commands when run on Windows. Neither npm nor ng exist as executables in windows, they are both cmd scripts that can be run in the console just by passing their name (without extensions) but are really .cmd scripts. In order for them to be run as an Exec task, full name of the executable must be provided.

Finally, installAngular task will run npm install before any other task related with processing resources is executed.

build.gradle script

Download sources

You can find a full working project with the sources for this tutorial here: https://github.com/marcnuri-demo/angularboot

To get up and running (it takes a while, npm must download Angular dependencies [not verbose]):

Open http://localhost:8080 in your browser

Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+Pin on PinterestEmail this to someone

Leave a comment

Your email address will not be published. Required fields are marked *