Spring Boot with Angular Setup

17 June 2017

We were given the opportunity to replace an existing mobile app by a responsive website. Mobile apps are great but since we are paying a monthly subscription to third-party, we are better off building a responsive website supported in all platform. We have iOS and Android version of the app but having it build once then run on different platforms is an added benefit.

For this setup, we need springboot-cli and ng-cli. I won't detail how to have them installed but in my setup I used sdkman for springboot-cli and npm for ng-cli.

sping init

$ spring init --dependencies=web,h2,jpa,actuator,devtools mobile
Using service at https://start.spring.io
Project extracted to '/home/drmanalo/idea/mobile'

ng init

$ ng new --skip-git angular2
installing ng
create .editorconfig
create README.md
create src/app/app.component.css
create src/app/app.component.html
create src/app/app.component.spec.ts
create src/app/app.component.ts
create src/app/app.module.ts
create src/assets/.gitkeep
create src/environments/environment.prod.ts
create src/environments/environment.ts
create src/favicon.ico
create src/index.html
create src/main.ts
create src/polyfills.ts
create src/styles.css
create src/test.ts
create src/tsconfig.app.json
create src/tsconfig.spec.json
create src/typings.d.ts
create .angular-cli.json
create e2e/app.e2e-spec.ts
create e2e/app.po.ts
create e2e/tsconfig.e2e.json
create karma.conf.js
create package.json
create protractor.conf.js
create tsconfig.json
create tslint.json
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Project 'angular2' successfully created.

Custom java configuration

Edit pom.xml. Add this plugin to the existing <build><plugins>.

<plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>${frontend-plugin.version}</version>
    <configuration>
        <workingDirectory>src/main/angular2</workingDirectory>
        <nodeDownloadRoot>https://nodejs.org/dist/</nodeDownloadRoot>
        <nodeVersion>${node.version}</nodeVersion>
        <npmVersion>${npm.version}</npmVersion>
        <installDirectory>target</installDirectory>
    </configuration>
    <executions>
        <execution>
            <id>install node and npm</id>
            <goals>
                <goal>install-node-and-npm</goal>
            </goals>
            <phase>generate-resources</phase>
        </execution>
        <execution>
            <id>npm install</id>
            <goals>
                <goal>npm</goal>
            </goals>
            <configuration>
                <arguments>install</arguments>
                <installDirectory>target</installDirectory>
            </configuration>
        </execution>
        <execution>
            <id>angular cli build</id>
            <goals>
                <goal>npm</goal>
            </goals>
            <phase>generate-resources</phase>
            <configuration>
                <arguments>run build</arguments>
            </configuration>
        </execution>
    </executions>
</plugin>

Custom angular configuration

Edit src/main/angular2/angular-cli.json. Whenever you're building angular, its outDir has to use ../resources/static/ as its target directory.

"apps": [
    {
      "root": "src",
      "outDir": "../resources/static/",
      "assets": [
        "assets",
        "favicon.ico"
      ],

Create a file called proxy.conf.json inside src/main/angular2 folder. It should contain this proxy settings.

{
  "/api": {
    "target": "http://localhost:8082",
    "secure": false
  }
}

Edit src/main/angular2/package.json. Modify the start script to use proxy.conf.json every time.

"scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

Running the application

To run Angular with live reload, issue ng serve on src/main/angular2 folder where angular-cli.json is.

To run Spring Boot (this doesn't support live reload yet), issue mvn spring-boot:run on the root folder where pom.xml is.

dhon.manalo