@sauce-api/visualizer-ui

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.