Demonstrate a simple Webpack setup (#5185)

shaunluttin · web-flow · commit 75a2b9a5cc27 · 2020-06-15T11:20:08.000-07:00
diff --git a/docs/samples/webpack-getting-started/README.md b/docs/samples/webpack-getting-started/README.md
@@ -0,0 +1,9 @@
+
+Demo of Swagger UI with Webpack.
+
+Includes CSS and OAuth configuration.
+
+Usage
+
+    npm install
+    npm start
diff --git a/docs/samples/webpack-getting-started/index.html b/docs/samples/webpack-getting-started/index.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Getting Started</title>
+</head>
+<body>
+  <div id="swagger"></div>
+</body>
+</html>
diff --git a/docs/samples/webpack-getting-started/package-lock.json b/docs/samples/webpack-getting-started/package-lock.json
diff --git a/docs/samples/webpack-getting-started/package.json b/docs/samples/webpack-getting-started/package.json
@@ -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"
+  }
+}
diff --git a/docs/samples/webpack-getting-started/src/index.js b/docs/samples/webpack-getting-started/src/index.js
@@ -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'
+});
diff --git a/docs/samples/webpack-getting-started/src/swagger-config.yaml b/docs/samples/webpack-getting-started/src/swagger-config.yaml
@@ -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"
diff --git a/docs/samples/webpack-getting-started/webpack.config.js b/docs/samples/webpack-getting-started/webpack.config.js
@@ -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,
+  }
+};
diff --git a/docs/usage/installation.md b/docs/usage/installation.md
@@ -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`
