A Swagger UI esque visualizer for Sauce API

Usage

Consuming in Sauce API would look similar to:

    import { visualizerUI, setupVisualizerUI } from "@sauce-api/visualizer-ui";

    setupVisualizerUI(this.app);
    this.app.get("/docs", async (req, res, next)=>{
        const appRoutes = await new Routes(sauceConfig)
        .getFormattedRoutes(true);

        const ui = await visualizerUI({
            appRoutes,
            appName: "Visualizer",
            apiBaseUrl: process.env.REACT_APP_BASE_URL,
            apiHealthcheckPath: process.env.REACT_APP_DOCS_HEALTHCHECK_ENDPOINT,
            defaultTheme: "dark",
            brandIcon: "bullseye",
            brandImageUrl: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"
        });
        res.send(ui);
    });

Options

Visualizer config

Example

     import { VisualizerConfig } from "./@types/VisualizerConfig";

    const visualizerConfig = {
        appRoutes: [],
        appName: "Visualizer",
        apiBaseUrl: process.env.REACT_APP_BASE_URL,
        apiHealthcheckPath: process.env.REACT_APP_DOCS_HEALTHCHECK_ENDPOINT,
        defaultTheme: "dark",
        brandIcon: "bullseye",
        brandImageUrl: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"
    };

| Config Property | Description | | ------ | ------ | | appRoutes | An Array of formatted Sauce API route objects. See Sauce API for details on formatted routes| | appName | The App name that will be displayed in the docs UI | | apiBaseUrl | The base URL for the API you're displaying docs for. Ex: https://<some-sauce-api>.com | | apiHealthcheckPath | If you have a healthcheck endpoint, you can supply it here and the UI will do a healthcheck for you. This value will be appended to the apiBaseUrl. Example: /healthcheck | | defaultTheme | The default theme to display | | brandIcon | You can supply a (free) font-awesome icon name here to display in the upper left corner. | | brandImageUrl | This is an alternative to the brandIcon value. You can supply your own image here to be displayed in the upper left corner |

Supported Route Icons

| Icon | Requirements | | ------ | ------ | | Admin Shield | Expects a route to have a policy named isAdmin | | Authentication Lock | Expects a route to have a policy named isAuthenticated |

Development

(Requires Docker)

Running

Run make run and the app will come up on http://localhost:3001

Bundling

Run make package

Getting Started with Create React App

This project was bootstrapped with Create React App.