API Documentation using AWS S3 and Swagger-UI

One idea
One simple idea can innovate how you deliver to your stakeholders and customers

Getting Started 🚀

npm init
npm install css-loader json-loader style-loader yaml-loader webpack webpack-cli html-webpack-plugin -D
npm install swagger-ui
Project structure after installing our dependencies

Writing some code 🤓

Our source code and swagger specification
const SwaggerUI = require('swagger-ui');
require('swagger-ui/dist/swagger-ui.css');
const spec = require('./swagger-config.yaml');SwaggerUI({
spec,
dom_id: '#swagger',
});

Finishing touches

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Our API Documentation</title>
</head>
<body>
<!-- Custom HTML/navigation can be placed here -->
<div id="swagger"></div>
</body>
</html>
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const outputPath = path.resolve(__dirname, 'dist');module.exports = {
mode: 'development',
entry: {
// tell webpack where our code is
app: './src/index.js',
},
module: {
rules: [{
test: /\.yaml$/,
use: [
{ loader: 'json-loader' },
{ loader: 'yaml-loader' }
]
},
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
]
}]
},
plugins: [
// tell webpack to use our template we created
new HtmlWebpackPlugin({
template: 'index.html'
})
],
// tell webpack where to output the build code to - './dist'
output: {
filename: '[name].bundle.js',
path: outputPath,
}
};
Completed project

Build and deploying

"scripts": {
"build": "webpack"
},
Our created distribution
aws s3 cp ./dist s3://<BUCKET_NAME> — recursive
Our distribution objects in AWS S3

S3 configuration

Static website hosting configuration

--

--

--

Serverless Engineer/Architect UK —Helping others build resilient and maintainable software on AWS! 🚀 Support me @ https://www.buymeacoffee.com/rbulmer55 ☕️

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

VS Code Live Share Support, and more…

Should I learn React or AngularJS?

Word every day: Easiest

Journalism and Social Media: Misinformation & Consumer Media Literacy

Node Version Manager (NVM) on Steroids

React Context API for Extreme Noobs

Filling an array with a given value with JS

Algorithms and Data Structures Part VI

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
Robert Bulmer

Robert Bulmer

Serverless Engineer/Architect UK —Helping others build resilient and maintainable software on AWS! 🚀 Support me @ https://www.buymeacoffee.com/rbulmer55 ☕️

More from Medium

Frictionless Serverless Development: Part 3— Authentication

Blue/Green Deployment of API Using AWS Lambda and API Gateway

Authentication Using Amazon Cognito Hosted UI for Simple React Application (Part 1)

How to create a Serverless Framework Nodejs app with AWS DynamoDB CRUD operation?