initial react app

Author: sevki

README.md

@@ -1,23 +1,50 @@
-![Cloudflare GraphQL Gateway](https://www.cloudflare.com/img/products/cloudflare-workers/workers-api-responses.png)
+![Cloudflare GraphQL Gateway](/img/workers-react.png)
 
-Workers GraphQL Gateway Example
+Workers React Example
 ====
-Building a GraphQL Gateway allows you to make a single query, have GraphQL and take care of breaking it down to multiple rest calls. This example makes use of [dataloader](https://github.com/facebook/dataloader) to batch and cache the queries so a query with the same key will not be requested twice.
+Combining the power of Cloudflare Workers and React will allow you to render the
+same React code you would on the browser on Cloudflare Workers.
 
 ### Dependencies
 - [npm](https://www.npmjs.com/get-npm) or [yarn](https://yarnpkg.com/en/docs/install#debian-stable)
 
 ### Instructions
 
-- `npm install`
-- `npm run build`
+- `yarn preview`
 
-To open the Workers preview with the built Worker:
+#### Terraform
+If you'd like to use terraform to upload your worker scripts, you'll need a
+vars file with the following variables
+
+```hcl
+# Cloudflare variables
+variable "cloudflare_email" {
+  default = "dmr@bell-labs.com"
+}
+
+variable "cloudflare_token" {
+  default = "00000000000000000000000000"
+}
+
+# GCP exmaple variables
+variable "project" {
+  default = "my-project"
+}
+
+variable "zone" {
+  default = "buzzwords.app"
+}
+
+variable "bucket" {
+  default = "buzzwords"
+}
+```
+after adding this file as `vars.tf` (terraform will pickup any `.tf` extension file) do
+`terraform init` and `terraform apply`
 
-- `npm run preview`
 
 ### About
 [Cloudflare Workers](http://developers.cloudflare.com/workers/) allow you to write JavaScript which runs on all of Cloudflare's
 150+ global data centers.
 
-[GraphQL](https://graphql.org) provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.
+[React](https://reactjs.org) makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

deploy.tf

@@ -0,0 +1,21 @@
+provider "cloudflare" {
+  email = "${var.cloudflare_email}"
+  token = "${var.cloudflare_token}"
+}
+
+provider "google" {
+  credentials = "${file("storage.json")}"
+  project     = "${var.project}"
+}
+
+resource "cloudflare_worker_script" "buzzwords" {
+  zone    = "${var.zone}"
+  content = "${file("dist/worker.js")}"
+}
+
+resource "google_storage_bucket_object" "worker" {
+  name             = "worker.js"
+  content_encoding = "application/javascript"
+  content          = "${file("dist/worker.js")}"
+  bucket           = "${var.bucket}"
+}

img/workers-react.png

@@ -1,21 +1,30 @@
 {
-  "name": "workers-webpack",
+  "name": "workers-react-example",
   "version": "1.0.0",
   "description": "",
   "scripts": {
-    "build": "webpack -p --progress --colors",
-    "preview": "node ./scripts/open-preview.js"
+    "build": "webpack -p",
+    "terraform": "yarn build && terraform apply -auto-approve",
+    "deploy": "yarn build && node ./scripts/deploy.js",
+    "preview": "yarn build && node ./scripts/open-preview.js"
   },
   "main": "dist/worker.js",
-  "author": "",
-  "license": "MIT",
+  "author": "@sevki",
+  "license": "BSD",
   "devDependencies": {
     "node-fetch": "^2.2.0",
     "opn": "^5.3.0"
   },
   "dependencies": {
-    "dataloader": "^1.4.0",
-    "graphql": "^0.13.2",
+    "@babel/core": "^7.1.2",
+    "@babel/preset-env": "^7.1.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^8.0.4",
+    "babel-preset-env": "^1.7.0",
+    "react": "^16.6.1",
+    "react-dom": "^16.6.1",
+    "react-dom-server": "^0.0.5",
     "webpack": "^4.10.2",
     "webpack-cli": "^2.1.4"
   }

package.json

@@ -0,0 +1,33 @@
+const fs = require("fs");
+const util = require("util");
+const fetch = require("node-fetch");
+const readFile = util.promisify(fs.readFile);
+const opn = require("opn");
+
+async function deploy(script) {
+  let resp = await fetch(
+    "https://api.cloudflare.com/client/v4/accounts" +
+      node.env.CLOUDFLARE_ZONE +
+      "/workers/scripts/" +
+      node.env.CLOUDFLARE_SCRIPT,
+    {
+      method: "PUT",
+      headers: {
+        "cache-control": "no-cache",
+        "content-type": "text/javascript",
+        "X-Auth-Email": node.env.CLOUDFLARE_EMAIL,
+        "X-Auth-Key": node.env.CLOUDFLARE_KEY
+      },
+      body: script
+    }
+  );
+
+  let data = await resp.json();
+  return data;
+}
+
+readFile("dist/worker.js", "utf8").then(data => {
+  deploy(data).then(d => {
+    console.log(d.errors);
+  });
+});

scripts/deploy.js

@@ -22,7 +22,7 @@ async function newWorker(script) {
 readFile("dist/worker.js", "utf8").then(data => {
   newWorker(data).then(id =>
     opn(
-      "https://cloudflareworkers.com/#" + id + ":https://cloudflaregraphql.com",
+      "https://cloudflareworkers.com/#" + id + ":https://reactjs.org",
       { app: "chromium" }
     )
   );