bubblev
/
swagger-ui
4
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Demonstrate a simple Webpack setup (#5185)

bubble
Shaun Luttin 4 years ago
committed by GitHub
parent
f3b253af1c
commit
75a2b9a5cc
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 6957 additions and 0 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +9
    -0
      docs/samples/webpack-getting-started/README.md
  2. +10
    -0
      docs/samples/webpack-getting-started/index.html
  3. +6814
    -0
      docs/samples/webpack-getting-started/package-lock.json
  4. +26
    -0
      docs/samples/webpack-getting-started/package.json
  5. +15
    -0
      docs/samples/webpack-getting-started/src/index.js
  6. +30
    -0
      docs/samples/webpack-getting-started/src/swagger-config.yaml
  7. +51
    -0
      docs/samples/webpack-getting-started/webpack.config.js
  8. +2
    -0
      docs/usage/installation.md

+ 9
- 0
docs/samples/webpack-getting-started/README.md View File

@@ -0,0 +1,9 @@

Demo of Swagger UI with Webpack.

Includes CSS and OAuth configuration.

Usage

npm install
npm start

+ 10
- 0
docs/samples/webpack-getting-started/index.html 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
- 0
docs/samples/webpack-getting-started/package-lock.json
File diff suppressed because it is too large
View File


+ 26
- 0
docs/samples/webpack-getting-started/package.json 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
- 0
docs/samples/webpack-getting-started/src/index.js 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
- 0
docs/samples/webpack-getting-started/src/swagger-config.yaml 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
- 0
docs/samples/webpack-getting-started/webpack.config.js 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
- 0
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.

_Note: we suggest using `swagger-ui` when your tooling makes it possible, as `swagger-ui-dist`


Write Preview
Loading…
Cancel
Save