[SOLVED] Redoc HTML rendering empty

Redoc HTML rendering empty

I'm trying to create a standalone HTML file in Redoc. Following the example from https://redocly.com/docs/redoc/deployment/html/, this is my HTML below.

Both HTML and openapi.json are inside docs folder. When I view this in a browser, the page is empty. So to test whether this works for any other JSON, I replaced my JSON with the JSON from https://petstore.swagger.io/v2/swagger.json and page is still empty.

<!DOCTYPE html>
<html>
  <head>
    <title>Test Redoc</title>
    <!-- needed for adaptive design -->
    <meta charset="utf-8"/>
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self' wss: ws:; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.redoc.ly; style-src 'self' 'unsafe-inline' 'unsafe-eval' https://fonts.googleapis.com;
      font-src 'self' https://fonts.googleapis.com; img-src 'self' blob: data:;"
    />
    <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">

    <!--
    Redoc doesn't change outer page styles
    -->
    <style>
      body {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <redoc spec='./openapi.json'></redoc>
    <script src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js"> </script>
  </body>
</html>

Is there anything missing from the above code? Thanks.

Solution

In the <redoc> tag, I think you need spec-url rather than spec.

If you want to use local files for your API description, note that you need to be serving the HTML, not just viewing a file in your web browser. (I think my first comment will solve your problem, but this second point does trip people up sometimes so I thought it was worth mentioning).