@cfuhriman/swagger-multi-ui v0.0.4
Swagger Multi UI
INFO
Serve multiple swagger ui instances on a single page applicate. Designed to be embedded as an npm module in other projects
USAGE
================
Adding library project
Example for expressjs
- install:
npm install --save cfuhriman/swagger-multi-ui
Add javascript and stylesheet to project
Option 1: Add the dist folder as static assets directy. Example using expressjs:
app.use(express.static(`${__dirname}/../node_modules/@cfuhriman/swagger-multi-ui/dist`));
Option 2: use a bundler and use as static assets. Example using parcelJs and expressjs:
# swagger-ui-multi.js import 'cfuhriman/swagger-multi-ui/dist/index.css'; require("cfuhriman/swagger-multi-ui");
# expressjs app.js app.use(express.static(`${__dirname}/../dist`)); // or whatever folder the bundler exports to
HTML
- reference the files in your html file (change names according to your option)
<html>
<head>
...
<link href="/swagger-ui-multi.css" rel="stylesheet">
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<script src="/swagger-ui-multi.js"></script>
</html>
ROUTES
Render the html file under the route that makes sense to your project setup, e.g., in express you can use it as your base route by placing it in the public static folder as index.html, or use a rendering engine such as handlebars or pug
create route "/api-definitions" that returns a json response in same format as the example below. The url references the endpoint that serves the swagger definition and can be hosted on the same server or a remote url.
Note - these settings use absolute routes. If using relative routes enable trailing hash on server
const definitions = {
"name": "xxxx API Suite",
"description": "For..",
"landingImage": "/images/cpm-logo.png",
"logo": "/images/cpm-logo.png",
"apis": [
{
"name": "My API 1",
"url": "/api-1"
},
{
"name": "My API 2",
"url": "/api-2"
},
{
"name": "My API 3",
"url": "/api-3"
}
]
};
apt.get('/api-definitions', (req, res) => {
res.json(definitions);
})
REFERENCE
This project was inspired by the starter template from nWright https://github.com/nate01776/swaggerhub-doc-portal
Want to contribute?
Pull requests welcome. Areas of known need include:
- UI enhancements
- Improvements to React code (not a React developer)
- Improvements to example, or additional examples