web-backend-api
v7.0.2
Published
Biblioteca para simular um backend em tempo de excução diretamente no browser.
Downloads
4,959
Readme
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
Licença
This project is public, licensed under the MIT license.