npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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

Jackson Patrick Werka

Licença

This project is public, licensed under the MIT license.