Software

Angular and Spring Boot as a Single Application

Istock 1194668332

Angular and Spring Boot as a single application

Prerequisites: Experience in Spring Boot, Gradle and Angular.

Concept:

This blog will let you understand how to build Angular and Java Code as a single WAR/JAR using Gradle.

What is Spring Boot?

Spring Boot is a Standalone application that reduces several tedious development steps and boilerplate code and configuration. It helps us to create a web application as a standalone JAR file with zero XML configuration and an embedded web server. It also bundles the application with all the necessary dependencies.

What is Angular?

Angular is a platform and framework for building single-page client applications using HTML and TypeScript. Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your apps.

Let us create a Spring Boot application that encapsulates the Angular project with Java (backend) using Gradle build scripts.

Technologies used:

  • Spring Boot 2.4.1 RELEASE
  • H2 Database
  • Spring Data JPA
  • Tomcat Embed 9.0.41
  • Gradle 6.7.1
  • Java 8
  • Bootstrap

 

For this project, Spring Tools Suit is used as IDE. The below are the steps performed to create the application.

  • Create a Spring Starter Project with H2 Database, Spring Data JPA, and Spring Web dependencies.

1

  • Create the required Model, Controller, and Repository.

2

  • Create an Angular Application containing Model, Component and a Service inside the project folder

3

The angular project should be created inside the Spring Boot project folder. If it is an existing Angular application, just add it to the Spring Boot project folder.

4

Build Script

  • Create a Gradle Script to run the entire Spring Boot project.

 

plugins {
    id 'org.springframework.boot' version '2.4.1'
    id 'io.spring.dependency-management' version '1.0.10.RELEASE'
    id 'java'
}

apply plugin: 'war'

group = 'org.goal'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '1.8'

repositories {
    mavenCentral()
}

task deleteStaticFolder(type: Delete) {
    def dirName = "src/main/resources/static" 
    file( dirName ).list().each{
        f -> 
            delete "${dirName}/${f}"
    }
}

processResources.dependsOn('application-frontend:build')


dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
    implementation 'org.springframework.boot:spring-boot-starter-web'
    runtimeOnly 'com.h2database:h2'
    testImplementation 'org.springframework.boot:spring-boot-starter-test'
}

test {
    useJUnitPlatform()
}
  • Create one more Gradle Script inside the Angular project to build the Angular project
plugins {
  id "com.github.node-gradle.node" version "3.0.0-rc6"
}

version '0.0.1'

node {
  version = '14.15.4'
  npmVersion = '6.14.10'
  download = true
  workDir = file("${project.buildDir}/node")
  nodeModulesDir = file("${project.projectDir}")
}



task build(type: NpmTask) {
  args = ['run', 'build']
}

//build.dependsOn(npm_install)
//frontend:build will be run before the processResources

 

  • Create a Gradle setting file inside the Spring Boot project which defines the names of the root project and the inner project.

7

The subprojects are build only if they are included inside the “settings.gradle” file .

  •    How to make Spring Boot run the Angular application?

We should change the “outputPath” attribute’s value to the “../src/main/resources/static” so that the generated bundles will be dropped into the Spring Boot’s resources/static folder.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "application-frontend": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "../src/main/resources/static",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
  • The “outputPath” is set to the static location which is present inside the resources folder of the Spring Boot Application

9

  • You can find the generated WAR file in the following folder

 10

  • Output:

11

10

About the Author

Akash Gopinath is an associate technical consultant with over two years of experience. He works as a full-stack developer and works with several technology stacks like Java, Angular, Spring Boot, and JBoss.

More from this Author

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe to the Weekly Blog Digest:

Sign Up
Categories