How to remove all frontend files from Loopback app

Question

While developing on a loopback api it is very convenient that the default lp4 app command generates a simple landing page with a swagger api explorer.

But I don't want this when I am finished. where in the code do I disable the self hosted pages, and which files should I delete to remove irrelevant files in my project?

score 4 · Accepted Answer · answered Apr 29 '22 at 23:35

There are 4 artifacts that you may want to individually disabled/removed:

Default / landing page: The default page that links to openapi.json and the API explorer.
Externally-hosted REST explorer redirect: A redirect from /swagger-ui and /explorer to a REST explorer that's hosted elsewhere (e.g. https://explorer.loopback.io).
Self-hosted REST explorer: A REST explorer served at /explorer. Takes precedence over hosted REST explorer redirect for /explorer path by default.
OpenAPI spec endpoint: The OpenAPI 3.0 spec hosted at /openapi.json by default.

Although the instructions here can be followed exactly for majority of LoopBack 4 projects, more customised projects may have certain things (e.g. application or component configuration) moved around.

To remove the default / landing page:

Remove the public directory

Remove the following lines from src/application.ts:

// Set up default home page
this.static('/', path.join(__dirname, '../public'));

To disable externally-hosted REST explorer through configuration:

In src/index.ts, configure config.rest.apiExplorer.disabled:

const config = {
  rest: {
    apiExplorer: {
      disabled: true,
    },
  },
};

To completely remove self-hosted REST explorer:

Remove the following lines from application.ts:

// Customize @loopback/rest-explorer configuration here
this.configure(RestExplorerBindings.COMPONENT).to({
  path: '/explorer',
});
this.component(RestExplorerComponent);

Uninstall @loopback/rest-explorer

To disable the OpenAPI spec endpoint through configuration:

In src/index.ts, configure config.rest.openApiSpec.disabled:

const config = {
  rest: {
    openApiSpec: {
      disabled: true,
    },
  },
};

Note that disabling the OpenAPI spec endpoint would prevent the REST explorers from working correctly as they are dependent on an web browser-accessible OpenAPI spec.

Disabling the OpanAPI spec endpoint does not disable access to the OpenAPI spec from within TypeScript nor does it affect AJV validation.

How to remove all frontend files from Loopback app

1 Answers1

References