Demonstrate a simple Webpack setup (#5185)
This commit is contained in:
Shaun Luttin
9
docs/samples/webpack-getting-started/README.md
Normal file
9
docs/samples/webpack-getting-started/README.md
Normal 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
10
docs/samples/webpack-getting-started/index.html
Normal 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
6814
docs/samples/webpack-getting-started/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
26
docs/samples/webpack-getting-started/package.json
Normal file
26
docs/samples/webpack-getting-started/package.json
Normal 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
15
docs/samples/webpack-getting-started/src/index.js
Normal 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
30
docs/samples/webpack-getting-started/src/swagger-config.yaml
Normal 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
51
docs/samples/webpack-getting-started/webpack.config.js
Normal 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,
|
||||
}
|
||||
};
|
||||
@@ -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.
|
||||
|
||||
_Note: we suggest using `swagger-ui` when your tooling makes it possible, as `swagger-ui-dist`
|
||||
|
||||
Reference in New Issue
Block a user