chore(SLB-394): partial port of proxy and edge functions

apps/cms/gatsby-config.mjs

@@ -23,14 +23,3 @@ export const plugins = [
     },
   },
 ];
-
-/**
- * @type {import('gatsby').GatsbyConfig}
- */
-export default {
-  proxy: {
-    prefix: '/sites/default/files',
-    url: process.env.DRUPAL_EXTERNAL_URL || 'http://127.0.0.1:8888',
-  },
-  plugins,
-};

apps/cms/gatsby-node.mjs

@@ -6,20 +6,6 @@ import { resolve } from 'path';
  * @type {import('gatsby').GatsbyNode['createPages']}
  */
 export const createPages = async ({ actions }) => {
-  // Rewrite file requests to Drupal.
-  actions.createRedirect({
-    fromPath: '/sites/default/files/*',
-    toPath: `${process.env.GATSBY_DRUPAL_URL}/sites/default/files/:splat`,
-    statusCode: 200,
-  });
-
-  // Proxy Drupal GraphQL queries.
-  actions.createRedirect({
-    fromPath: '/graphql',
-    toPath: `${process.env.GATSBY_DRUPAL_URL}/graphql`,
-    statusCode: 200,
-  });
-
   // Create the content hub page in each language.
   Object.values(Locale).forEach((locale) => {
     actions.createPage({
@@ -37,22 +23,23 @@ export const createPages = async ({ actions }) => {
     statusCode: 404,
   });
 
-  // Proxy Drupal webforms.
-  Object.values(Locale).forEach((locale) => {
-    actions.createRedirect({
-      fromPath: `/${locale}/form/*`,
-      toPath: `${process.env.GATSBY_DRUPAL_URL}/${locale}/form/:splat`,
-      statusCode: 200,
-    });
-  });
-
-  // Additionally proxy themes and modules as they can have additional
-  // non-aggregated assets.
-  ['themes', 'modules', 'core/assets'].forEach((path) => {
-    actions.createRedirect({
-      fromPath: `/${path}/*`,
-      toPath: `${process.env.GATSBY_DRUPAL_URL}/${path}/:splat`,
-      statusCode: 200,
-    });
-  });
+  // @todo port Drupal webforms and other assets proxy with Cloudflare Functions.
+  // // Proxy Drupal webforms.
+  // Object.values(Locale).forEach((locale) => {
+  //   actions.createRedirect({
+  //     fromPath: `/${locale}/form/*`,
+  //     toPath: `${process.env.GATSBY_DRUPAL_URL}/${locale}/form/:splat`,
+  //     statusCode: 200,
+  //   });
+  // });
+  //
+  // // Additionally proxy themes and modules as they can have additional
+  // // non-aggregated assets.
+  // ['themes', 'modules', 'core/assets'].forEach((path) => {
+  //   actions.createRedirect({
+  //     fromPath: `/${path}/*`,
+  //     toPath: `${process.env.GATSBY_DRUPAL_URL}/${path}/:splat`,
+  //     statusCode: 200,
+  //   });
+  // });
 };

apps/website/functions/graphql.ts

@@ -0,0 +1,6 @@
+export const onRequest: PagesFunction = async (context) => {
+  const drupalExternalUrl =
+    // @ts-ignore
+    context.env.DRUPAL_EXTERNAL_URL || 'http://localhost:8888';
+  return fetch(`${drupalExternalUrl}${context.functionPath}`, context.request);
+};

apps/website/functions/index.ts

@@ -0,0 +1,15 @@
+export const onRequestGet: PagesFunction = async (context) => {
+  const availableLanguages = ['en', 'fr'];
+  const defaultLanguage = 'en';
+  const currentLanguage = context.request.headers
+    .get('accept-language')
+    ?.substring(0, 2);
+  let preferredLanguage = defaultLanguage;
+  if (currentLanguage && availableLanguages.includes(currentLanguage)) {
+    preferredLanguage = currentLanguage;
+  }
+  const statusCode = 302;
+  const url = new URL(context.request.url);
+  url.pathname = `/${preferredLanguage}/`;
+  return Response.redirect(url.toString(), statusCode);
+};

apps/website/functions/sites/default/files/[[file]].ts

@@ -0,0 +1,6 @@
+export const onRequestGet: PagesFunction = async (context) => {
+  const drupalExternalUrl =
+    // @ts-ignore
+    context.env.DRUPAL_EXTERNAL_URL || 'http://localhost:8888';
+  return fetch(`${drupalExternalUrl}${context.functionPath}`, context.request);
+};

apps/website/gatsby-node.mjs

@@ -97,21 +97,22 @@ export const createPages = async ({ actions }) => {
     });
   });
 
-  // Broken Gatsby links will attempt to load page-data.json files, which don't exist
-  // and also should not be piped into the strangler function. Thats why they
-  // are caught right here.
-  actions.createRedirect({
-    fromPath: '/page-data/*',
-    toPath: '/404',
-    statusCode: 404,
-  });
-
-  // Any unhandled requests are handed to strangler, which will try to pass
-  // them to all registered legacy systems and return 404 if none of them
-  // respond.
-  actions.createRedirect({
-    fromPath: '/*',
-    toPath: `/.netlify/functions/strangler`,
-    statusCode: 200,
-  });
+  // @todo port page-data 404 and strangler to Cloudflare Functions.
+  // // Broken Gatsby links will attempt to load page-data.json files, which don't exist
+  // // and also should not be piped into the strangler function. Thats why they
+  // // are caught right here.
+  // actions.createRedirect({
+  //   fromPath: '/page-data/*',
+  //   toPath: '/404',
+  //   statusCode: 404,
+  // });
+  //
+  // // Any unhandled requests are handed to strangler, which will try to pass
+  // // them to all registered legacy systems and return 404 if none of them
+  // // respond.
+  // actions.createRedirect({
+  //   fromPath: '/*',
+  //   toPath: `/.netlify/functions/strangler`,
+  //   statusCode: 200,
+  // });
 };

apps/website/package.json

@@ -33,6 +33,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@cloudflare/workers-types": "^4.20240524.0",
     "@netlify/edge-functions": "^2.3.1",
     "@netlify/functions": "^2.6.0",
     "@testing-library/react": "^14.1.2",
@@ -41,7 +42,8 @@
     "@types/serve-static": "^1.15.5",
     "happy-dom": "^12.10.3",
     "start-server-and-test": "^2.0.3",
-    "vitest": "^1.1.1"
+    "vitest": "^1.1.1",
+    "wrangler": "^3.57.2"
   },
   "scripts": {
     "test:static": "tsc --noEmit && eslint '**/*.{ts,tsx,js,jsx}' --ignore-path='./.gitignore'",
@@ -51,7 +53,9 @@
     "build:gatsby": "gatsby build",
     "build": "if node has-drupal.mjs; then pnpm build:drupal; else pnpm build:gatsby; fi",
     "start": "publisher",
-    "serve": "netlify dev --cwd=. --dir=public --port=8000",
+    "serve": "pnpm serve:netlify",
+    "serve:netlify": "netlify dev --cwd=. --dir=public --port=8000",
+    "serve:cloudflare": "wrangler pages dev public",
     "dev": "pnpm clean && publisher",
     "open": "open http://127.0.0.1:8000/___status/",
     "gatsby:develop": "ENABLE_GATSBY_REFRESH_ENDPOINT=true pnpm gatsby develop",

apps/website/tsconfig.json

@@ -14,7 +14,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "checkJs": true,
-    "jsx": "react"
+    "jsx": "react",
+    "types": ["@cloudflare/workers-types"]
   },
   "exclude": ["netlify", "node_modules", "public"]
 }