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\.
|
|||||||||||||||||||||||||
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 :)
