Add proxy example

Shopify · Nov 21, 2022 · 31c59c7 · 31c59c7
1 parent fabaa55
commit 31c59c7
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 11 deletions.
diff --git a/packages/hydrogen-remix/src/index.ts b/packages/hydrogen-remix/src/index.ts
@@ -8,6 +8,7 @@ export * from '@shopify/hydrogen';
 
 export {RESOURCE_TYPES, REQUIRED_RESOURCES} from './routing/types';
 export {notFoundMaybeRedirect} from './routing/redirect';
+export {proxyLiquidRoute} from './routing/proxy';
 
 export type LoaderArgs = DataFunctionArgs & {
   request: Request;

diff --git a/packages/hydrogen-remix/src/routing/proxy.ts b/packages/hydrogen-remix/src/routing/proxy.ts
@@ -0,0 +1,49 @@
+export async function proxyLiquidRoute(
+  request: Request,
+  storefrontDomain: string,
+  destinationPath: string,
+): Promise<Response> {
+  const clientIP = request.headers.get('X-Shopify-Client-IP');
+  const clientIPSig = request.headers.get('X-Shopify-Client-IP-Sig');
+
+  const headers = new Headers();
+  const host = `${storefrontDomain}.myshopify.com`;
+
+  const headersToFilterOut = ['connection'];
+
+  for (const [key, value] of request.headers.entries()) {
+    if (!headersToFilterOut.includes(key)) {
+      headers.append(
+        key,
+        swapHostname(value, {
+          hostname: new URL(request.url).host,
+          newHostname: host,
+        }),
+      );
+    }
+  }
+
+  if (!clientIP || !clientIPSig) {
+    console.warn(
+      'Proxying the online store is only available in Oxygen. This request is likely to be throttled.',
+    );
+  }
+
+  return fetch(
+    `https://${host}${
+      destinationPath.startsWith('/') ? destinationPath : '/' + destinationPath
+    }`,
+    {headers},
+  ).then((resp) => {
+    const headers = new Headers(resp.headers);
+    headers.delete('content-encoding');
+    return new Response(resp.body, {headers});
+  });
+}
+
+function swapHostname(
+  str: string,
+  {hostname, newHostname}: {hostname: string; newHostname: string},
+) {
+  return str.replaceAll(hostname, newHostname);
+}
diff --git a/templates/demo-store/app/entry.server.tsx b/templates/demo-store/app/entry.server.tsx
@@ -8,11 +8,6 @@ export default async function handleRequest(
   responseHeaders: Headers,
   remixContext: EntryContext,
 ) {
-  if (new URL(request.url).pathname === '/__health') {
-    // TODO: move this to @hydrogen/remix ?
-    return new Response(null, {status: 200});
-  }
-
   const body = await renderToReadableStream(
     <RemixServer context={remixContext} url={request.url} />,
   );

diff --git a/templates/demo-store/app/hooks/useDeferred.tsx b/templates/demo-store/app/hooks/useDeferred.tsx
@@ -24,5 +24,5 @@ export function useDeferred(resource: string, route: RouteMatch) {
   }
 
   // the [resource] was awaited in the loader return it
-  return route.data[resource];
+  return route.data?.[resource];
 }
diff --git a/templates/demo-store/app/root.tsx b/templates/demo-store/app/root.tsx
@@ -32,9 +32,9 @@ import type {LayoutData} from '~/data';
 export const handle = {
   // @todo - remove any and type the seo callback
   seo: (data: any) => ({
-    title: data.layout.shop.name,
+    title: data?.layout?.shop?.name,
     bypassTitleTemplate: true,
-    titleTemplate: `%s | ${data.layout.shop.name}`,
+    titleTemplate: `%s | ${data?.layout?.shop?.name}`,
   }),
 };
 
@@ -103,7 +103,7 @@ export function CatchBoundary() {
         <Links />
       </head>
       <body>
-        <Layout layout={root.data.layout}>
+        <Layout layout={root?.data?.layout}>
           {isNotFound ? (
             <NotFound type={caught.data?.pageType} />
           ) : (
@@ -129,7 +129,7 @@ export function ErrorBoundary({error}: {error: Error}) {
         <Links />
       </head>
       <body>
-        <Layout layout={root.data.layout}>
+        <Layout layout={root?.data?.layout}>
           <GenericError error={error} />
         </Layout>
         <Scripts />

diff --git a/templates/demo-store/oxygen.ts b/templates/demo-store/oxygen.ts
@@ -1,4 +1,4 @@
-import {createRequestHandler} from '@shopify/hydrogen-remix';
+import {createRequestHandler, proxyLiquidRoute} from '@shopify/hydrogen-remix';
 // The build remix app provided by remix build
 import * as remixBuild from 'remix-build';
 import {HydrogenSession} from '~/lib/session.server';
@@ -11,6 +11,12 @@ const requestHandler = createRequestHandler({
   shouldProxyAsset: () => false,
 });
 
+const storefrontConfig = {
+  publicStorefrontToken: '3b580e70970c4528da70c98e097c2fa0',
+  storeDomain: 'hydrogen-preview',
+  storefrontApiVersion: '2023-01',
+};
+
 export default {
   async fetch(
     request: Request,
@@ -25,6 +31,14 @@ export default {
 
     const session = await HydrogenSession.init(request, [env.SESSION_SECRET]);
 
+    if (new URL(request.url).pathname === '/proxy') {
+      return await proxyLiquidRoute(
+        request,
+        storefrontConfig.storeDomain,
+        '/pages/about',
+      );
+    }
+
     try {
       return await requestHandler(
         request,