Merge pull request #198 from Shopify/fd-fix-public-assets

fix: run Hydrogen middleware after Vite handles static assets
Shopify · Nov 11, 2021 · b1b5ba2 · b1b5ba2
2 parents ffb98a6 + 474a63a
commit b1b5ba2
Show file tree

Hide file tree

Showing 10 changed files with 36 additions and 20 deletions.
diff --git a/packages/cli/src/commands/create/app/templates/index-html.ts b/packages/cli/src/commands/create/app/templates/index-html.ts
@@ -7,7 +7,7 @@ export default function ({ifFeature}: TemplateOptions) {
 <html>
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     ${ifFeature(

diff --git a/packages/dev/index.html b/packages/dev/index.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Hydrogen App</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />

diff --git a/packages/dev/src/favicon.svg → packages/dev/public/favicon.svg b/packages/dev/src/favicon.svg → packages/dev/public/favicon.svg
diff --git a/packages/hydrogen/CHANGELOG.md b/packages/hydrogen/CHANGELOG.md
@@ -7,6 +7,7 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## Unreleased
 
+- fix: let Vite handle public assets in development
 - fix: new lines in hydration request break JSON.parse
 - fix(#201): normalize POSIX separators to support windows
 - fix: scroll to top on app first load

diff --git a/packages/hydrogen/src/framework/middleware.ts b/packages/hydrogen/src/framework/middleware.ts
@@ -141,9 +141,8 @@ function shouldInterceptRequest(
   isReactHydrationRequest: boolean
 ) {
   return (
-    (/text\/html|application\/hydrogen/.test(request.headers['accept'] ?? '') ||
-      isReactHydrationRequest) &&
-    request.url !== '/favicon.ico'
+    /text\/html|application\/hydrogen/.test(request.headers['accept'] ?? '') ||
+    isReactHydrationRequest
   );
 }
 

diff --git a/packages/hydrogen/src/framework/plugins/vite-plugin-hydrogen-middleware.ts b/packages/hydrogen/src/framework/plugins/vite-plugin-hydrogen-middleware.ts
@@ -25,19 +25,20 @@ export default (
         return await server.transformIndexHtml(url, indexHtml);
       }
 
-      server.middlewares.use(
-        hydrogenMiddleware({
-          dev: true,
-          shopifyConfig,
-          indexTemplate: getIndexTemplate,
-          getServerEntrypoint: async () =>
-            await server.ssrLoadModule(resolve('./src/entry-server')),
-          devServer: server,
-          cache: pluginOptions?.devCache
-            ? (new InMemoryCache() as unknown as Cache)
-            : undefined,
-        })
-      );
+      return () =>
+        server.middlewares.use(
+          hydrogenMiddleware({
+            dev: true,
+            shopifyConfig,
+            indexTemplate: getIndexTemplate,
+            getServerEntrypoint: async () =>
+              await server.ssrLoadModule(resolve('./src/entry-server')),
+            devServer: server,
+            cache: pluginOptions?.devCache
+              ? (new InMemoryCache() as unknown as Cache)
+              : undefined,
+          })
+        );
     },
   } as Plugin;
 };
diff --git a/packages/playground/server-components-worker/index.html b/packages/playground/server-components-worker/index.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Hydrogen App</title>
   </head>

diff --git a/.../server-components-worker/src/favicon.svg → ...rver-components-worker/public/favicon.svg b/.../server-components-worker/src/favicon.svg → ...rver-components-worker/public/favicon.svg
diff --git a/packages/playground/server-components/index.html b/packages/playground/server-components/index.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Hydrogen App</title>
   </head>

diff --git a/packages/playground/server-components/public/favicon.svg b/packages/playground/server-components/public/favicon.svg