Fusio as backend to build type-safe APIs for your Angular app

This post will cover how you can use Fusio as backend for your Angular app. Fusio is an open source API management system which helps to build and manage great APIs.

Development

Generator

Fusio provides a generator to automatically create a complete API based on an entity definition. This means you can model your entities using our schema editor and then Fusio can automatically generate all routes, actions and schemas to build your API. The following image shows the editor:

Proxy

Fusio provides also many other ways to build your API. If i.e. you want to use existing APIs or Microservices for your app you can easily create an action using the “HTTP-Processor” to proxy all requests to a remote API.

Then you only need to create a route which executes this action s.

It is highly recommended to create a fitting schema which describes the request and response data of your endpoint. This is required so that Fusio can automatically generate a fitting client SDK.

Integration

We have created an API using Fusio, now we want to integrate this API into our Angular app.

NPM

At first you need to include the Fusio Angular SDK into your project :

npm i ngx-fusio-sdk

You may also want to directly include the following dependencies in your packageconfig.json:

"ngx-fusio-sdk": "^0.2.0",
"fusio-sdk": "^2.2.4",
"sdkgen-client": "^0.3.0",
"axios": "^0.24.0",

SDK Generator

Now we can generate the “typescript” client SDK at the Fusio backend.

You can then include the generated source files into your project. It is recommended to move them in a folder i.e. “generated” so that you can easily update those files in case you change the schema of your API.

The following image shows an examples of the folder structure.

Configuration

Then we need to create a custom “Fusio” service where we define which “Client” we use at the SDK. In our case we return the Client from the generated folder.

In your “app.module.ts” file you also need to tell Angular that we want to use our custom FusioService s. the “providers” key:

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {FusioSdkModule, FusioService as Sdk} from "ngx-fusio-sdk";
import {FusioService} from "./fusio.service";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FusioSdkModule,
  ],
  providers: [
    {provide: Sdk, useExisting: FusioService}
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Usage

Now we have configured the Fusio SDK and are ready to use the generated client to access our API. In the following we have created a simple test component which uses one of our generated “human” endpoint to get a list of humans s.

The Client is complete type-safe and uses the schema which we have configured at our backend. In our template we then also get all benefits of using this type-safe JSON data.

Conclusion

This was a first introduction to show how great Fusio works as a backend for your Angular app. We have covered only the basic usage and there are many more topics where Fusio can help you i.e. the SDK also covers the login/registration process. Our internal backend and developer portal app are also based on this SDK so you might want to check them out. I hope I could give you a first overview and have fun using Angular with Fusio!