Merge pull request #646 from Shopify/liz/fix-deploys-on-vercel

Fix deploys to Vercel
Shopify · Feb 16, 2024 · 9e7902f · 9e7902f
2 parents b9b979e + f1f80a6
commit 9e7902f
Show file tree

Hide file tree

Showing 13 changed files with 278 additions and 16 deletions.
diff --git a/.changeset/new-moons-nail.md b/.changeset/new-moons-nail.md
@@ -0,0 +1,9 @@
+---
+"@shopify/shopify-app-remix": minor
+---
+
+Introduce Vercel adapter to fix deploys to Vercel.
+
+Since v.9.0.0 of `@shopify/shopify-api` developers deploying their Remix apps to Vercel have encountered errors.
+
+Developers looking to deploy their application to Vercel should replace references to import `"@shopify/shopify-app-remix/adapters/node";` with `"@shopify/shopify-app-remix/adapters/vercel";` to properly load the required global variables.
diff --git a/loom.config.ts b/loom.config.ts
@@ -62,9 +62,40 @@ function forkRemixProject(projects: Config.InitialProjectOptions[]) {
         [
           {
             ...project,
-            displayName: 'shopify-app-remix-server',
+            setupFilesAfterEnv: [
+              ...(project.setupFilesAfterEnv ?? []),
+              '../../packages/shopify-app-remix/src/server/adapters/node/__tests__/setup-jest.ts',
+            ],
+            displayName: 'shopify-app-remix-server-node',
+            testEnvironment: 'node',
+            testPathIgnorePatterns: [
+              'src/react',
+              'src/server/adapters/__tests__',
+            ],
+          },
+        ],
+        [
+          {
+            ...project,
+            setupFilesAfterEnv: [
+              ...(project.setupFilesAfterEnv ?? []),
+              '../../packages/shopify-app-remix/src/server/adapters/vercel/__tests__/setup-jest.ts',
+            ],
+            displayName: 'shopify-app-remix-server-vercel',
+            testEnvironment: 'node',
+            testPathIgnorePatterns: [
+              'src/react',
+              'src/server/adapters/__tests__',
+            ],
+          },
+        ],
+        [
+          {
+            ...project,
+            testRegex: undefined,
+            displayName: 'shopify-app-remix-server-adapters',
+            testMatch: ['<rootDir>/src/server/adapters/__tests__/**/*'],
             testEnvironment: 'node',
-            testPathIgnorePatterns: ['src/react'],
           },
         ],
       );

diff --git a/packages/shopify-app-remix/loom.config.ts b/packages/shopify-app-remix/loom.config.ts
@@ -9,7 +9,7 @@ export default createPackage((pkg) => {
 
   const basePath = `${__dirname}/src/server/adapters`;
   fs.readdirSync(basePath, {withFileTypes: true})
-    .filter((dirent) => dirent.isDirectory())
+    .filter((dirent) => dirent.isDirectory() && dirent.name !== '__tests__')
     .forEach((dirent) => {
       pkg.entry({root: `./src/server/adapters/${dirent.name}/index.ts`});
     });

diff --git a/packages/shopify-app-remix/package.json b/packages/shopify-app-remix/package.json
@@ -64,6 +64,7 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
+    "@remix-run/node": "^2.6.0",
     "@remix-run/server-runtime": "^2.5.1",
     "@shopify/admin-api-client": "^0.2.3",
     "@shopify/shopify-api": "^9.3.1",

diff --git a/packages/shopify-app-remix/src/server/__test-helpers/index.ts b/packages/shopify-app-remix/src/server/__test-helpers/index.ts
@@ -1,6 +1,3 @@
-import '@shopify/shopify-api/adapters/web-api';
-import '../adapters/node';
-
 export * from './const';
 export * from './expect-admin-api-client';
 export * from './expect-begin-auth-redirect';

diff --git a/packages/shopify-app-remix/src/server/__test-helpers/request-mock.ts b/packages/shopify-app-remix/src/server/__test-helpers/request-mock.ts
@@ -84,9 +84,8 @@ export async function validateMocks() {
     }
 
     if (request?.body) {
-      const bodyString = new TextDecoder('utf-8').decode(
-        request.body as any as Buffer,
-      );
+      const bodyBuffer = await stream2buffer(request.body);
+      const bodyString = new TextDecoder('utf-8').decode(bodyBuffer);
 
       expected.body = expect.stringContaining(bodyString);
       actual.body = init?.body?.toString();
@@ -137,6 +136,22 @@ export async function validateMocks() {
   }
 }
 
+async function stream2buffer(
+  stream: ReadableStream<Uint8Array>,
+): Promise<Buffer> {
+  const buffers = [];
+
+  for await (const data of stream as any) {
+    if (typeof data === 'number') {
+      buffers.push(Uint8Array.from([data]));
+    } else {
+      buffers.push(data);
+    }
+  }
+
+  return Buffer.concat(buffers);
+}
+
 export function skipMockChecks(value: boolean) {
   skipMockChecksFlag = value;
 }

diff --git a/...ode/__tests__/node-app-bridge-url.test.ts → ...ers/__tests__/node-app-bridge-url.test.ts b/...ode/__tests__/node-app-bridge-url.test.ts → ...ers/__tests__/node-app-bridge-url.test.ts
@@ -1,5 +1,5 @@
-import {APP_BRIDGE_URL} from '../../../authenticate/const';
-import {appBridgeUrl} from '../../../authenticate/helpers';
+import {APP_BRIDGE_URL} from '../../authenticate/const';
+import {appBridgeUrl} from '../../authenticate/helpers';
 
 describe('node setup import', () => {
   /* eslint-disable no-process-env */
@@ -9,7 +9,7 @@ describe('node setup import', () => {
     process.env.APP_BRIDGE_URL = 'http://localhost:9876/app-bridge.js';
 
     // WHEN
-    await require('../index');
+    await require('../node/index');
 
     // THEN
     expect(appBridgeUrl()).toEqual(process.env.APP_BRIDGE_URL);

diff --git a/...rver/adapters/node/__tests__/node.test.ts → ...rc/server/adapters/__tests__/node.test.ts b/...rver/adapters/node/__tests__/node.test.ts → ...rc/server/adapters/__tests__/node.test.ts
@@ -19,7 +19,7 @@ describe('node setup import', () => {
     expect(cryptoBefore).toBeUndefined();
 
     // WHEN
-    await require('../index');
+    await require('../node');
 
     // THEN
     const cryptoAfter = (await require('@shopify/shopify-api/runtime')).crypto;

diff --git a/packages/shopify-app-remix/src/server/adapters/node/__tests__/setup-jest.ts b/packages/shopify-app-remix/src/server/adapters/node/__tests__/setup-jest.ts
@@ -0,0 +1,10 @@
+import fetchMock from 'jest-fetch-mock';
+import '@shopify/shopify-api/adapters/web-api';
+import '..';
+
+// Globally disable fetch requests so we don't risk making real ones
+fetchMock.enableMocks();
+
+beforeEach(() => {
+  fetchMock.mockReset();
+});
diff --git a/packages/shopify-app-remix/src/server/adapters/vercel/__tests__/setup-jest.ts b/packages/shopify-app-remix/src/server/adapters/vercel/__tests__/setup-jest.ts
@@ -0,0 +1,12 @@
+import fetchMock from 'jest-fetch-mock';
+import '@shopify/shopify-api/adapters/web-api';
+import '..';
+import {setAbstractFetchFunc} from '@shopify/shopify-api/runtime';
+
+// Globally disable fetch requests so we don't risk making real ones
+fetchMock.enableMocks();
+
+beforeEach(() => {
+  fetchMock.mockReset();
+});
+setAbstractFetchFunc(fetch);
diff --git a/packages/shopify-app-remix/src/server/adapters/vercel/index.ts b/packages/shopify-app-remix/src/server/adapters/vercel/index.ts
@@ -0,0 +1,13 @@
+import {setAbstractFetchFunc} from '@shopify/shopify-api/runtime';
+import {installGlobals} from '@remix-run/node';
+
+import '../node';
+
+installGlobals();
+
+const fetchFunc = fetch;
+setAbstractFetchFunc(async (...args) => {
+  const response = await fetchFunc.apply(this, args);
+
+  return response;
+});
diff --git a/packages/shopify-app-remix/src/server/boundary/__tests__/headers.test.ts b/packages/shopify-app-remix/src/server/boundary/__tests__/headers.test.ts
@@ -61,6 +61,6 @@ describe('Headers boundary', () => {
     const result = boundary.headers(headers as any);
 
     // THEN
-    expect(result).toEqual(new Headers());
+    expect(result.entries()).toEqual(new Headers().entries());
   });
 });