@@ -0,0 +1,9 @@ | |||||
Demo of Swagger UI with Webpack. | |||||
Includes CSS and OAuth configuration. | |||||
Usage | |||||
npm install | |||||
npm start |
@@ -0,0 +1,10 @@ | |||||
<!doctype html> | |||||
<html> | |||||
<head> | |||||
<meta charset="UTF-8"> | |||||
<title>Getting Started</title> | |||||
</head> | |||||
<body> | |||||
<div id="swagger"></div> | |||||
</body> | |||||
</html> |
@@ -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" | |||||
} | |||||
} |
@@ -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' | |||||
}); |
@@ -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" |
@@ -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, | |||||
} | |||||
}; |
@@ -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` | ||||