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.
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'
})