initial commit

.gitignore

@@ -0,0 +1,10 @@
+node_modules/
+worker/
+.cargo-ok
+package-lock.json
+.idea
+.env*
+local.js
+assets/pages.js
+assets/partials.js
+.wrangler

.husky/pre-commit

@@ -0,0 +1,6 @@
+# .husky/pre-commit
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+sh ./.husky/precommit.sh
+

.husky/precommit.sh

@@ -0,0 +1,10 @@
+#!/bin/sh
+FILE="./client/wrangler.toml"
+if [ -f "$FILE" ]; then
+  sed -i -e 's/account_id = ".*"/account_id = "**********"/' $FILE
+  echo "$FILE updated"
+  git add -A
+else
+  echo "$FILE does not exist."
+fi
+

client/README.md

@@ -0,0 +1,25 @@
+## Router
+
+This template demonstrates using the [`itty-router`](https://github.com/kwhitley/itty-router) package to add routing to your Cloudflare Workers.
+
+[`index.js`](https://github.com/cloudflare/worker-template-router/blob/master/index.js) is the content of the Workers script.
+
+#### Wrangler
+
+You can use [wrangler](https://github.com/cloudflare/wrangler) to generate a new Cloudflare Workers project based on this template by running the following command from your terminal:
+
+```
+wrangler generate myapp https://github.com/cloudflare/worker-template-router
+```
+
+Before publishing your code you need to edit `wrangler.toml` file and add your Cloudflare `account_id` - more information about configuring and publishing your code can be found [in the documentation](https://developers.cloudflare.com/workers/learning/getting-started#7-configure-your-project-for-deployment).
+
+Once you are ready, you can publish your code by running the following command:
+
+```
+wrangler publish
+```
+
+[wrangler config](https://developers.cloudflare.com/workers/wrangler/configuration/)
+[handlebars](https://marnixkok.nl/news/blog/handlebars-templates-in-cloudflare-workers)
+[serverless rendering](https://blog.cloudflare.com/serverless-rendering-with-cloudflare-workers)

client/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "cf-worker-router-tech-tools",
+  "private": true,
+  "version": "1.0.0",
+  "description": "tech tools hosted on cloudflare worker",
+  "main": "index.js",
+  "scripts": {
+    "build": "npm run compilehbs && npm run transpilehbs && rm src/*-original.js",
+    "compilehbs": "handlebars -e hbs -f src/pages-original.js src/views/pages/ && handlebars -e hbs -p -f src/partials-original.js src/views/partials/",
+    "deploy": "wrangler deploy src/index.js",
+    "prepare": "husky",
+    "start": "wrangler dev src/index.js",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "transpilehbs": "hbs-import-transpile src/pages-original.js > assets/pages.js && hbs-import-transpile src/partials-original.js > assets/partials.js"
+  },
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "hbs-import-transpile": "^1.0.4"
+  },
+  "dependencies": {
+    "buffer": "^6.0.3",
+    "handlebars": "^4.7.8",
+    "hbs-async-render": "^1.0.1",
+    "itty-router": "^2.6.6",
+    "serverless-cloudflare-workers": "^1.2.0"
+  }
+}

client/src/index.js

@@ -0,0 +1,29 @@
+import { Router } from 'itty-router'
+import { base64Handler, postHandler, rootHandler } from './routers'
+import { registerHBHelper } from './utils/hbsAsyncHelper.js'
+import '../assets/pages.js';
+import '../assets/partials.js';
+
+// Register HB
+registerHBHelper();
+
+// Create a new router
+const router = Router();
+router.get("/", rootHandler);
+router.get("/base64/:text", base64Handler);
+router.post("/post", postHandler);
+
+/**
+ * This is the last route we define, it will match anything that hasn't hit a route we've defined
+ * above, therefore it's useful as a 404 (and avoids us hitting worker exceptions, so make sure
+ * to include it!).
+*/
+router.all("*", () => new Response("404, not found!", { status: 404 }));
+
+/**
+ * This snippet ties our worker to the router we defined above, all incoming requests
+ * are passed to the router where your routes are called and the response is sent.
+*/
+addEventListener('fetch', (e) => {
+  e.respondWith(router.handle(e.request))
+});

client/src/routers/encoding/base64/router.js

@@ -0,0 +1,19 @@
+import { Buffer } from 'buffer';
+
+export const base64Handler = ({ params }) => {
+    // Decode text like "Hello%20world" into "Hello world"
+    let input = decodeURIComponent(params.text)
+
+    // Construct a buffer from our input
+    let buffer = Buffer.from(input, "utf8")
+
+    // Serialise the buffer into a base64 string
+    let base64 = buffer.toString("base64")
+
+    // Return the HTML with the string to the client
+    return new Response(`<p>Base64 encoding: <code>${base64}</code></p>`, {
+        headers: {
+            "Content-Type": "text/html"
+        }
+    })
+};

client/src/routers/index.js

@@ -0,0 +1,9 @@
+import { base64Handler } from './encoding/base64/router.js';
+import { postHandler } from './post/router.js';
+import { rootHandler } from './root/router.js';
+
+export {
+    base64Handler,
+    postHandler,
+    rootHandler
+}

client/src/routers/post/router.js

@@ -0,0 +1,30 @@
+/*
+This shows a different HTTP method, a POST.
+
+Try send a POST request using curl or another tool.
+
+Try the below curl command to send JSON:
+
+$ curl -X POST <worker> -H "Content-Type: application/json" -d '{"abc": "def"}'
+*/
+export const postHandler = async request => {
+    // Create a base object with some fields.
+    let fields = {
+        "asn": request.cf.asn,
+        "colo": request.cf.colo
+    }
+
+    // If the POST data is JSON then attach it to our response.
+    if (request.headers.get("Content-Type") === "application/json") {
+        fields["json"] = await request.json()
+    }
+
+    // Serialise the JSON to a string.
+    const returnData = JSON.stringify(fields, null, 2);
+
+    return new Response(returnData, {
+        headers: {
+            "Content-Type": "application/json"
+        }
+    })
+};

client/src/routers/root/html.js

@@ -0,0 +1,6 @@
+export const html = `
+    <html>
+        <body>
+            <h1>Hello, world! This is the root page of your Worker template.</h1
+        </body>
+    </html>`;

client/src/routers/root/router.js

@@ -0,0 +1,14 @@
+import Handlebars from 'handlebars/runtime.js';
+
+import { hbsAsyncRender } from 'hbs-async-render'
+// import { html } from './html';
+
+export const rootHandler = async () => {
+    const output = await hbsAsyncRender(Handlebars, 'body', {name: "Victor E."});
+    return new Response(output, {headers: {'Content-Type': 'text/html'}});
+    // return new Response(html, {
+    //         headers: {
+    //             "Content-Type": "text/html"
+    //         }
+    //     })
+};

client/src/utils/hbsAsyncHelper.js

@@ -0,0 +1,20 @@
+import Handlebars from 'handlebars/runtime.js';
+
+import { registerAsyncHelper } from 'hbs-async-render'
+
+/**
+ * Register an asynchronous helper that waits for a second and then resolves with some information
+ * that is going to be rendered in the place where `asyncTest` has been used in the Handlebar templates.
+ */
+export const registerHBHelper = () => registerAsyncHelper(Handlebars,'asyncTest', function (options, context) {
+
+    return new Promise((resolve, reject) => {
+        setTimeout(
+            function() {
+                resolve(`Async render with params: ${options.hash.name} || ${options.hash.age}`)
+            },
+            200
+        );
+    });
+
+})

client/src/views/pages/body.hbs

@@ -0,0 +1,35 @@
+<html>
+<head>
+    {{> structure/htmlhead }}
+
+    <title>Cloudflare Workers with Handlebars</title>
+
+</head>
+<body>
+{{> structure/header }}
+
+<div class="container">
+    <div class="row">
+        <div class="col-12">
+
+            <div style="text-align: center; margin-bottom: 30px;">
+                <div style="display: inline-block; width: 300px;">
+                    {{> logos/cloudflare }}
+                </div>
+            </div>
+
+            <h3>This template is rendered by Handlebars in a Cloudflare Worker</h3>
+
+            <p>
+                <strong>Your name:</strong> {{name}}
+            </p>
+
+            <pre>{{asyncTest name='Vic Tester' age=38}}</pre>
+
+        </div>
+    </div>
+</div>
+
+{{> structure/footer }}
+</body>
+</html>

client/src/views/partials/logos/cloudflare.hbs

@@ -0,0 +1,27 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 101.4 33.5">
+    <defs>
+        <style>
+            .a {
+                fill: #fff;
+            }
+
+            .b {
+                fill: #f48120;
+            }
+
+            .c {
+                fill: #faad3f;
+            }
+
+            .d {
+                fill: #404041;
+            }
+        </style>
+    </defs>
+    <title>Cloudflare logo</title>
+    <path class="a" d="M94.7,10.6,89.1,9.3l-1-.4-25.7.2V21.5l32.3.1Z"/>
+    <path class="b" d="M84.2,20.4a2.85546,2.85546,0,0,0-.3-2.6,3.09428,3.09428,0,0,0-2.1-1.1l-17.4-.2c-.1,0-.2-.1-.3-.1a.1875.1875,0,0,1,0-.3c.1-.2.2-.3.4-.3L82,15.6a6.29223,6.29223,0,0,0,5.1-3.8l1-2.6c0-.1.1-.2,0-.3A11.39646,11.39646,0,0,0,66.2,7.7a5.45941,5.45941,0,0,0-3.6-1A5.20936,5.20936,0,0,0,58,11.3a5.46262,5.46262,0,0,0,.1,1.8A7.30177,7.30177,0,0,0,51,20.4a4.102,4.102,0,0,0,.1,1.1.3193.3193,0,0,0,.3.3H83.5c.2,0,.4-.1.4-.3Z"/>
+    <path class="c" d="M89.7,9.2h-.5c-.1,0-.2.1-.3.2l-.7,2.4a2.85546,2.85546,0,0,0,.3,2.6,3.09428,3.09428,0,0,0,2.1,1.1l3.7.2c.1,0,.2.1.3.1a.1875.1875,0,0,1,0,.3c-.1.2-.2.3-.4.3l-3.8.2a6.29223,6.29223,0,0,0-5.1,3.8l-.2.9c-.1.1,0,.3.2.3H98.5a.26517.26517,0,0,0,.3-.3,10.87184,10.87184,0,0,0,.4-2.6,9.56045,9.56045,0,0,0-9.5-9.5"/>
+    <path class="d" d="M100.5,27.2a.9.9,0,1,1,.9-.9.89626.89626,0,0,1-.9.9m0-1.6a.7.7,0,1,0,.7.7.68354.68354,0,0,0-.7-.7m.4,1.2h-.2l-.2-.3h-.2v.3h-.2v-.9h.5a.26517.26517,0,0,1,.3.3c0,.1-.1.2-.2.3l.2.3Zm-.3-.5c.1,0,.1,0,.1-.1a.09794.09794,0,0,0-.1-.1h-.3v.3h.3Zm-89.7-.9h2.2v6h3.8v1.9h-6Zm8.3,3.9a4.10491,4.10491,0,0,1,4.3-4.1,4.02,4.02,0,0,1,4.2,4.1,4.10491,4.10491,0,0,1-4.3,4.1,4.07888,4.07888,0,0,1-4.2-4.1m6.3,0a2.05565,2.05565,0,0,0-2-2.2,2.1025,2.1025,0,0,0,0,4.2c1.2.2,2-.8,2-2m4.9.5V25.4h2.2v4.4c0,1.1.6,1.7,1.5,1.7a1.39926,1.39926,0,0,0,1.5-1.6V25.4h2.2v4.4c0,2.6-1.5,3.7-3.7,3.7-2.3-.1-3.7-1.2-3.7-3.7m10.7-4.4h3.1c2.8,0,4.5,1.6,4.5,3.9s-1.7,4-4.5,4h-3V25.4Zm3.1,5.9a2.00909,2.00909,0,1,0,0-4h-.9v4Zm7.6-5.9h6.3v1.9H54v1.3h3.7v1.8H54v2.9H51.8Zm9.4,0h2.2v6h3.8v1.9h-6Zm11.7-.1h2.2l3.4,8H76.1l-.6-1.4H72.4l-.6,1.4H69.5Zm2,4.9L74,28l-.9,2.2Zm6.4-4.8H85a3.41818,3.41818,0,0,1,2.6.9,2.62373,2.62373,0,0,1-.9,4.2l1.9,2.8H86.1l-1.6-2.4h-1v2.4H81.3Zm3.6,3.8c.7,0,1.2-.4,1.2-.9,0-.6-.5-.9-1.2-.9H83.5v1.9h1.4Zm6.5-3.8h6.4v1.8H93.6v1.2h3.8v1.8H93.6v1.2h4.3v1.9H91.4ZM6.1,30.3a1.97548,1.97548,0,0,1-1.8,1.2,2.1025,2.1025,0,0,1,0-4.2,2.0977,2.0977,0,0,1,1.9,1.3H8.5a4.13459,4.13459,0,0,0-4.2-3.3A4.1651,4.1651,0,0,0,0,29.4a4.07888,4.07888,0,0,0,4.2,4.1,4.31812,4.31812,0,0,0,4.2-3.2Z"/>
+</svg>

client/src/views/partials/structure/footer.hbs

@@ -0,0 +1,3 @@
+<footer style='margin-top: 100px; padding: 30px;' class='bg-light'>
+    Footer component.
+</footer>

client/src/views/partials/structure/footerlibs.hbs

@@ -0,0 +1 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/js/bootstrap.min.js"></script>

client/src/views/partials/structure/header.hbs

@@ -0,0 +1,6 @@
+<nav class="navbar navbar-light bg-light">
+    <div class="container-fluid">
+        <span class="navbar-brand mb-0 h1">Cloudflare Handlebars Worker</span>
+    </div>
+</nav>
+<br>

client/src/views/partials/structure/htmlhead.hbs

@@ -0,0 +1 @@
+<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css"/>

client/wrangler.toml

@@ -0,0 +1,8 @@
+name = "tech"
+account_id = "**********"
+workers_dev = true
+compatibility_date = "2024-07-11"
+
+[build]
+command="npm run build"
+watch_dir="views/"

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "serverless-microapp-cf-lambda",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "npm run test-client && npm run test-server",
+    "test-client": "cd client && npm run test",
+    "test-server": "cd server && npm run test",
+    "install": "npm run install-client && npm run install-server",
+    "install-client": "cd client && npm i",
+    "install-server": "cd server && npm i",
+    "develop": "npm run start-server && npm run start-client",
+    "start-client": "cd client && npm run dev",
+    "start-server": "cd server && npm run dev"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "husky": "^9.0.11"
+  }
+}