CODEWITHSUNDEEP
redoc
Aleks Ya
Aleks Ya

Reputation: 909

ReDoc cannot display a local OpenAPI definition file

ReDoc displays a remote openapi.json normally:

<?xml version="1.0" encoding="UTF-8"?><html>
  <head>
    <title>ReDoc - openapi.json</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <style>
body {
  margin: 0;
  padding: 0;
}
</style>
  </head>
  <body>
    <redoc spec-url="https://petstore3.swagger.io/api/v3/openapi.json"/>
    <script src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js">/**/</script>
  </body>
</html>

But if I save openapi.json locally

<?xml version="1.0" encoding="UTF-8"?><html>
  <head>
    <title>ReDoc - openapi.json</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <style>
body {
  margin: 0;
  padding: 0;
}
</style>
  </head>
  <body>
    <redoc spec-url="file:///tmp/openapi.json"/>
    <script src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js">/**/</script>
  </body>
</html>

it shows this error:


Something went wrong...
process is not defined

Stack trace

resolve@https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:8:301803
resolveExternalRef@https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:8:76499
4182/resolveDocument/<@https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:8:77225
4182/r</<@https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:8:74930
4182/r<@https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:8:74675
resolveDocument@https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:8:77178
3675/t.bundle/<@https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:8:33256
3675/r</<@https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:8:28947
3675/r<@https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:8:28692
3675/t.bundle@https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:8:33035
n@https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:117:579
Mu/</n/e<@https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:117:1021
Mu/</n/e<@https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:117:837
n@https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:117:1040
Mu/</<@https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:117:1261
Mu/</<@https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:117:1077
Mu/<@https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:117:1280
Il@https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:8:488153
53/t.unstable_runWithPriority@https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:8:517125
Wo@https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:8:428837
Rl@https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:8:487616
4448/Cl/<@https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:8:487527
D@https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:8:516186
53/w.port1.onmessage@https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js:8:514909

ReDoc Version: 2.0.0
Commit: 5fb4daa

How to display a local OpenAPI definition file with ReDoc?

Upvotes: 2

Views: 1727

Answers (3)

Teo Bebekis
Teo Bebekis

Reputation: 675

It's too late, but... here is my solution.

Rename swagger.json to swagger.js

Add the following line into the swagger.js as its first line

var spec =

Use the following HTML page in the same folder as the swagger.js

<!DOCTYPE html>
<html>
  <head />
  <body>
    <h1>Redoc in action</h1>
    <script src='swagger.js' type="text/javascript"></script>
    <script src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js"> </script>
    <div id="redoc-container"></div>
    <script>
      Redoc.init(spec, {
        "expandResponses": "200,400"
      }, document.getElementById('redoc-container'))
    </script>
  </body>
</html>

Upvotes: 0

Mohamed amine ben hassen
Mohamed amine ben hassen

Reputation: 866

the best solution i found is to download the standalone javascript file and add it to your springboot app under ressources/static/redoc.standalone.js and call it directly in your index.html. and it works like a charm !

you can download it from :https://cdn.jsdelivr.net/npm/[email protected]/bundles/redoc.standalone.js

Upvotes: 0

Domino
Domino

Reputation: 461

The easiest way is with Redocly CLI:

npx @redocly/cli preview-docs openapi.json

Source: https://redocly.com/docs/cli/commands/preview-docs/

Upvotes: 3

Related Questions