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):
/* Call the CMS controller to get all post metadata. Note: must call fetchPostContent to get content. */
async function fetchPostMetadata() {
- 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 proxyUrl = '/api';
const controllerId = '1pfGF8yBu3D0GPTezygLuzu3Cif8SkjhtG98nL-czlhc';
const range = 'B3:I';
const url = `${proxyUrl}?https://sheets.googleapis.com/v4/spreadsheets/${controllerId}/values/${range}`;
/* Get content for the given path */
async function fetchPostContent(path) {
const post = posts.get(path);
- 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 proxyUrl = '/api';
const url = `${proxyUrl}?https://docs.googleapis.com/v1/documents/${post.id}`;
const mapping = {