fix(ssr): Successfully serve static assets like favicon.png (#10455)

packages/vite/src/runFeServer.ts

@@ -146,6 +146,12 @@ export async function runFeServer() {
   // Mounting middleware at /rw-rsc will strip /rw-rsc from req.url
   app.use('/rw-rsc', createRscRequestHandler())
 
+  // Static asset handling MUST be defined before our catch all routing handler below
+  // otherwise it will catch all requests for static assets and return a 404.
+  // Placing this here defines our precedence for static asset handling - that we favor
+  // the static assets over any application routing.
+  app.use(express.static(rwPaths.web.distClient, { index: false }))
+
   const getStylesheetLinks = () => clientEntry.css || []
   const clientEntryPath = '/' + clientEntry.file
 
@@ -163,8 +169,6 @@ export async function runFeServer() {
   // We will likely move it up when we implement RSC Auth
   app.post('*', handleWithMiddleware())
 
-  app.use(express.static(rwPaths.web.distClient, { index: false }))
-
   app.listen(rwConfig.web.port)
   console.log(
     `Started production FE server on http://localhost:${rwConfig.web.port}`,

tasks/smoke-tests/dev/tests/staticAssets.spec.ts

@@ -0,0 +1,7 @@
+import { test } from '@playwright/test'
+
+import { runTestCases } from '../../shared/staticAssets'
+
+test.describe('Static assets', async () => {
+  await runTestCases()
+})

tasks/smoke-tests/rsc-dev/tests/staticAssets.spec.ts

@@ -0,0 +1,7 @@
+import { test } from '@playwright/test'
+
+import { runTestCases } from '../../shared/staticAssets'
+
+test.describe('Static assets', async () => {
+  await runTestCases()
+})

tasks/smoke-tests/rsc/tests/staticAssets.spec.ts

@@ -0,0 +1,7 @@
+import { test } from '@playwright/test'
+
+import { runTestCases } from '../../shared/staticAssets'
+
+test.describe('Static assets', async () => {
+  await runTestCases()
+})

tasks/smoke-tests/serve/tests/staticAssets.spec.ts

@@ -0,0 +1,7 @@
+import { test } from '@playwright/test'
+
+import { runTestCases } from '../../shared/staticAssets'
+
+test.describe('Static assets', async () => {
+  await runTestCases()
+})

tasks/smoke-tests/shared/staticAssets.ts

@@ -0,0 +1,34 @@
+import type { Page } from '@playwright/test'
+import { expect, test } from '@playwright/test'
+
+async function checkRobotsTxt(page: Page) {
+  const response = await page.goto('/robots.txt')
+  expect(response.ok()).toBe(true)
+  expect(response.headers()['content-type']).toContain('text/plain')
+
+  const content = await response.text()
+  expect(content).toContain('User-agent: *')
+}
+
+async function checkFaviconPng(page: Page) {
+  const response = await page.goto('/favicon.png')
+  expect(response.ok()).toBe(true)
+  expect(response.headers()['content-type']).toContain('image/png')
+
+  const content = await response.text()
+  expect(content).toContain('PNG')
+}
+
+type StaticAssetTestCase = [string, (page: Page) => Promise<void>]
+const staticAssetTests: StaticAssetTestCase[] = [
+  ['check robots.txt', checkRobotsTxt],
+  ['check favicon.png', checkFaviconPng],
+]
+
+export async function runTestCases() {
+  for (const [name, testFn] of staticAssetTests) {
+    test(name, async ({ page }) => {
+      await testFn(page)
+    })
+  }
+}

tasks/smoke-tests/streaming-ssr-dev/tests/staticAssets.spec.ts

@@ -0,0 +1,7 @@
+import { test } from '@playwright/test'
+
+import { runTestCases } from '../../shared/staticAssets'
+
+test.describe('Static assets', async () => {
+  await runTestCases()
+})

tasks/smoke-tests/streaming-ssr-prod/tests/staticAssets.spec.ts

@@ -0,0 +1,7 @@
+import { test } from '@playwright/test'
+
+import { runTestCases } from '../../shared/staticAssets'
+
+test.describe('Static assets', async () => {
+  await runTestCases()
+})