kyy/swagger-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Demonstrate a simple Webpack setup (#5185)

Browse Source
This commit is contained in:
Shaun Luttin
2020-06-15 11:20:08 -07:00
committed by GitHub
parent f3b253af1c
commit 75a2b9a5cc
8 changed files with 6957 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
docs/samples/webpack-getting-started/README.md Normal file
View File

@@ -0,0 +1,9 @@
Demo of Swagger UI with Webpack.
Includes CSS and OAuth configuration.
Usage
npm install
npm start

10
docs/samples/webpack-getting-started/index.html Normal file
View File

@@ -0,0 +1,10 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Getting Started</title>
</head>
<body>
<div id="swagger"></div>
</body>
</html>

6814
docs/samples/webpack-getting-started/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

26
docs/samples/webpack-getting-started/package.json Normal file
View File

@@ -0,0 +1,26 @@
{
"name": "swagger-ui-webpack-getting-started",
"version": "0.0.1",
"description": "A simple setup of Swagger UI with Webpack",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server --open"
},
"author": "Shaun Luttin",
"license": "Apache-2.0",
"devDependencies": {
"clean-webpack-plugin": "^1.0.1",
"copy-webpack-plugin": "^4.6.0",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.29.3",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.1.14"
},
"dependencies": {
"css-loader": "^2.1.0",
"json-loader": "^0.5.7",
"style-loader": "^0.23.1",
"swagger-ui": "^3.20.7",
"yaml-loader": "^0.5.0"
}
}

15
docs/samples/webpack-getting-started/src/index.js Normal file
View File

@@ -0,0 +1,15 @@
import SwaggerUI from 'swagger-ui'
import 'swagger-ui/dist/swagger-ui.css';
const spec = require('./swagger-config.yaml');
const ui = SwaggerUI({
spec,
dom_id: '#swagger',
});
ui.initOAuth({
appName: "Swagger UI Webpack Demo",
// See https://demo.identityserver.io/ for configuration details.
clientId: 'implicit'
});

30
docs/samples/webpack-getting-started/src/swagger-config.yaml Normal file
View File

@@ -0,0 +1,30 @@
openapi: "3.0.0"
info:
version: "0.0.1"
title: "Swagger UI Webpack Setup"
description: "Demonstrates Swagger UI with Webpack including CSS and OAuth"
servers:
- url: "https://demo.identityserver.io/api"
description: "Identity Server test API"
components:
securitySchemes:
# See https://demo.identityserver.io/ for configuration details.
identity_server_auth:
type: oauth2
flows:
implicit:
authorizationUrl: "https://demo.identityserver.io/connect/authorize"
scopes:
api: "api"
security:
- identity_server_auth:
- api
paths:
/test:
get:
summary: "Runs a test request against the Identity Server demo API"
responses:
401:
description: "Unauthorized"
200:
description: "OK"

51
docs/samples/webpack-getting-started/webpack.config.js Normal file
View File

@@ -0,0 +1,51 @@
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const outputPath = path.resolve(__dirname, 'dist');
module.exports = {
mode: 'development',
entry: {
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: [
new CleanWebpackPlugin([
outputPath
]),
new CopyWebpackPlugin([
{
// Copy the Swagger OAuth2 redirect file to the project root;
// that file handles the OAuth2 redirect after authenticating the end-user.
from: 'node_modules/swagger-ui/dist/oauth2-redirect.html',
to: './'
}
]),
new HtmlWebpackPlugin({
template: 'index.html'
})
],
output: {
filename: '[name].bundle.js',
path: outputPath,
}
};

2
docs/usage/installation.md
View File

@@ -18,6 +18,8 @@ SwaggerUI({
}) })
``` ```
See the [Webpack Getting Started](../samples/webpack-getting-started) sample for details.
In contrast, **`swagger-ui-dist`** is meant for server-side projects that need assets to serve to clients. The module, when imported, includes an `absolutePath` helper function that returns the absolute filesystem path to where the `swagger-ui-dist` module is installed. In contrast, **`swagger-ui-dist`** is meant for server-side projects that need assets to serve to clients. The module, when imported, includes an `absolutePath` helper function that returns the absolute filesystem path to where the `swagger-ui-dist` module is installed.
_Note: we suggest using `swagger-ui` when your tooling makes it possible, as `swagger-ui-dist` _Note: we suggest using `swagger-ui` when your tooling makes it possible, as `swagger-ui-dist`