Getting started with a backend service

Technologies

We will describe in this section the steps necessary to bootstrap a new backend service. This service will expose APIs serving data from a database and handle authentication through Hive.

Initialize project

Here we will create a new service using Spring Initializr.

Add required dependencies (Auth0 dependencies)

  1. DevTools

  2. Spring Web

  3. Spring HATEOAS

  4. Spring Security

  5. Spring Data JPA

  6. H2 Database

  7. MySQL Driver

  8. Spring Boot Actuator

  9. Spring REST Docs

Sample project

A sample project is available on our Gitlab

In this starter we wrote the data Module, the controller Module, and we added Auth0 dependency

Getting started with a frontend application

Initialize project

we will use ng new hello-world-app sample command line create a new workspace and initialize the Angular app

Sample project

You can clone this starter Angular App provided by Finance active hello-word-app

In this starter we develop a simple view we consume the data End Point that we defined in hello-world-service, and we use https://netbasal.gitbook.io/akita/ [Akita] to manage the context

commonly used command lines

The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications.

here are some of the most used commands :

  • ng serve : for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files

  • ng generate component component-name: to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module

  • ng build: used to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

  • ng test: to execute unit tests via Karma

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

Import the header

See Header.js documentation

UXG library to use Finance active Design System

Design System

Finance active has a specific Design System that contains CSS UXG Framework that is now in version 2.0.0 And the Angular component library that is in version 0.5.0.

Import UXG components

  1. update the .npmrc file, fontawesome well pointing to a special repository

    fortawesome:registry=https://nexus.financeactive.com/repository/npm-proxy-font-awesome/
  2. in Angular Cli file package.json add some dependencies:

    "UXG": "2.0.0",
    "@fortawesome/fontawesome-pro": "5.8.1"
  3. Declaration of css in angular.json add those styles:

    "styles": [
       "node_modules/@fortawesome/fontawesome-pro/css/all.css",
       "node_modules/UXG/dist/assets/css/app.css",
       "node_modules/UXG/dist/assets/css/fonts.css"
    ]
  4. Now you have to add a little css in "src / styles.css" to make space for the header

    body {
    margin-top: 40px;
    }

Declaring an Hive App

Hive applications must be able to communicate within a single domain name, just by knowing the name of the application that they are trying to contact. This convention makes the user’s identity available in all applications, by storing and exposing a JSON web token (JWT) in an HTTP cookie.

URLs

Hive applications must respect this URL convention:

application.domain/suffix

Example:

Application

Domain

Suffix

debt

financeactive.eu

none

market

ppd.financeactive.eu

Note Finance Active Prefers no suffix. and if you want to add it will have to be in the form something_else

Applications must be consistent across environments: only the domain may change.

Avoid multiple names for the same application and different suffixes from one environment to another.

Example:

  • Application Name: Hellos

  • Domain name: financeactive.eu

  • No suffix

Valid Production URL

Valid Dev URL

Invalid Dev URLs

https://hellos.financeactive.eu

https://hellos.hivedev.net

https://hellos.hivedev.net/dev https://hellos-test.hivedev.net

DNS configuration

DNS configuration is only relevant to white label customers.

You can use a dedicated domain name for the Fairways Debt applications. In this case, we recommend dedicating a whole subdomain of your domain.

Example

  • Your main domain is: company.com

  • Host the Fairways Debt applications under: platform.company.com

  • The URL of the Debt application would be: https://debt.platform.company.com

Enable applications under a domain, doing one of the following (sorted by preference):

  • Delegate the management of the platform.company.com DNS zone to Finance Active.

  • Configure a CNAME wildcard record, so that *.platform.company.com directs to hive.financeactive.eu.

  • Create specific CNAME records for each application:

    • debt.platform.company.com → hive.financeactive.eu

    • hello.platform.company.com → hive.financeactive.eu

The last solution is the least ideal: Finance Active has to communicate with you each time we create a new application.

SSL Certificates

Note: SSL certificates are only relevant to white label customers.

To use a dedicated domain name for the Fairways Debt applications, order a wildcard SSL certificate that will be used on our front HTTPS proxies.

We monitor the certificates till expiration, but you are responsible for renewing it.

If you develop your own applications, you can :

  • Order a dedicated SSL certificate for the application and deploy its infrastructure.

  • At the DNS level, have the application directs to Finance Active, who acts as a proxy to the target application. A valid SSL certificate must protect the target application.

In any case, never pass the wildcard SSL certificate to a third-party application developer.

Integrate the app into Hive Ecosystem

To integrate the application you have developed to the Design System, we recommend you install the following tools.

Install Nginx

Mac OS

  1. Install HomeBrew inserting this command in a terminal:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  1. Install Nginx inserting this command in a terminal:

brew install nginx

Windows

we recommend this link download nginx.