Workers deploy (#331)

Author: exvuma

README.md

@@ -111,6 +111,13 @@ npm run now-deploy
 >
 > Fork or clone the example to your GitHub account. After adding your repo to Netlify you’ll get automatic builds & deploys when pushing to master. You can also add a [webhook](https://www.sanity.io/docs/webhooks) to get deploys on content changes.
 
+
+**Deploy on Cloudflare:** If you want to deploy the Gatsby site to Cloudflare we added a wrangler.toml and `workers-site/` to both studio and web.
+
+* Follow quickstart for wrangler: https://developers.cloudflare.com/workers/quickstart
+* Edit wrangler.toml's according to where you'd like studio and web to get deployed to
+* Run `npm run worker-deploy`
+
 ## Contributing
 
 1. [Fork it](https://https://github.com/sanity-io/example-company-website-gatsby-sanity-combo/fork)

package.json

@@ -15,6 +15,8 @@
     "graphql-deploy": "lerna run graphql-deploy",
     "lint": "lerna run lint",
     "now-deploy": "now && now alias",
+    "workers-start": "lerna run workers-start",
+    "workers-deploy": "lerna run workers-deploy",
     "postinstall": "lerna bootstrap",
     "sanity-deploy": "lerna run sanity-deploy",
     "start": "lerna run empty-cache && lerna run start --parallel",

studio/package.json

@@ -15,6 +15,8 @@
     "start": "sanity start",
     "build": "sanity build",
     "now-build": "npm run build",
+    "workers-start": "npm run build && wrangler preview --watch",
+    "workers-deploy": "npm run build && wrangler publish",
     "now-dev": "npm run build",
     "test": "sanity check"
   },

studio/sanity.json

@@ -1,7 +1,7 @@
 {
   "root": true,
   "api": {
-    "projectId": "7j9cnsfo",
+    "projectId": "9nhae6b7",
     "dataset": "production"
   },
   "project": {
@@ -26,4 +26,3 @@
     }
   ]
 }
-

studio/workers-site/.cargo-ok

@@ -0,0 +1,2 @@
+node_modules
+worker

studio/workers-site/.gitignore

@@ -0,0 +1,80 @@
+import { getAssetFromKV, mapRequestToAsset } from '@cloudflare/kv-asset-handler'
+
+/**
+ * The DEBUG flag will do two things that help during development:
+ * 1. we will skip caching on the edge, which makes it easier to
+ *    debug.
+ * 2. we will return an error message on exception in your Response rather
+ *    than the default 404.html page.
+ */
+const DEBUG = false
+
+addEventListener('fetch', event => {
+  try {
+    event.respondWith(handleEvent(event))
+  } catch (e) {
+    if (DEBUG) {
+      return event.respondWith(
+        new Response(e.message || e.toString(), {
+          status: 500,
+        }),
+      )
+    }
+    event.respondWith(new Response('Internal Error', { status: 500 }))
+  }
+})
+
+async function handleEvent(event) {
+  const url = new URL(event.request.url)
+  let options = {}
+
+  /**
+   * You can add custom logic to how we fetch your assets
+   * by configuring the function `mapRequestToAsset`
+   */
+  // options.mapRequestToAsset = handlePrefix(/^\/docs/)
+
+  try {
+    if (DEBUG) {
+      // customize caching
+      options.cacheControl = {
+        bypassCache: true,
+      }
+    }
+    return await getAssetFromKV(event, options)
+  } catch (e) {
+    // if an error is thrown try to serve the asset at 404.html
+    if (!DEBUG) {
+      try {
+        let notFoundResponse = await getAssetFromKV(event, {
+          mapRequestToAsset: req => new Request(`${new URL(req.url).origin}/404.html`, req),
+        })
+
+        return new Response(notFoundResponse.body, { ...notFoundResponse, status: 404 })
+      } catch (e) {}
+    }
+
+    return new Response(e.message || e.toString(), { status: 500 })
+  }
+}
+
+/**
+ * Here's one example of how to modify a request to
+ * remove a specific prefix, in this case `/docs` from
+ * the url. This can be useful if you are deploying to a
+ * route on a zone, or if you only want your static content
+ * to exist at a specific path.
+ */
+function handlePrefix(prefix) {
+  return request => {
+    // compute the default (e.g. / -> index.html)
+    let defaultAssetKey = mapRequestToAsset(request)
+    let url = new URL(defaultAssetKey.url)
+
+    // strip the prefix from the path for lookup
+    url.pathname = url.pathname.replace(prefix, '/')
+
+    // inherit all other props from the default request
+    return new Request(url.toString(), defaultAssetKey)
+  }
+}

studio/workers-site/index.js

@@ -0,0 +1,11 @@
+{
+  "private": true,
+  "name": "worker",
+  "version": "1.0.0",
+  "description": "A template for kick starting a Cloudflare Workers project",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "@cloudflare/kv-asset-handler": "^0.0.9"
+  }
+}

studio/workers-site/package-lock.json

@@ -0,0 +1,10 @@
+name = "studio"
+type = "webpack"
+account_id = ""
+workers_dev = true
+route = ""
+zone_id = ""
+
+[site]
+bucket = "dist"
+entry-point = "workers-site"