Cloudflare Functions for better 404s (#1733)

Author: NullVoxPopuli

.github/workflows/ci.yml

@@ -161,7 +161,7 @@ jobs:
 ##############################################################
 
   DeployProduction:
-    name: "Deploy: Production"
+    name: "Deploy: Production ${{ matrix.app.name }}"
     if: github.ref == 'refs/heads/main' 
     runs-on: ubuntu-latest
     timeout-minutes: 15
@@ -181,12 +181,13 @@ jobs:
     steps:
       - uses: actions/download-artifact@v4
         name: deploy-prep-dist
-      - name: Publish ${{ matrix.app.id }}
-        uses: cloudflare/pages-action@v1.5.0
-        with:
-          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          projectName: ${{ matrix.app.cloudflareName }}
-          directory: ./deploy-prep-dist/${{ matrix.app.path }}
-          gitHubToken: ${{ secrets.GITHUB_TOKEN }}
-
+      - name: Publish ${{ matrix.app.name }}
+        run: |
+          npx wrangler pages publish \
+            ./deploy-prep-dist/${{ matrix.app.path }} \
+            --project-name=${{ matrix.app.cloudflareName }} \
+            --branch=${{ github.event.workflow_run.head_branch }} \
+            --commit-hash=${{ github.event.workflow_run.head_commit }}
+        env:
+          CLOUDFLARE_ACCOUNT_ID=${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          CLOUDFLARE_API_TOKEN=${{ secrets.CLOUDFLARE_API_TOKEN }}

.github/workflows/deploy-preview.yml

@@ -94,56 +94,39 @@ jobs:
       - run: echo "${{ github.event.workflow_run.pull_requests[0].number }}"
         id: number
 
-  DeployPreview_Tutorial:
-    name: "Deploy: Preview"
+  # We can know the URL ahead of time:
+  # https://<SHA>.limber-glimmer-tutorial.pages.dev
+  # https://<SHA>.limber-glimdown.pages.dev
+  DeployPreview:
+    name: "Deploy: Preview ${{ matrix.app.name }}"
     runs-on: ubuntu-latest
     timeout-minutes: 15
     needs: [Build]
     permissions:
       contents: read
-      deployments: write
-    outputs:
-      tutorialUrl: ${{ steps.deploy.outputs.url }}
+    strategy: 
+      matrix:
+        app: 
+        - { path: "./tutorial/dist", cloudflareName: "limber-glimmer-tutorial", name: "tutorial" }
+        - { path: "./repl/dist", cloudflareName: "limber-glimdown", name: "limber" }
     steps:
       - uses: actions/download-artifact@v4
         name: deploy-prep-dist
-      - id: deploy
-        uses: cloudflare/pages-action@v1.5.0
-        with:
-          branch: ${{ github.event.workflow_run.head_branch }}
-          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          projectName: limber-glimmer-tutorial
-          directory: ./deploy-prep-dist/tutorial/dist
-          gitHubToken: ${{ secrets.GITHUB_TOKEN }}
-
-  DeployPreview_Limber:
-    name: "Deploy: Preview"
-    runs-on: ubuntu-latest
-    timeout-minutes: 15
-    needs: [Build]
-    permissions:
-      contents: read
-      deployments: write
-    outputs:
-      limberUrl: ${{ steps.deploy.outputs.url }}
-    steps:
-      - uses: actions/download-artifact@v4
-        name: deploy-prep-dist
-      - id: deploy
-        uses: cloudflare/pages-action@v1.5.0
-        with:
-          branch: ${{ github.event.workflow_run.head_branch }}
-          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          projectName: limber-glimdown
-          directory: ./deploy-prep-dist/repl/dist
-          gitHubToken: ${{ secrets.GITHUB_TOKEN }}
+      - name: Preview ${{ matrix.app.name }}
+        run: |
+          npx wrangler pages deploy \
+            ./deploy-prep-dist/${{ matrix.app.path }} \
+            --project-name=${{ matrix.app.cloudflareName }} \
+            --branch=${{ github.event.workflow_run.head_branch }} \
+            --commit-hash=${{ github.event.workflow_run.head_commit }}
+        env:
+          CLOUDFLARE_ACCOUNT_ID=${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          CLOUDFLARE_API_TOKEN=${{ secrets.CLOUDFLARE_API_TOKEN }}
 
   PostComment:
     name: Post Preview URL as comment to PR
     runs-on: ubuntu-latest
-    needs: [DeployPreview_Limber, DeployPreview_Tutorial, determinePR]
+    needs: [DeployPreview, determinePR]
     permissions:
       pull-requests: write
     steps:
@@ -154,7 +137,7 @@ jobs:
           message: |+
             | Project   | Preview URL |
             | -------   | ----------- |
-            | Limber    | ${{ needs.DeployPreview_Limber.outputs.limberUrl }}   |
-            | Tutorial  | ${{ needs.DeployPreview_Tutorial.outputs.tutorialUrl }} |
+            | Limber    | https://${{ github.event.workflow_run.head_commit }}.limber-glimdown.pages.dev   |
+            | Tutorial  | https://${{ github.event.workflow_run.head_commit }}.limber-glimmer-tutorial.pages.dev |
 
             [Logs](https://github.com/NullVoxPopuli/limber/actions/runs/${{ github.run_id }}) 

apps/tutorial/.gitignore

@@ -9,6 +9,7 @@
 /node_modules/
 
 # misc
+.wrangler/
 /.env*
 /.pnp*
 /.sass-cache

apps/tutorial/package.json

@@ -15,6 +15,7 @@
     "lint": "pnpm -w exec lint",
     "lint:types": "glint",
     "lint:fix": "pnpm -w exec lint fix",
+    "cf": "cd dist && npx wrangler pages dev ./",
     "start": "concurrently 'ember serve' 'pnpm _syncPnpm --watch' --names 'serve,sync deps'",
     "test:ember": "ember test --test-port 0",
     "_syncPnpm": "pnpm sync-dependencies-meta-injected",

apps/tutorial/public/functions/_middleware.js

@@ -0,0 +1,60 @@
+export async function onRequest(context) {
+  try {
+    return errorIfNotFound(context);
+  } catch (err) {
+    return new Response(`${err.message}\n${err.stack}`, { status: 500 });
+  }
+}
+
+async function errorIfNotFound(context) {
+  const { request, next } = context;
+  const url = new URL(request.url);
+
+  /**
+    * If the extension ends with gjs
+    * or md, we check disk.
+    * otherwise we fallback to default behavior.
+    */
+  let isGJS = url.pathname.endsWith('.gjs');
+  let isGTS = url.pathname.endsWith('.gts');
+  let isMD = url.pathname.endsWith('.md');
+
+  let shouldCheck = isGJS || isGTS || isMD;
+
+  if (!shouldCheck) {
+    // let Cloudflare do its thing
+    return await next();
+  }
+
+  let defaultResponse = await next();
+  let { status, headers } = defaultResponse;
+
+  /**
+   * Server thinks things are not modified, there is nothing we can do.
+   * (So we need to make sure we return the correct thing the first time)
+   */
+  if (status === 304) {
+    return defaultResponse;
+  }
+
+  console.log(url, status, headers, headers.get('content-type'));
+  /**
+    * Cloudflare (because of how single-page-apps work)
+    * returns our index.html as a 200 whenever any URL is requested.
+    * Normally this is good, but because we have file extensions
+    * in our URLs, we *only* want to return those files.
+    * Not the index HTML
+    */
+  if (status <= 400 && headers.get('content-type').includes('text/html')) {
+  /**
+    * We return a 404
+    */
+    return new Response(JSON.stringify({
+      'intercepted-by': 'public/functions/_middleware.js',
+    }), {
+      status: 404,
+    });
+  }
+
+  return defaultResponse;
+}