Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add multiple swagger json file #442

Closed
ashkanRmk opened this issue Mar 24, 2018 · 7 comments
Closed

Add multiple swagger json file #442

ashkanRmk opened this issue Mar 24, 2018 · 7 comments

Comments

@ashkanRmk
Copy link

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

@Dalabad
Copy link
Contributor

Dalabad commented Mar 28, 2018

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>

@koalalorenzo
Copy link

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

@RomanHotsiy
Copy link
Member

@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.

@styvas
Copy link

styvas commented Feb 8, 2019

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!

@trajano
Copy link

trajano commented Mar 8, 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

@RomanHotsiy
Copy link
Member

Have you tried: #442 (comment)?

@trajano
Copy link

trajano commented Mar 11, 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants