Is there a way to render Loopback 4 "/explorer" in collapsed mode by default

Question

I have installed Loopback 4, and mounted my legacy Loopback 3 app into it as part of my migration - all good so far.

However my (swagger-ui shaped) explorer renders expanded by default - and there are a LOT of endpoints and services - making it very hard to find what I'm looking for.

My instinct tells me I should be able to add a configuration here in my application.ts - but I cannot find anything.

    this.configure(RestExplorerBindings.COMPONENT).to({
      path: '/explorer',
      docExpansion:'none'    <<<<< this is what I would expect/like
    });
    this.component(RestExplorerComponent);

Has anyone been able to accomplish this? It seems from the forums there are a lot of requests for something like this.

Answer 1

You could try this.

https://www.npmjs.com/package/@loopback/rest-explorer

Overriding the Swagger UI index.html For more flexibility, the indexTemplatePath property can be used to allow full customization of Swagger UI configuration options.

indexTemplatePath should be an absolute path to a html.ejs template.

To get started, download the default index.html.ejs, add /explorer/index.html.ejs to your project, and update the configuration:

this.configure(RestExplorerBindings.COMPONENT).to({
    // For example, create a directory "explorer" at the same level
    // as "src" and "node_modules" in your applciation structure
    indexTemplatePath: path.resolve(__dirname, '../explorer/index.html.ejs'),
});

you can then add

docExpansion: 'none',

inside the index.html.ejs file.

const ui = SwaggerUIBundle({
    url: '<%- openApiSpecUrl %>',
    dom_id: '#swagger-ui',
    deepLinking: true,
    filter: true,
    docExpansion: 'none',
    defaultModelsExpandDepth: 0,
    defaultModelExpandDepth: 0,
    presets: [
        SwaggerUIBundle.presets.apis,
        // SwaggerUIStandalonePreset
        SwaggerUIStandalonePreset.slice(1) // Disable the top bar
    ],
    plugins: [
        SwaggerUIBundle.plugins.DownloadUrl
    ],
    layout: 'StandaloneLayout'
    })