serve swagger-ui through the swagger-ui-dist; v2

.gitignore

@@ -45,3 +45,5 @@ yarn.lock
 
 package-lock.json
 
+static
+

.npmignore

@@ -0,0 +1,53 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency files and directories
+node_modules
+jspm_packages
+yarn.lock
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+# mac files
+.DS_Store
+
+# vim swap files
+*.swp
+
+package-lock.json
+
+# project specific
+*.tgz
+tap-snapshots
+test
+.travis.yml
+var

.travis.yml

@@ -5,6 +5,9 @@ node_js:
   - "6"
   - "4"
 
+before_script:
+  - npm run prepare:swagger-ui
+
 notifications:
   email:
     on_success: never

README.md

@@ -152,6 +152,16 @@ Sometimes you may need to hide a certain route from the documentation, just pass
 ### Security
 Global security definitions and route level security provide documentation only. It does not implement authentication nor route security for you. Once your authentication is implemented, along with your defined security, users will be able to successfully authenticate and interact with your API using the user interfaces of the documentation.
 
+<a name="development"></a>
+### Development
+In order to start development run:
+```
+npm i 
+npm run prepare:swagger-ui
+```
+
+So that [swagger-ui](https://github.com/swagger-api/swagger-ui) static folder will be generated for you.
+
 <a name="anknowledgements"></a>
 ## Acknowledgements
 

examples/dynamic.js

@@ -2,7 +2,7 @@
 
 const fastify = require('fastify')()
 
-fastify.register(require('./index'), {
+fastify.register(require('../index'), {
   swagger: {
     info: {
       title: 'Test swagger',

package.json

@@ -4,7 +4,9 @@
   "description": "Generate Swagger files automatically for Fastify.",
   "main": "index.js",
   "scripts": {
-    "test": "standard && tap test/*.js"
+    "prepare:swagger-ui": "node prepare-swagger-ui",
+    "test": "standard && tap test/*.js",
+    "prepublish": "npm run prepare:swagger-ui"
   },
   "repository": {
     "type": "git",
@@ -22,12 +24,15 @@
   "homepage": "https://github.com/fastify/fastify-swagger#readme",
   "devDependencies": {
     "fastify": "^1.1.1",
+    "fs-extra": "^5.0.0",
     "standard": "^11.0.0",
     "swagger-parser": "^4.0.2",
-    "tap": "^11.1.0"
+    "tap": "^11.1.0",
+    "swagger-ui-dist": "3.13.0"
   },
   "dependencies": {
     "fastify-plugin": "^0.2.2",
+    "fastify-static": "^0.8.0",
     "js-yaml": "^3.10.0"
   },
   "standard": {

prepare-swagger-ui.js

@@ -0,0 +1,39 @@
+const fs = require('fs')
+const fse = require('fs-extra')
+const swaggerUiAssetPath = require('swagger-ui-dist').getAbsoluteFSPath()
+const resolve = require('path').resolve
+
+fse.emptyDirSync(resolve('./static'))
+
+// since the original swagger-ui-dist folder contains non UI files
+const filesToCopy = ['favicon-16x16.png',
+  'favicon-32x32.png',
+  'index.html',
+  'oauth2-redirect.html',
+  'swagger-ui-bundle.js',
+  'swagger-ui-bundle.js.map',
+  'swagger-ui-standalone-preset.js',
+  'swagger-ui-standalone-preset.js.map',
+  'swagger-ui.css',
+  'swagger-ui.css.map',
+  'swagger-ui.js',
+  'swagger-ui.js.map']
+filesToCopy.forEach(filename => {
+  fse.copySync(`${swaggerUiAssetPath}/${filename}`, resolve(`./static/${filename}`))
+})
+
+const newIndex = fs.readFileSync(resolve('./static/index.html'), 'utf8')
+  .replace('window.ui = ui', `window.ui = ui
+
+  function resolveUrl (url) {
+      const anchor = document.createElement('a')
+      anchor.href = url
+      return anchor.href
+  }`)
+  .replace(
+    /url: "(.*)",/,
+    `url: resolveUrl('./json'),
+    oauth2RedirectUrl: resolveUrl('./oauth2-redirect.html'),`
+  )
+
+fse.writeFileSync(resolve('./static/index.html'), newIndex)

routes.js

@@ -1,23 +1,8 @@
 'use strict'
 
 const fp = require('fastify-plugin')
-const readFileSync = require('fs').readFileSync
 const resolve = require('path').resolve
 
-const files = {
-  'index.html': {type: 'text/html'},
-  'oauth2-redirect.html': {type: 'text/html'},
-  'swagger-ui.css': {type: 'text/css'},
-  'swagger-ui.css.map': {type: 'application/json'},
-  'swagger-ui-bundle.js': {type: 'application/javascript'},
-  'swagger-ui-bundle.js.map': {type: 'application/json'},
-  'swagger-ui-standalone-preset.js': {type: 'application/javascript'},
-  'swagger-ui-standalone-preset.js.map': {type: 'application/json'}
-}
-Object.keys(files).forEach(filename => {
-  files[filename].contents = readFileSync(resolve(__dirname, 'static', filename), 'utf8')
-})
-
 function fastifySwagger (fastify, opts, next) {
   fastify.route({
     url: '/documentation/json',
@@ -43,28 +28,15 @@ function fastifySwagger (fastify, opts, next) {
     url: '/documentation',
     method: 'GET',
     schema: { hide: true },
-    handler: (request, reply) => reply.redirect(request.raw.url + '/')
+    handler: (request, reply) => reply.redirect('./documentation/')
   })
 
-  fastify.route({
-    url: '/documentation/:file',
-    method: 'GET',
-    schema: { hide: true },
-    handler: sendStaticFiles
+  // serve swagger-ui with the help of fastify-static
+  fastify.register(require('fastify-static'), {
+    root: resolve('./static'),
+    prefix: `/documentation/`
   })
 
-  function sendStaticFiles (req, reply) {
-    if (!req.params.file) {
-      const file = files['index.html']
-      reply.type(file.type).send(file.contents)
-    } else if (files.hasOwnProperty(req.params.file)) {
-      const file = files[req.params.file]
-      reply.type(file.type).send(file.contents)
-    } else {
-      return reply.code(404).send(new Error('Not found'))
-    }
-  }
-
   next()
 }