Redoc: Add multiple swagger json file

Created on 24 Mar 2018 · 7Comments · Source: Redocly/redoc

How can we add more than one swagger JSON file into ReDoc?

Source

ashkanRmk

👍3

Most helpful comment

ou can add them using javascript like this:

<!DOCTYPE html>
<html>
<head>
<title>ReDoc APIs</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700" rel="stylesheet">

  <style>
    body {
      margin: 0;
      padding-top: 40px;
    }
  </style>
</head>
<body>

<!-- Top navigation placeholder -->
<nav>
  <ul id="links_container">
  </ul>
</nav>

<redoc scroll-y-offset="body > nav"></redoc>

<script src="https://cdn.jsdelivr.net/npm/redoc/bundles/redoc.standalone.js"></script>
<script>
    // list of APIs
    var apis = [
        {
            name: 'First API',
            url: 'http://domain/swagger.json'
        },
        {
            name: 'Second API',
            url: 'http://domain/swagger2.json'
        }
    ];

    // initially render first API
    Redoc.init(apis[0].url);

    function onClick() {
        var url = this.getAttribute('data-link');
        Redoc.init(url);
    }

    // dynamically building navigation items
    var $list = document.getElementById('links_container');
    apis.forEach(function(api) {
        var $listitem = document.createElement('li');
        $listitem.setAttribute('data-link', api.url);
        $listitem.innerText = api.name;
        $listitem.addEventListener('click', onClick);
        $list.appendChild($listitem);
    });
</script>
</body>
</html>

Dalabad on 28 Mar 2018

👍3

All 7 comments

ou can add them using javascript like this:

<!DOCTYPE html>
<html>
<head>
<title>ReDoc APIs</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700" rel="stylesheet">

  <style>
    body {
      margin: 0;
      padding-top: 40px;
    }
  </style>
</head>
<body>

<!-- Top navigation placeholder -->
<nav>
  <ul id="links_container">
  </ul>
</nav>

<redoc scroll-y-offset="body > nav"></redoc>

<script src="https://cdn.jsdelivr.net/npm/redoc/bundles/redoc.standalone.js"></script>
<script>
    // list of APIs
    var apis = [
        {
            name: 'First API',
            url: 'http://domain/swagger.json'
        },
        {
            name: 'Second API',
            url: 'http://domain/swagger2.json'
        }
    ];

    // initially render first API
    Redoc.init(apis[0].url);

    function onClick() {
        var url = this.getAttribute('data-link');
        Redoc.init(url);
    }

    // dynamically building navigation items
    var $list = document.getElementById('links_container');
    apis.forEach(function(api) {
        var $listitem = document.createElement('li');
        $listitem.setAttribute('data-link', api.url);
        $listitem.innerText = api.name;
        $listitem.addEventListener('click', onClick);
        $list.appendChild($listitem);
    });
</script>
</body>
</html>

Dalabad on 28 Mar 2018

👍3

It would be better if it could merge the two TBH :O

koalalorenzo on 24 Sep 2018

@Dalabad's solution is one of the possible ones.
Another solution is to merge your specs yourself (using some scripts) before passing it to ReDoc.

Anyway, multiple specs support is out of scope for ReDoc.

RomanHotsiy on 24 Sep 2018

When using multiple APIs with ReDoc in the fashion that @Dalabad suggested above, is there any way to also use the theme option to style each API tab? Now that I've got the theme initializing properly (thanks @RomanGotsiy for your help in the other thread!), I'd like to take it to the next step and apply it to this scenario; but, each tab pulls its own spec url in the code above, so replacing that somehow with the Redoc.init script is beyond my ability here. Is it even possible, within this context? Thanks!

styvas on 8 Feb 2019

@RomanGotsiy is there an example that shows how to do a script https://stackoverflow.com/questions/54663148/how-do-you-use-redoc-with-multiple-files

trajano on 8 Mar 2019

Have you tried: https://github.com/Rebilly/ReDoc/issues/442#issuecomment-376917569?

RomanHotsiy on 11 Mar 2019

That does not work with the CLI as is.

What I ended up doing was

  "scripts": {
    "build": "mkdirp web_deploy && speccy resolve swagger.yaml > web_deploy/swagger.yaml && redoc-cli bundle -o web_deploy/index.html --cdn web_deploy/swagger.yaml",
    "test": "speccy lint swagger.yaml",
    "start": "redoc-cli serve -w swagger.yaml"
  },

redoc-cli serve works with the refs I just used speccy to lint and resolve to a single one for release.

trajano on 11 Mar 2019

👍1

Was this page helpful?

0 / 5 - 0 ratings