How to Modify the StrongLoop's LoopBack Explorer CSS

Question

We're using Strongloop's LoopBack for our REST APIs and would like to modify the CSS for the LoopBack Explorer. However, it's not clear which CSS files are being used (LoopBack vs Swagger) and where they're located. I was not able to find specific documentation for this.

score 13 · Answer 1 · edited Sep 25 '18 at 12:43

You can modify more than just the css. And also, if you generate your Loopback application using slc loopback like I did, you'll find that your server/server.js doesn't look immediately in a way you can configure it like it's shown in the accepted answer.

Instead you can use server/component-config.json to instruct the loopback component explorer to use an alternative directory for static files for the swagger-ui. With the uiDirs configuration below I configured it to go look 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 has to be set to "explorer" otherwise it's "server/explorer" as per @phegde 's comment

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

And finally, If you want to have custom css, copy node_modules/loopback-component-explorer/public/css/loopbackStyles.css into server/explorer/css/loopbackStyles.css

With me it does. If you want help, do an analyses and ask a question on SO. — Christiaan Westerbeek, Oct 23 '16 at 12:50
if explorer folder is inside the server, the `uiDirs` must be `"server/explorer"`. This was the fix. — pTK, Oct 24 '16 at 06:22
@phegde I updated my answer to reflect that. `uiDirs` had to be `"explorer"` when using iisnode. Otherwise, it's what you said. — Christiaan Westerbeek, Jun 12 '17 at 13:39

Miroslav Bajtoš · Accepted Answer · 2015-01-22T19:25:53.623

11

You can provide your own version of Swagger UI files via options.uiDirs.

Edit your server/server.js and add this config option to the explorer:

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

Copy the directory node_modules/loopback-explorer/public/css to server/explorer/css
Customize the copied CSS files as you need.

You should lock loopback-explorer's major & minor version in your package.json. Newer versions of loopback-explorer may change the CSS in which case your customization may stop working.

edited Jan 22 '15 at 19:25

answered Jan 22 '15 at 12:34

Miroslav Bajtoš

10,667
1
41
99

1

Miroslav's answer is correct. I deleted mine since it's incorrect. – superkhau Jan 22 '15 at 18:41
2

I did this in server js file and add dir server/explorer/all public files app.use(explorer(app, { uiDirs: path.resolve(__dirname, 'explorer') })); Ui is changed but there is no API.? – PPB Jul 23 '15 at 08:57
1

@PPB i am also getting same issue, how you resolved this issue – Anil Gupta Dec 30 '15 at 13:43
I get following error after adapting this change TypeError: app.use() requires a middleware function – Hemadri Dasari Sep 30 '18 at 12:51
@Think-Twice see https://github.com/strongloop/loopback-component-explorer/blob/master/README.md#upgrading-from-v1x. You need to use `explorer.routes()` instead of `explorer()` now. – Miroslav Bajtoš Oct 01 '18 at 07:43
@MiroslavBajtoš Thanks for your reply. I have applied custom css styles as mentioned in my newly added answer under this question – Hemadri Dasari Oct 01 '18 at 07:46

Enrique Enciso · Answer 3 · 2016-09-17T09:12:38.317

If you didn't lock the loopback-explorer in package.json or if you started your application from the new release of loopback(v2.x), you have to make another change:

If you generated your loopback app with the generator tool, edit server/component-config.json and change it to this:

{ "loopback-component-explorer": null }

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

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

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

score 0 · Answer 4 · edited Sep 30 '17 at 22:30

0

With the loopback-component-explorer the uiDirs defined in component-config.json should be added something like the below (which solved my issue).

"uiDirs": ["server/explorer"]

instead of

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

edited Sep 30 '17 at 22:30

Xavier Holt

14,471
4
43
56

answered Sep 30 '17 at 20:59

user2427771

33
11

score 0 · Answer 5 · answered Oct 01 '18 at 07:41

I am able to apply custom css styles to loopback api explorer header.

Steps I followed as mentioned below

Goto node_modules > loopback-component-explorer > public > css folder

Copy loopbackStyles.css

Create a new folder called explorer under server folder

create css folder under explorer and paste the css file under css folder i.e., loopbackStyles.css

Add below config to component-config.json file

{
  "loopback-component-explorer": {
    "mountPath": "/explorer",
    "generateOperationScopedModels": true,
    "uiDirs": "server/explorer"
  }
}

To change loopback header color I have just overrided backgroun-color with my own color in body #header css selector in loopbackStyles.css

To replace the default header logo name with our custom name. I have added following css styles in loopbackStyles.css

.swagger-ui-wrap #logo{
  display: none;
}
.swagger-ui-wrap:after { 
  content: "MyOwn API Explorer";
  color: #fff;
  font-weight: bold; 
}

How to Modify the StrongLoop's LoopBack Explorer CSS

5 Answers5

Linked

Related