Web Backend API

Library to simulate a backend API for use in WEB projects.

When using this mock library, it will not be necessary to run any other service or application to simulate the backend, since it will run together with the application at run time.

The library allows working with restful applications, applications that use concepts from different end-points to interact with the user for the same data collection.
If it does not meet your needs, it is possible to implement an interceptor that will process the request and send a customized response.

This library was inspired by two other most used libraries and combines in a simplified way some the features of both:
Angular => in-memory-web-api
MockServer => mockserver-client-node

Installation

To install this library, run:

$ npm install web-backend-api --save

Setup the app project

To simulate backend is necessary create a collection files that have the configuration about every collection used in application

Sample tree project:

 '-> backend
 |  '-> ** (collection folders)
 '-> src
    '-> app

To separate info and configuration of data, create two files (optional):

File: customers.mock.ts

import { ICustomer } from "src/app/entities/customer/customer.interface";

export const collectionName = "customers";

export const customers: ICustomer[] = [
  { id: 1, name: "Customer 12345" },
  { id: 2, name: "Customer 23451" },
  { id: 3, name: "Customer 34512" },
  { id: 4, name: "Customer 45123" },
  { id: 5, name: "Customer 51234" },
];

File: customers.data.ts

import { dataService, IBackendService } from "web-backend-api";
import { collectionName, customers } from "./customers.mock";

dataService(collectionName, (dbService: IBackendService) => {
  // Load initial clients to backend
  customers.forEach((customer) => {
    dbService.storeData(collectionName, customer);
  });
});

Note: To view all possible configurations for a collection see all methods in: IBackendService
To view a sample project that use the lib, see: Web Backend API Sample

How to use with an Angular App

It's necessariy load all scripts that configure the backends data for use in application.

To start and load all data to simulate backend is necessary create a different main entry file. In this sample use a main-mock.ts

import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app/app.module";
import { environment } from "./environments/environment";
import { setupBackend, BackendConfigArgs } from "web-backend-api/src";

if (environment.production) {
  enableProdMode();
}

// Define directory where find all *.data.ts files
const dirDataSoruce = "../backend/";

// Then we find all the mocks. For until angular 14
// declare const require: any;
// const context = require.context(dirDataSoruce, true, /\.data\.ts$/);

// Then we find all the mocks. For angular above 14
const context = (import.meta as any).webpackContext(dirDataSoruce, {
  recursive: true,
  regExp: /\.data\.ts$/,
});

// And load the modules.
context.keys().map(context);

const config: BackendConfigArgs = {
  post204: false, // return the item in body after POST
  put204: false, // return the item in body after PUT
};
setupBackend(config, { dbtype: "memory" })
  .then(() => {
    platformBrowserDynamic()
      .bootstrapModule(AppModule)
      .then(() => {
        console.log("[Backend]", "Backend database application started!");
      })
      .catch((err) => console.error(err));
  })
  .catch((err) => console.error(err));

Note: To view all possible configurations for a setup backend, see all configurations flags in: BackendConfigArgs

To enable the different main entry file is necessary create a configuration in angular.json file another configuration in configurations node.

...
  "configurations": {
    "production": { ... },
    "mock-backend": {
      "main": "src/main-mock.ts",
      ...
    }
  }

After this step, it's necessary replace angular default HttpBackend providers. To allow this crete a service to simulate mock backend with this configuration (sugestion): HttpMockBackendService

Create the module taht configure replace provider for your application:

import { HttpBackend } from "@angular/common/http";
import { ModuleWithProviders, NgModule } from "@angular/core";
import { IBackendService, getBackendService } from "web-backend-api";
import {
  BACKEND_SERVICE,
  HttpMockBackendService,
} from "./http-mock-backend.service";

function httpMockBackendFactory(dbService: IBackendService): HttpBackend {
  return new HttpMockBackendService(dbService);
}

@NgModule({})
export class MockBackendApiModule {
  static forRoot(): ModuleWithProviders<MockBackendApiModule> {
    return {
      ngModule: MockBackendApiModule,
      providers: [
        { provide: BACKEND_SERVICE, useFactory: getBackendService },
        {
          provide: HttpBackend,
          useFactory: httpMockBackendFactory,
          deps: [BACKEND_SERVICE],
        },
      ],
    };
  }

  static forFeature(): ModuleWithProviders<MockBackendApiModule> {
    return MockBackendApiModule.forRoot();
  }
}

Import the MockBackendApiModule into your root AppModule

import { MockBackendApiModule } from "./shared/mocks/mock-backend-api.module";

Add MockBackendApiModule.forRoot() to your AppModule's import array

@NgModule({
  imports : [CommonModule, MockBackendApiModule.forRoot(), ...],
})
export class AppModule {}

To start your application with simulate backend use:

$ ng serve --configuration="mock-backend"

Separate backend from production

To separate backend from production is necessary create an environment in your application configuration that load web-backend-api when necessary and don't load it when unnecessary.

In yours enviroments files, create a property with name imports and add reference to the module use to load `web-backend-api.

File src/environments/environment.mock.ts is the module used for simulate backend configuration.

import { MockBackendApiModule } from "src/mocks/mock-backend-api.module";

export const environment = {
  production: false,
  imports: [MockBackendApiModule.forRoot()],
};

File src/environments/environment.prod.ts is the module used for production configuration.

export const environment = {
  production: true,
  imports: [],
};

Change configuration in angular.json file include file replacement for this module to configuration production

...
  "configurations": {
    "mock-backend": {
      "main": "src/main-mock.ts",
      "tsConfig": "tsconfig.mock.json",
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.mock.ts"
        }
      ],
      . . .
    }
  }

Add environment.imports to your AppModule's import array

import { environment } from './../environments/environment';
. . .

@NgModule({
  imports : [
    CommonModule,
    . . ., // other modules
    ...environment.imports
  ],
})
export class AppModule {}

Changes and Updates

View CHANGELOG

Autor

Jackson Patrick Werka

Licença

This project is public, licensed under the MIT license.