https://www.akana.com/sites/akana/files/image/2019-06/image-blog-developing-api-strategy-600x400.jpg

Engaging audience with great API Developer Portals

Engaging your Developers and API Consumers

Generating the APIs Documentation while Coding

Docusaurus version 2.0

Basics in how to Integrate Swagger with your Doc's Portal

npx @docusaurus/init@next init mydevportal classic
├── blog
│ ├── 2019-05-28-hola.md
│ ├── 2019-05-29-hello-world.md
│ └── 2020-05-30-welcome.md
├── docs
│ ├── doc1.md
│ ├── doc2.md
│ ├── doc3.md
│ └── mdx.md
├── src
│ ├── css
│ │ └── custom.css
│ └── pages
│ ├── styles.module.css
│ └── index.js
├── static
│ └── img
├── docusaurus.config.js
├── package.json
├── README.md
├── sidebars.js
└── yarn.lock
$ npm run start
✔ Client
Compiled successfully in 8.25s

ℹ 「wds」: Project is running at http://localhost:3000/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: Content not from webpack is served from /Users/edgar/Documents/DEV-2/2020/mydevportal
ℹ 「wds」: 404s will fallback to /index.html

✔ Client
Compiled successfully in 94.08ms
Docusaurus Home Page
Doc in Dark mode

Adding Swagger/OAS Support to your Docusaurus Dev Portal

$ yarn add @docusaurus/mdx-loader
$ yarn add swagger-ui-react

Last Steps

Now, docusaurus is rendering the Swagger from Petstore
Day/White Theme

Conclusion

Just a dad, a husband, and an Old-School Brazilian Jiu-Jitsu Black-belt. Working in the technology field since 1997.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store