Allow serving static assets from baseDir (#108)

* feat: serve static files from baseDir * docs: how to use swagger-ui with bundling * fix lint: no-trailing-spaces * docs: update wording about bundling Co-authored-by: Frazer Smith <[email protected]> --------- Co-authored-by: Frazer Smith <[email protected]>
fastify · Dec 15, 2023 · 267f38f · 267f38f
1 parent 0287d28
commit 267f38f
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -319,6 +319,50 @@ fastify.register('@fastify/swagger-ui', {
 
 Note that this behavior is disabled by default in `@fastify/swagger-ui`.
 
+### Bundling
+
+To bundle Swagger UI with your application, the swagger-ui static files need to be copied to the server and the `baseDir` option set to point to the file directory.
+<details>
+<summary>Copy files with esbuild</summary>
+
+```js
+import { build } from 'esbuild'
+import { copy } from 'esbuild-plugin-copy'
+
+await build({
+  // ...
+  plugins: [
+    copy({
+      resolveFrom: 'cwd',
+      assets: {
+        from: ['node_modules/@fastify/swagger-ui/static/*'],
+        to: ['dist/static'],
+      },
+    }),
+  ],
+})
+```
+
+</details>
+
+<details>
+<summary>Copy files with docker</summary>
+
+```Dockerfile
+COPY ./node_modules/@fastify/swagger-ui/static /app/static
+```
+
+</details>
+
+#### Configure Swagger UI to use a custom baseDir
+Set the `baseDir` option to point to your folder.
+
+```js
+await fastify.register(require('@fastify/swagger-ui'), {
+  baseDir: isDev ? undefined : path.resolve('static'),
+})
+```
+
 <a name="license"></a>
 ## License
 

diff --git a/lib/routes.js b/lib/routes.js
@@ -202,7 +202,7 @@ function fastifySwagger (fastify, opts, done) {
 
   // serve swagger-ui with the help of @fastify/static
   fastify.register(fastifyStatic, {
-    root: path.join(__dirname, '..', 'static'),
+    root: opts.baseDir || path.join(__dirname, '..', 'static'),
     prefix: staticPrefix,
     decorateReply: false
   })

diff --git a/test/route.test.js b/test/route.test.js
@@ -373,6 +373,33 @@ test('/documentation/static/:file should send back the correct file', async (t)
   }
 })
 
+test('/documentation/static/:file should send back file from baseDir', async (t) => {
+  t.plan(2)
+  const fastify = Fastify()
+
+  const uiConfig = {
+    baseDir: resolve(__dirname, '..', 'examples', 'static')
+  }
+
+  await fastify.register(fastifySwagger, swaggerOption)
+  await fastify.register(fastifySwaggerUi, uiConfig)
+
+  {
+    const res = await fastify.inject({
+      method: 'GET',
+      url: '/documentation/static/example-logo.svg'
+    })
+    t.equal(res.statusCode, 200)
+    t.equal(
+      res.payload,
+      readFileSync(
+        resolve(__dirname, '..', 'examples', 'static', 'example-logo.svg'),
+        'utf8'
+      )
+    )
+  }
+})
+
 test('/documentation/static/:file 404', async (t) => {
   t.plan(2)
   const fastify = Fastify()