Redocusaurus for OpenAPI

Introduction

Redocusaurus is a preset for Docusaurus designed to add your API documentation to your documentation site. Redoc displays OpenAPI with a unified look and feel with sidebar displaying each APIs, allows payloads to copy to clipboard, and displays status codes in a structured way.

Pre-requisites

You should have:

• Installed Docusaurus on your system.
• IDE like VS Code.
• Basic understanding on how to use VS Code.
• Valid OpenAPI file

To install Redoc on Docusaurus,

1. Open the docusaurus project(if not already opened).
2. Go to the directory where you have installed Docusaurus(using cd <project_name> ) and run the following command in your terminal.

    npm i --save redocusaurus
   

3. Go to docusaurus.config.ts file, and do the following modifications.

   // docusaurus.config.ts
       import type { Config } from '@docusaurus/types';
       import type * as Preset from '@docusaurus/preset-classic';
       import type * as Redocusaurus from 'redocusaurus'; // add this line.
   
       const config: Config = {
       // ...
       presets: [
           // .. Your other presets' config
             
           // Redocusaurus config that you need for the existing configuration.
           [   
           'redocusaurus',
           {
               openapi: {
               // Folder to scan for *.openapi.yaml files
               path: 'openapi',
               routeBasePath: '/api',      
               },
               specs: [
               // Optionally provide individual files/urls to load
               {
                   // Pass it a path to a local OpenAPI YAML file
                   spec: 'docs/api.yaml',       // The location of the yaml file
                   id: 'myapi', 
                   route: '/api', // route(endpoint or the url) where you want the API documentation to be displayed
               },
               // You can also pass it an OpenAPI spec URL
                  
               ]
               // Theme Options for modifying how redoc renders them
               theme: {
               // Change with your site colors
               primaryColor: '#1890ff',
               },
           },
           ] satisfies Redocusaurus.PresetEntry,
       ],
       // ... Rest of your config
       };
   
       export default config;
   

4. Save the file.(If you haven’t enabled AutoSave on your VS code.)

5. Run the following command to preview your site.

   npm run start
   

   After running npm run start, go to http://localhost:300/api, you should see your OpenAPI specificatoin displayed in Redoc’s UI.