[V2] Implement dev server serveStaticFile

packages/pwa-kit-dev/src/ssr/server/build-dev-server.js

@@ -181,6 +181,40 @@ export const DevServerMixin = {
         })
     },
 
+    serveStaticFile(filePath, opts = {}) {
+        return (req, res) => {
+            req.app.__devMiddleware.waitUntilValid(() => {
+                const options = req.app.options
+                const webpackStats = req.app.__devMiddleware.context.stats.stats
+
+                const serverCompilation = webpackStats.find(
+                    // static files are copied into bundle
+                    // in the server webpack config
+                    (stat) => stat.compilation.name === SERVER
+                ).compilation
+                const {assetsInfo} = serverCompilation
+                const assetInfo = assetsInfo.get(filePath)
+
+                // if the asset is not in the webpack bundle, then
+                // return 404, we don't care whether or not the file
+                // exists in the local file system
+                if (!assetInfo) {
+                    res.sendStatus(404)
+                    return
+                }
+                const {sourceFilename} = assetInfo
+                const sourceFilePath = path.resolve(sourceFilename)
+
+                res.sendFile(sourceFilePath, {
+                    headers: {
+                        'cache-control': options.defaultCacheControl
+                    },
+                    ...opts
+                })
+            })
+        }
+    },
+
     serveServiceWorker(req, res) {
         req.app.__devMiddleware.waitUntilValid(() => {
             const sourceMap = req.path.endsWith('.map')

packages/pwa-kit-dev/src/ssr/server/build-dev-server.test.js

@@ -620,3 +620,59 @@ describe('DevServer persistent caching support', () => {
             })
     })
 })
+
+describe('DevServer serveStaticFile', () => {
+    // This isn't ideal! We need a way to test the dev middleware
+    // including the on demand webpack compiler. However, the webpack config and
+    // the Dev server assumes the code runs at the root of a project.
+    // When we run the tests, we are not in a project.
+    // We have a /test_fixtures project, but Jest does not support process.chdir(),
+    // nor mocking process.cwd(), so we mock the dev middleware for now.
+    // TODO: create a proper testing fixture project and run the tests in the isolated
+    // project environment.
+    const MockWebpackDevMiddleware = {
+        waitUntilValid: (cb) => cb(),
+        context: {
+            stats: {
+                stats: [
+                    {
+                        compilation: {
+                            name: 'server',
+                            assetsInfo: new Map([
+                                [
+                                    'static/favicon.ico',
+                                    {
+                                        sourceFilename: path.resolve(
+                                            testFixtures,
+                                            'app/static/favicon.ico'
+                                        )
+                                    }
+                                ]
+                            ])
+                        }
+                    }
+                ]
+            }
+        }
+    }
+
+    test('should serve static files', async () => {
+        const options = opts()
+        const app = NoWebpackDevServerFactory._createApp(options)
+        app.__devMiddleware = MockWebpackDevMiddleware
+        app.use('/test', NoWebpackDevServerFactory.serveStaticFile('static/favicon.ico'))
+        return request(app)
+            .get('/test')
+            .expect(200)
+    })
+
+    test('should return 404 if static file does not exist', async () => {
+        const options = opts()
+        const app = NoWebpackDevServerFactory._createApp(options)
+        app.__devMiddleware = MockWebpackDevMiddleware
+        app.use('/test', NoWebpackDevServerFactory.serveStaticFile('static/IDoNotExist.ico'))
+        return request(app)
+            .get('/test')
+            .expect(404)
+    })
+})

packages/template-typescript-minimal/app/ssr.js

@@ -40,7 +40,7 @@ const {handler} = runtime.createHandler(options, (app) => {
         res.send()
     })
 
-    app.get('/robots.txt', runtime.serveStaticFile('static/robots.txt'))
+    app.get('/favicon.ico', runtime.serveStaticFile('static/favicon.ico'))
 
     app.get('/worker.js(.map)?', runtime.serveServiceWorker)
     app.get('*', runtime.render)