Angular JS and Spring Boot BFF — Step 3

Photo by Harpal Singh on Unsplash

This article is from vinr Tech team. Try our business solutions for FREE.

vinr Business solutions | vinr

This story is part of a series “Initial Commit till Running on Cloud”.

Backend for frontend BFF — Step 2

Our BFF application is running smooth and the next step is adding a beautiful UI on top of that. As angular was selected as the frontend framework, material UI was default choice to create a clean UI.

To build the angular application through maven I have added a maven plugin com.github.eirslett.frontend-maven-plugin

<plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>1.10.0</version>
    <configuration>
        <nodeVersion>v12.16.3</nodeVersion>
    </configuration>
    <executions>
        <execution>
            <id>install-npm</id>
            <goals>
                <goal>install-node-and-npm</goal>
            </goals>
        </execution>
        <execution>
            <id>npm-install</id>
            <goals>
                <goal>npm</goal>
            </goals>
        </execution>
        <execution>
            <id>npm run-script prod</id>
            <phase>prepare-package</phase>
            <goals>
                <goal>npm</goal>
            </goals>
            <configuration>
                <arguments>run-script prod</arguments>
            </configuration>
        </execution>
    </executions>
</plugin>

When we run mvn install this plugin will download node, node_modules and package the final distribution. For those who are wondering what these mean,

Node is the Javascript runtime environment which executes javascript outside browser
npm is Node package manager, a Software registry for javascript libraries and an automated dependency/package manager. Let’s just say it downloads and installs remote packages (3rd party dependencies like material ui) into your project
package.json is the file containing metadata of our project. It contains dependencies and build info too. This is where npm looks to undertand how to package the project with external dependencies

So to start an Angular JS project we need some boiler plate code which u can copy from my commit https://github.com/richygreat/awesome-app-bff/commit/2b440778432032953fab00bb52b2e4ee4f771334

Steps to bootstrap Angular JS project

1. Create a package.json, angular.json and tsconfig.json under root directory
2. Create index.html, main.ts, polyfills.ts, styles.scss, tsconfig.app.json and typings.d.ts under src/app directory
3. Create an assets folder and gitkeep it for later static contents
4. Create environment.ts and environment.prod.ts under src/environments directory
5. Create an app directory and add app components to it as explained below

App component

Angular projects usually contain multiple modules but let’s keep it simple. 1 app module where we declare all components.

Create app.module.ts under src/app directory.

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
    ]),
    BrowserAnimationsModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [
    { provide: MAT_DATE_LOCALE, useValue: 'en-US' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

The sample given above is a minimal app.module.ts but the one I have pushed to the repository will contain some additional Material components which we will use in our UI. Now let’s add a component which is the displayable part of Angular JS application.

Every new component in Angular will have 4 files including test spec but I have ignored test to move faster in the tutorial.

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor() {
  }
}

app.component.css

.basic-container {
  padding: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

app.component.html

<div>
    <router-outlet></router-outlet>
</div>

So app component contains the router-outlet which means at some point of this tutorial we will have a declaration in app.module to route url paths to different Components we will design. router-outlet is to replace the actual content of the requested component inside app component.

@NgModule({
  declarations: [
    AppComponent,
    CustomerDashComponent,
    AdminDashComponent
  ],
  imports: [
    RouterModule.forRoot([
      { path: 'customer', component: CustomerDashComponent },
      { path: 'admin', component: AdminDashComponent }
    ]),
...

And we will also add header and footer component to the app.component.html

Project structure after you run mvn install for the first time

Okay before we run and taste our first success let me add the most important piece of code in a tutorial to app.component.html

<div>
    <div class="basic-container">Hello World</div>
    <router-outlet></router-outlet>
</div>

Alexa remind me to delete the Hello world :)

Sweet!

Our Awesome App has a UI and a BFF to handle the UI requests, What’s next? Cloud.

Going good? Please read the next part of this series. Also kindly leave your feedback :)

Create Virtual Private Cloud — VPC in AWS — Step 4