Sunday, September 23, 2018

Angular App Integration with Spring Boot

Developing angular app is easy but deploying it in cloud environment has its own challenges. Spring boot application helps to overcome many of the cloud deployment challenges. Spring Boot makes it easy to create stand-alone, production-grade Spring based Applications that you can "just run". 

Angular apps can be used as static resources in a web application which uses Spring Boot. In this post I'll show you how to marry Angular App and Sprint Boot web application.

The technology stack required for building angular app are Node.js and Angular CLI. In the example I am using Gradle to build & package the web application.

Node.js is used to install the required packages and dependencies for the angular application.

Angular CLI is used to generate the boilerplate code for angular app using command line interface.

Gradle hepls to build, package the application and automates the deployments.

I am not going to explaing much in details about these tools or frameworks.

Project Structure


The anugular app source files are placed in webapp folder(src\main\webapp) within a spring boot application. The startup Application.java class is annotated with @SpringBootApplcation is placed in src\main\java\com\jsp\jsonformatter\angularboot\.

  1 
package com.jsp.jsonformatter.angularboot;
  2 
 
  3 
import org.springframework.boot.SpringApplication;
  4 
import org.springframework.boot.autoconfigure.SpringBootApplication;
  5 
 
  6 
@SpringBootApplication
  7 
public class Application {
  8 
 
  9 
    public static void main(String[] args) {
 10 
        SpringApplication.run(Application.class, args);
 11 
    }
 12 
}

Angular build configuration

The anugular application can be build using ng build and it can be executed & tested using ng serve  You need to install the required packages and dependencies using npm install The ng build or ng serve uses the angular-cli.json or angular.json to build & package the angular application.



   1 
{
   2 
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   3 
  "version": 1,
   4 
  "newProjectRoot": "projects",
   5 
  "projects": {
   6 
    "webapp": {
   7 
      "root": "",
   8 
      "sourceRoot": "src",
   9 
      "projectType": "application",
  10 
      "prefix": "app",
  11 
      "schematics": {},
  12 
      "architect": {
  13 
        "build": {
  14 
          "builder": "@angular-devkit/build-angular:browser",
  15 
          "options": {
  16 
            "outputPath": "dist/static",
  17 
            "index": "src/index.html",
  18 
            "main": "src/main.ts",
  19 
            "polyfills": "src/polyfills.ts",
  20 
            "tsConfig": "src/tsconfig.app.json",
  21 
            "assets": [
  22 
              "src/favicon.ico",
  23 
              "src/assets"
  24 
            ],
  25 
            "styles": [
  26 
              "src/styles.scss"
  27 
            ],
  28 
            "scripts": []
  29 
          },
  30 
          "configurations": {
  31 
            "production": {
  32 
              "fileReplacements": [
  33 
                {
  34 
                  "replace": "src/environments/environment.ts",
  35 
                  "with": "src/environments/environment.prod.ts"
  36 
                }
  37 
              ],
  38 
              "optimization": true,
  39 
              "outputHashing": "all",
  40 
              "sourceMap": false,
  41 
              "extractCss": true,
  42 
              "namedChunks": false,
  43 
              "aot": true,
  44 
              "extractLicenses": true,
  45 
              "vendorChunk": false,
  46 
              "buildOptimizer": true
  47 
            }
  48 
          }
  49 
        },
  50 
        "serve": {
  51 
          "builder": "@angular-devkit/build-angular:dev-server",
  52 
          "options": {
  53 
            "browserTarget": "webapp:build"
  54 
          },
  55 
          "configurations": {
  56 
            "production": {
  57 
              "browserTarget": "webapp:build:production"
  58 
            }
  59 
          }
  60 
        },
  61 
        "extract-i18n": {
  62 
          "builder": "@angular-devkit/build-angular:extract-i18n",
  63 
          "options": {
  64 
            "browserTarget": "webapp:build"
  65 
          }
  66 
        },
  67 
        "test": {
  68 
          "builder": "@angular-devkit/build-angular:karma",
  69 
          "options": {
  70 
            "main": "src/test.ts",
  71 
            "polyfills": "src/polyfills.ts",
  72 
            "tsConfig": "src/tsconfig.spec.json",
  73 
            "karmaConfig": "src/karma.conf.js",
  74 
            "styles": [
  75 
              "src/styles.css"
  76 
            ],
  77 
            "scripts": [],
  78 
            "assets": [
  79 
              "src/favicon.ico",
  80 
              "src/assets"
  81 
            ]
  82 
          }
  83 
        },
  84 
        "lint": {
  85 
          "builder": "@angular-devkit/build-angular:tslint",
  86 
          "options": {
  87 
            "tsConfig": [
  88 
              "src/tsconfig.app.json",
  89 
              "src/tsconfig.spec.json"
  90 
            ],
  91 
            "exclude": [
  92 
              "**/node_modules/**"
  93 
            ]
  94 
          }
  95 
        }
  96 
      }
  97 
    },
  98 
    "webapp-e2e": {
  99 
      "root": "e2e/",
 100 
      "projectType": "application",
 101 
      "architect": {
 102 
        "e2e": {
 103 
          "builder": "@angular-devkit/build-angular:protractor",
 104 
          "options": {
 105 
            "protractorConfig": "e2e/protractor.conf.js",
 106 
            "devServerTarget": "webapp:serve"
 107 
          },
 108 
          "configurations": {
 109 
            "production": {
 110 
              "devServerTarget": "webapp:serve:production"
 111 
            }
 112 
          }
 113 
        },
 114 
        "lint": {
 115 
          "builder": "@angular-devkit/build-angular:tslint",
 116 
          "options": {
 117 
            "tsConfig": "e2e/tsconfig.e2e.json",
 118 
            "exclude": [
 119 
              "**/node_modules/**"
 120 
            ]
 121 
          }
 122 
        }
 123 
      }
 124 
    }
 125 
  },
 126 
  "defaultProject": "webapp"
 127 
}

Take a closer look at output path property. The outputPath is defined as dist\static. This is important as the angular app build output will be used as static resource by the Spring Boot applicaiton.

Building Together (Angular + Spring Boot App)

The Gradle build script is used to build the Spring Boot app and it will take care of building Angular app as static resource to the Spring Boot App

Take a closer at the installAngular and buildAngular task in Gradle script. The installAngular task installs the required packages & dependencies defined in package.json. It uses the npm install command to install the required pacakges.

The buildAngular task uses the "ng build" angular cli command to build the angular project. The output of angular build will be placed in dist\static folder.

  1 
buildscript {
  2 
    ext {
  3 
        springBootVersion = '1.5.4.RELEASE'
  4 
    }
  5 
    repositories {
  6 
        mavenCentral()
  7 
    }
  8 
    dependencies {
  9 
        classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
 10 
    }
 11 
}
 12 
 
 13 
apply plugin: 'java'
 14 
apply plugin: 'eclipse'
 15 
apply plugin: 'org.springframework.boot'
 16 
 
 17 
version = '0.0.1-SNAPSHOT'
 18 
sourceCompatibility = 1.8
 19 
 
 20 
repositories {
 21 
    mavenCentral()
 22 
}
 23 
 
 24 
 
 25 
dependencies {
 26 
    compile('org.springframework.boot:spring-boot-starter-web')
 27 
    testCompile('org.springframework.boot:spring-boot-starter-test')
 28 
}
 29 
 
 30 
def webappDir = "$projectDir/src/main/webapp"
 31 
sourceSets {
 32 
    main {
 33 
        resources {
 34 
            srcDirs = ["$webappDir/dist", "$projectDir/src/main/resources"]
 35 
        }
 36 
    }
 37 
}
 38 
 
 39 
processResources {
 40 
    dependsOn "buildAngular"
 41 
}
 42 
 
 43 
task buildAngular(type:Exec) {
 44 
    // installAngular should be run prior to this task
 45 
    dependsOn "installAngular"
 46 
    workingDir "$webappDir"
 47 
    inputs.dir "$webappDir"
 48 
    // Add task to the standard build group
 49 
    group = BasePlugin.BUILD_GROUP
 50 
    // ng doesn't exist as a file in windows -> ng.cmd
 51 
    if (System.getProperty("os.name").toUpperCase().contains("WINDOWS")){
 52 
        commandLine "ng.cmd", "build", " --prod --aot"
 53 
    } else {
 54 
        commandLine "ng", "build"
 55 
    }
 56 
}
 57 
 
 58 
task installAngular(type:Exec) {
 59 
    workingDir "$webappDir"
 60 
    inputs.dir "$webappDir"
 61 
    group = BasePlugin.BUILD_GROUP
 62 
    if (System.getProperty("os.name").toUpperCase().contains("WINDOWS")){
 63 
        commandLine "npm.cmd", "install"
 64 
    } else {
 65 
        commandLine "npm", "install"
 66 
    }
 67 
}
The buildAngular task is added as processResouces in the gradle script and the installAngular task is added as dependency to buildAngular task. The gradle build script has been modified to include the angular app's dist directory in soruceSets.

Commands to build & run

Execute the following command to build the app

gradle build

Execute the following command to run the app

gradle bootRun

:) Happy Building :)


Live JSON Formatter Demo



Download Source




44 comments:

  1. Nice blog..! I really loved reading through this article. Thanks for sharing such an amazing post with us and keep blogging... Well written article Thank You for Sharing with Us pmp training fee | pmp certification course in chennai | best pmp training institute in chennai| | pmp training class in chennai \ pmp training fee

    ReplyDelete
  2. Thanks for your great and helpful presentation I like your good service. I always appreciate your post. That is very interesting I love reading and I am always searching for informative information like this. Well written article Thank You for Sharing with Us pmp training in chennai | pmp training class in chennai | pmp training near me | pmp training courses online | pmp training fee

    ReplyDelete
  3. Thanks for such a great article here. I was searching for something like this for quite a long time and at last, I’ve found it on your blog. It was definitely interesting for me to read about their market situation nowadays.AngularJS Training in Chennai | Best AngularJS Training Institute in Chennai |

    ReplyDelete
  4. Very nice post here thanks for it .I always like and such a super contents of these post.Excellent and very cool idea and great content of different kinds of the valuable information's.

    machine learning classroom training in chennai
    machine learning certification in chennai
    top institutes for machine learning in chennai
    Android training in velachery
    PMP training in chennai

    ReplyDelete
  5. Such a Great Article!! I learned something new from your blog. Amazing stuff. I would like to follow your blog frequently. Keep Rocking!!
    Blue Prism training in chennai | Best Blue Prism Training Institute in Chennai

    ReplyDelete
  6. Thanks for such a great article here. I was searching for something like this for quite a long time and at last, I’ve found it on your blog. It was definitely interesting for me to read about their market situation nowadays.iot certification chennai | iot training courses in chennai | iot training institutes in chennai | industrial iot training chennai

    ReplyDelete
  7. Nice blog..! I really loved reading through this article. Thanks for sharing such a amazing post with us and keep blogging... best angularjs training institute in chennai | angularjs training in omr | angular 4 training in chennai | angularjs training in omr

    ReplyDelete
  8. Nice blog..! I really loved reading through this article. Thanks for sharing such a amazing post with us and keep blogging... best angularjs training institute in chennai | angularjs training in omr | angularjs training in chennai | angularjs best training center in chennai

    ReplyDelete
  9. This concept is a good way to enhance the knowledge.thanks for sharing. please keep it up machine learning certification

    ReplyDelete


  10. Get the most advanced Hadoop Course by Professional expert. Just attend a FREE Demo session.
    call us @ 9884412301 | 9600112302
    Hadoop training in chennai | Hadoop training in velachery

    ReplyDelete
  11. I think this is an informative post and knowledgeable. Thank you for sharing this wonderful post! I’m glad that I came across your article.
    Java Training in Chennai/Java Training in Chennai with Placements

    ReplyDelete
  12. Attend The Data Analytics Course in Bangalore with Placement From ExcelR. Practical Data Analytics Course in Bangalore with Placement Sessions With Assured Placement Support From Experienced Faculty. ExcelR Offers The Data Analytics Course in Bangalore with Placement.
    ExcelR Data Analytics Course in Bangalore with Placement

    ReplyDelete
  13. Excellent blog thanks for sharing Pixies Beauty Shop is unlike any of the other cosmetic shops in Chennai. With tons of exclusive imported brands to choose from and the best value, this is the best shopping destination for your personal and salon needs.

    ReplyDelete
  14. Attend The PMP Certification From ExcelR. Practical PMP Certification Sessions With Assured Placement Support From Experienced Faculty. ExcelR Offers The PMP Certification.
    ExcelR PMP Certification

    ReplyDelete
  15. Attend The Data Analytics Course in Bangalore with Placement From ExcelR. Practical Data Analytics Course in Bangalore with Placement Sessions With Assured Placement Support From Experienced Faculty. ExcelR Offers The Data Analytics Course in Bangalore with Placement.
    ExcelR Data Analytics Course in Bangalore with Placement

    ReplyDelete

  16. I am a new user of this site so here i saw multiple articles and posts posted by this site,I curious more interest in some of them hope you will give more information on this topics in your next articles.
    ExcelR business analytics courses

    ReplyDelete
  17. Attend The PMP Certification From ExcelR. Practical PMP Certification Sessions With Assured Placement Support From Experienced Faculty. ExcelR Offers The PMP Certification.
    ExcelR PMP Certification

    ReplyDelete
  18. Attend The Analytics Training Institute From ExcelR. Practical Analytics Training Institute Sessions With Assured Placement Support From Experienced Faculty. ExcelR Offers The Analytics Training Institute.
    ExcelR Analytics Training Institute

    ReplyDelete
  19. After reading your article I was amazed. I know that you explain it very well. And I hope that other readers will also experience how I feel after reading your article.
    ExcelR data science course in mumbai

    ReplyDelete

  20. الرائد افضل شركات تنظيف خزانات المياه يسعدنا ان نقدم لكم افضل خدمات
    شركة غسيل خزانات بالمدينة المنورة تنظيف خزانات بالمدينة المنورة
    افضل شركة تنظيف منازل بالمدينة المنورة شركة تنظيف بيوت بالمدينة المنورة

    ReplyDelete
  21. Really nice and interesting post. I was looking for this kind of information and enjoyed reading this one. Keep posting. Thanks for sharing.
    data analytics courses

    ReplyDelete
  22. Really nice and interesting post. I was looking for this kind of information and enjoyed reading this one. Keep posting. Thanks for sharing.
    data analytics courses

    ReplyDelete
  23. Such a very useful article. Very interesting to read this article.I would like to thank you for the efforts you had made for writing this awesome article.
    data analytics course mumbai

    ReplyDelete
  24. I am really enjoying reading your well written articles. It looks like you spend a lot of effort and time on your blog. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work.
    data analytics course mumbai

    ReplyDelete
  25. After reading your article I was amazed. I know that you explain it very well. And I hope that other readers will also experience how I feel after reading your article.
    data analytics course mumbai

    ReplyDelete
  26. Awesome blog thankks for sharing 100% virgin Remy Hair Extension in USA, importing from India. Premium and original human hair without joints and bondings. Available in Wigs, Frontal, Wavy, Closure, Bundle, Curly, straight and customized color hairstyles Extensions.

    ReplyDelete
  27. Very useful blog thanks for sharing IndPac India the German technology Packaging and sealing machines in India is the leading manufacturer and exporter of Packing Machines in India.

    ReplyDelete
  28. Hi! This is my first visit to your blog! We are a team of volunteers and new initiatives in the same niche. Blog gave us useful information to work. You have done an amazing job!data science course in malaysia
    best tableau training
    data analytics course malaysia
    360DigiTMG

    ReplyDelete
  29. Thanks for this blog are more informative contents step by step. I here attached my site would you see this blog.

    7 tips to start a career in digital marketing

    “Digital marketing is the marketing of product or service using digital technologies, mainly on the Internet, but also including mobile phones, display advertising, and any other digital medium”. This is the definition that you would get when you search for the term “Digital marketing” in google. Let’s give out a simpler explanation by saying, “the form of marketing, using the internet and technologies like phones, computer etc”.

    We have offered to the advanced syllabus course digital marketing for available join now.

    more details click the link now.

    https://www.webdschool.com/digital-marketing-course-in-chennai.html

    ReplyDelete
  30. Amazing article useful information.

    Web designing trends in 2020

    When we look into the trends, everything which is ruling today’s world was once a start up and slowly begun getting into. But Now they have literally transformed our lives on a tremendous note. To name a few, Facebook, Whats App, Twitter can be a promising proof for such a transformation and have a true impact on the digital world.

    we have offered to the advanced syllabus course web design and development for available join now.

    more details click the link.

    https://www.webdschool.com/web-development-course-in-chennai.html

    ReplyDelete