From: Ardis Lu <ardisglu@gmail.com>
Date: Sun, 27 Mar 2022 00:38:12 +0000 (-0700)
Subject: Revert proxy to google-api-proxy
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=a48073056d98d910b34879892159c3487f44e491;p=ardislu.dev

Revert proxy to google-api-proxy
---

diff --git a/README.md b/README.md
index 8aaa258..8d91b28 100644
--- a/README.md
+++ b/README.md
@@ -12,8 +12,21 @@ I'm using Google Sheets and Google Docs as the CMS for this website. A Google Sh
 
 Once I fetch an article from the Google Docs API, the article is converted into markdown then converted into HTML using [marked](https://marked.js.org).
 
+## Serving actual 404 errors for invalid routes while still being a SPA 
+
+Cloudflare Pages automatically redirects any invalid routes in a directory to `404.html` if there is a `404.html` that exists in that directory. Since there's no `404.html` in the root, Cloudflare Pages will redirect all routes to `index.html`.
+
+I do a client-side redirect to `/errors/NotFound` for any routes that should have actually been a `404`, which Cloudflare Pages then serves a `404` with `/errors/404.html`.
+
+Here's how to replicate this behavior locally:
+1. Install Node.js (this is ONLY used for the web server; the website itself does not use Node.js)
+2. `npm i -g local-web-server`
+3. `ws --spa index.html --rewrite '/errors/(.*) -> /errors/404.html'`
+
 ## Local development
 
+**Update March 2022**: the following will work locally, but does not work when deployed to Cloudflare Pages (https://github.com/cloudflare/wrangler2/issues/710). I'm providing the steps below for future reference once the issue is resolved.
+
 Use the `wrangler` CLI to serve the static frontend and API at the same time. Provide credentials for a service account with access to the Google Docs as environment variables.
 
 From the [Cloudflare Pages documentation](https://developers.cloudflare.com/pages/platform/functions/#develop-and-preview-locally):
diff --git a/script.js b/script.js
index 966cdf3..f20c7b8 100644
--- a/script.js
+++ b/script.js
@@ -49,7 +49,8 @@ postLoader.insertAdjacentHTML('beforeend',
 
 /* Call the CMS controller to get all post metadata. Note: must call fetchPostContent to get content. */
 async function fetchPostMetadata() {
-  const proxyUrl = '/api';
+  const proxyUrl = 'https://script.google.com/macros/s/AKfycbzMHxwypbwsccBq6RH8LDCAOpM02C4gbkljbcKHKFsoQTRE-f4XTIyswiaO0vshs-Kr/exec';
+  // const proxyUrl = '/api'; // Works locally but not when deployed. Ref: https://github.com/cloudflare/wrangler2/issues/710
   const controllerId = '1pfGF8yBu3D0GPTezygLuzu3Cif8SkjhtG98nL-czlhc';
   const range = 'B3:I';
   const url = `${proxyUrl}?https://sheets.googleapis.com/v4/spreadsheets/${controllerId}/values/${range}`;
@@ -75,7 +76,8 @@ async function fetchPostMetadata() {
 /* Get content for the given path */
 async function fetchPostContent(path) {
   const post = posts.get(path);
-  const proxyUrl = '/api';
+  const proxyUrl = 'https://script.google.com/macros/s/AKfycbzMHxwypbwsccBq6RH8LDCAOpM02C4gbkljbcKHKFsoQTRE-f4XTIyswiaO0vshs-Kr/exec';
+  // const proxyUrl = '/api'; // Works locally but not when deployed. Ref: https://github.com/cloudflare/wrangler2/issues/710
   const url = `${proxyUrl}?https://docs.googleapis.com/v1/documents/${post.id}`;
 
   const mapping = {