How to change StrongLoop LoopBack Explorer CSS

Question

We use Strongloop LoopBack for our REST APIs and would like to change CSS for LoopBack Explorer. However, it is unclear which CSS files are used (LoopBack vs Swagger) and where they are located. I could not find specific documentation for this.

Answer 1

You can provide your own version of the Swagger UI interface files through options.uiDirs .

• Edit server/server.js and add this configuration option to explorer:

   app.use(explorer(app, { uiDirs: path.resolve(__dirname, 'explorer') })); 

• Copy the node_modules/loopback-explorer/public/css directory to server/explorer/css

• Customize the copied CSS files as needed.

You must block the major and minor versions of loopback-explorer in your package. json Newer versions of loopback-explorer can change CSS, in which case your setup may stop working.

Answer 2

You can change more than just css. Also, if you created your Loopback application using slc loopback like me, you will find that your server/server.js does not look like you can configure it, as shown in the accepted answer.

Instead, you can use server/component-config.json to server/component-config.json loopback component explorer to use an alternate directory for static files for swagger-ui. In the uiDirs configuration below, I configured it to search for static files in the server/explorer directory.

 { "loopback-component-explorer": { "mountPath": "/explorer", "uiDirs": "server/explorer", "apiInfo": { "title": "My API", "description": "Description of my API" } } } 

& AST; When using IISNode uiDirs should be set to "explorer" otherwise "server/explorer" according to the comment by @phegde

In my server directory, I created index.html, which is a copy from node_modules/loopback-component-explorer/public/index.html , and also created a logo folder.

And finally, if you want to create custom css, copy node_modules/loopback-component-explorer/public/css/loopbackStyles.css to server/explorer/css/loopbackStyles.css

Answer 3

If you did not block loopback-explorer in package.json or if you started the application from the new version of loopback (v2.x), you need to make another change:

• If you created the loopback application using the generator tool, edit server/component-config.json and change it to this:

  {"loopback-component-explorer": null}

2. Copy the node_modules/loopback-explorer/public/ directory to server/explorer/ , as Miroslav said. If you copy the entire directory, you can also change the index.html file.

3. Modify the server/server.js file and add this line: app.use('/explorer',explorer.routes(app, { uiDirs: path.resolve(__dirname, 'explorer') })); you also need to add the explorer module to the beginning of the file: var explorer = require('loopback-component-explorer');

4. Configure ui of your explorer, all necessary files are in server/explorer

Answer 4

With loopback-component-explorer in uiDirs specified in component-config.json , something like below should be added (which solved my problem).

 "uiDirs": ["server/explorer"] 

instead

 "uiDirs": "server/api-explorer",