Migrate API from Heroku to Cloudflare workers

Author: amatiasq

Procfile

@@ -9,6 +9,9 @@
     "pwa": "npm run build && npm run serve",
     "lint": "eslint . --ext .ts",
     "prepare": "husky install",
+    "cloudflare:login": "wrangler login",
+    "api": "cd src/api && wrangler dev",
+    "api:deploy": "cd src/api && wrangler publish",
     "cypress": "cypress open",
     "e2e": "cypress run"
   },
@@ -41,6 +44,7 @@
     "uuid": "^3.4.0"
   },
   "devDependencies": {
+    "@cloudflare/wrangler": "^1.20.0",
     "@emotion/babel-plugin": "^11.9.5",
     "@types/react": "^17.0.1",
     "@types/react-dom": "^17.0.0",

package-lock.json

@@ -1,6 +1,7 @@
 import { getQueryParameter } from '../0-dom/getQueryParameter';
 import { Note } from '../2-entities/Note';
 import {
+  API_ORIGIN,
   AUTH_ENDPOINT,
   CLIENT_ID_DEV,
   CLIENT_ID_PROD,
@@ -10,6 +11,7 @@ import {
 } from '../config.json';
 import { GithubToken } from './GithubAuth';
 import { GithubUsername } from './models/GHApiUser';
+
 const GH_API = 'https://api.github.com';
 
 export const ghRepository = getQueryParameter('repo', 'pensieve-data');
@@ -34,10 +36,11 @@ export const appOrigin = getOrigin();
 export const ghScope = GH_SCOPE;
 export const ghClientId = isLocalHost ? CLIENT_ID_DEV : CLIENT_ID_PROD;
 
-const endpointOrigin = isLocalHost ? VALID_ORIGINS[0] : appOrigin;
+// TODO: we can't proxy the API calls since we moved to Cloudflare Workers
+// const endpointOrigin = isLocalHost ? VALID_ORIGINS[0] : appOrigin;
 
-export const ghAuthEndpoint = `${endpointOrigin}${AUTH_ENDPOINT}`;
-export const ghCommitEndpoint = `${endpointOrigin}${COMMIT_ENDPOINT}`;
+export const ghAuthEndpoint = `${API_ORIGIN}${AUTH_ENDPOINT}`;
+export const ghCommitEndpoint = `${API_ORIGIN}${COMMIT_ENDPOINT}`;
 
 function getOrigin() {
   const { origin } = location;

package.json

@@ -4,6 +4,8 @@ import { debugMethods } from '../../util/debugMethods';
 import { AsyncStore } from '../AsyncStore';
 import { WriteOptions } from '../helpers/WriteOptions';
 
+const MAX_ATTEMPTS = 2;
+
 interface Command<T extends keyof AsyncStore = keyof AsyncStore> {
   method: T;
   params: Parameters<AsyncStore[T]>;
@@ -99,7 +101,7 @@ export class ResilientOnlineStore implements AsyncStore {
     }
 
     for (const { method, params, attempts } of retrievePending()) {
-      if (attempts < 5) {
+      if (attempts < MAX_ATTEMPTS) {
         this.command(method, params, attempts);
       } else {
         console.warn(`Command ${method} failed ${attempts} times`, ...params);

src/3-github/gh-utils.ts

@@ -1,5 +1,6 @@
 {
   "root": true,
+  "sourceType": "module",
   "parserOptions": { "ecmaVersion": 2020 },
   "env": { "es6": true, "node": true },
   "extends": ["eslint:recommended"],

src/4-storage/middleware/ResilientOnlineStore.ts

@@ -0,0 +1,10 @@
+/target
+/dist
+**/*.rs.bk
+Cargo.lock
+bin/
+pkg/
+wasm-pack.log
+worker/
+node_modules/
+.cargo-ok

src/api/.eslintrc

@@ -1,26 +1,22 @@
-const axios = require('axios');
-const pipeAxiosToExpress = require('./_proxyAxiosToExpress');
+import { CLIENT_ID_DEV, CLIENT_ID_PROD } from '../config.json';
 
-const { CLIENT_ID_PROD, CLIENT_ID_DEV } = require('../config.json');
-const { CLIENT_SECRET_PROD, CLIENT_SECRET_DEV } = process.env;
-
-module.exports = async (req, res) => {
-  const { code, redirect_uri, state } = req.query;
+/**
+ * @param {Request} request
+ * @returns {Promise<Response>}
+ */
+export default async request => {
+  const { searchParams } = new URL(request.url);
+  const redirect_uri = searchParams.get('redirect_uri');
   const isDev = redirect_uri.startsWith('http://localhost');
 
-  const params = {
+  const url = 'https://github.com/login/oauth/access_token';
+  const params = new URLSearchParams({
     client_id: isDev ? CLIENT_ID_DEV : CLIENT_ID_PROD,
     client_secret: isDev ? CLIENT_SECRET_DEV : CLIENT_SECRET_PROD,
     redirect_uri,
-    state,
-    code,
-  };
-
-  console.log(params);
-
-  const response = axios.get('https://github.com/login/oauth/access_token', {
-    params,
+    state: searchParams.get('state'),
+    code: searchParams.get('code'),
   });
 
-  return pipeAxiosToExpress(response, req, res);
+  return fetch(`${url}?${params}`);
 };

src/api/.gitignore

@@ -1,32 +1,64 @@
-const axios = require('axios');
-const pipeAxiosToExpress = require('./_proxyAxiosToExpress');
-const { GH_API } = require('../config.json');
-
-module.exports = async (req, res) => {
-  const { token, owner, repo, branch, files, message } = req.body;
-  const promise = githubCommit({ token, owner, repo, branch, files, message });
-  pipeAxiosToExpress(promise, req, res);
+import { GH_API } from '../config.json';
+
+/**
+ * @param {Request} request
+ * @returns {Promise<Response>}
+ */
+export default async request => {
+  const body = await request.json();
+  const userAgent = request.headers.get('User-Agent');
+  const { token, owner, repo, branch, files, message } = body;
+
+  await githubCommit({
+    token,
+    owner,
+    repo,
+    branch,
+    files,
+    message,
+    userAgent,
+  });
 };
 
-async function githubCommit({ token, owner, repo, branch, files, message }) {
+async function githubCommit({
+  token,
+  owner,
+  repo,
+  branch,
+  files,
+  message,
+  userAgent,
+}) {
   const key = `${owner}/${repo}:${branch}`;
+  const baseURL = `${GH_API}/repos/${owner}/${repo}`;
+  const headers = { Authorization: `token ${token}`, 'User-Agent': userAgent };
 
   console.log(`${key} - Commit requests`);
 
-  const request = axios.create({
-    baseURL: `${GH_API}/repos/${owner}/${repo}`,
-    headers: { Authorization: `token ${token}` },
-  });
+  async function request(method, url, json) {
+    const response = await fetch(`${baseURL}${url}`, {
+      method,
+      headers,
+      body: JSON.stringify(json),
+    });
+
+    try {
+      return await response.json();
+    } catch (err) {
+      console.log(`[Error from Github] ${await response.text()}`);
+      throw err;
+    }
+  }
 
   const items = prepareFilesForRequest(files);
 
   console.log(`${key} - Requesting ref...`);
-  const { data: ref } = await request.get(`/git/refs/heads/${branch}`);
+  const ref = await request('GET', `/git/refs/heads/${branch}`);
   console.log(`${key} - Creating tree...`);
 
   // Create tree
   // https://docs.github.com/en/free-pro-team@latest/rest/reference/git#create-a-tree
-  const { data: tree } = await request.post(`/git/trees`, {
+  const tree = await request('POST', `/git/trees`, {
     tree: items,
     base_tree: ref.object.sha,
   });
@@ -35,7 +67,7 @@ async function githubCommit({ token, owner, repo, branch, files, message }) {
 
   // Create commit
   // https://docs.github.com/en/free-pro-team@latest/rest/reference/git#create-a-commit
-  const { data: commit } = await request.post(`/git/commits`, {
+  const commit = await request('POST', `/git/commits`, {
     message,
     tree: tree.sha,
     parents: [ref.object.sha],
@@ -45,14 +77,12 @@ async function githubCommit({ token, owner, repo, branch, files, message }) {
 
   // Update a reference
   // https://docs.github.com/en/free-pro-team@latest/rest/reference/git#update-a-reference
-  return request
-    .post(`/git/refs/heads/${branch}`, {
-      sha: commit.sha,
-      force: true,
-    })
-    .finally(() => {
-      console.log(`${key} - Complete`);
-    });
+  return request('POST', `/git/refs/heads/${branch}`, {
+    sha: commit.sha,
+    force: true,
+  }).finally(() => {
+    console.log(`${key} - Complete`);
+  });
 }
 
 function prepareFilesForRequest(files) {

src/api/_proxyAxiosToExpress.js

@@ -1,24 +1,67 @@
-const express = require('express');
-const app = express();
-const bodyParser = require('body-parser');
-const cors = require('cors');
+import { VALID_ORIGINS } from '../config.json';
+import auth from './auth.js';
+import commit from './commit.js';
 
-const port = process.env.PORT;
+const handlers = { auth, commit };
 
-if (!port) {
-  throw new Error('Environment variables not set');
+addEventListener('fetch', event =>
+  event.respondWith(handleCorsRequest(event.request)),
+);
+
+/**
+ * @param {Request} request
+ * @returns {Promise<Response>}
+ */
+async function handleCorsRequest(request) {
+  const method = request.method;
+  const { origin } = new URL(request.url);
+
+  console.log({ origin });
+
+  const result = isValidOrigin(origin)
+    ? await handleRequest(request).catch(handleError)
+    : new Response('Who the fck are you?', { status: 403 });
+
+  const response =
+    result instanceof Response
+      ? new Response(result.body, result)
+      : new Response(JSON.stringify(result), { status: 200 });
+
+  response.headers.set('Access-Control-Allow-Origin', '*');
+  response.headers.set('Access-Control-Allow-Methods', method);
+  response.headers.set('Access-Control-Max-Age', '86400');
+
+  return response;
 }
 
-app.use(cors());
+/**
+ * @param {Request} request
+ * @returns {Promise<Response>}
+ */
+async function handleRequest(request) {
+  const { pathname } = new URL(request.url);
+  const [, firstPart] = pathname.split('/');
+  const handler = handlers[firstPart];
 
-app.post('/auth', require('./auth'));
+  console.log(
+    `Request to ${pathname} - ${handler ? handler.name : 'No handler'}`,
+  );
 
-app.post(
-  '/commit',
-  bodyParser.json({ limit: '50mb', type: 'text/plain' }),
-  require('./commit'),
-);
+  if (!handler) {
+    return new Response(`Unknown route ${pathname}`, { status: 404 });
+  }
 
-app.listen(port, () =>
-  console.log(`Hello world app listening on port ${port}!`),
-);
+  return handler(request);
+}
+
+function isValidOrigin(origin) {
+  return (
+    origin === 'localhost' ||
+    origin === 'https://pensieve-api.amatiasq.workers.dev' ||
+    VALID_ORIGINS.includes(origin)
+  );
+}
+
+function handleError(err) {
+  return new Response(err.stack, { status: 500 });
+}

src/api/auth.js

@@ -0,0 +1,5 @@
+{
+  "name": "pensieve-api",
+  "version": "1.0.0",
+  "main": "index.js"
+}

src/api/commit.js

@@ -0,0 +1,6 @@
+name = "pensieve-api"
+type = "webpack"
+
+account_id = "a030a3e94508b912c6b31b84fd4b4041"
+workers_dev = true
+compatibility_date = "2022-12-05"

src/api/index.js

@@ -5,5 +5,6 @@
   "COMMIT_ENDPOINT": "/commit",
   "CLIENT_ID_DEV": "c55d2c46c215f9a4c3cb",
   "CLIENT_ID_PROD": "09580e62d66243b6b09d",
+  "API_ORIGIN": "https://pensieve-api.amatiasq.workers.dev",
   "VALID_ORIGINS": ["https://pensieve.amatiasq.com"]
 }