typescript

client/.babelrc

@@ -1,5 +1,8 @@
 {
-  "presets": ["@babel/preset-env"],
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
   "plugins": [
     [
       "@babel/plugin-transform-react-jsx",

client/package.json

@@ -5,11 +5,11 @@
   "description": "tech tools hosted on cloudflare worker",
   "main": "index.js",
   "scripts": {
-    "build": "webpack",
+    "build": "tsc && webpack",
     "deploy": "wrangler deploy src/index.js",
     "dev": "webpack-dev-server --config webpack-dev.config.js --open",
     "prepare": "husky",
-    "start": "wrangler dev src/index.js"
+    "start": "wrangler dev src/index.ts"
   },
   "author": "",
   "license": "ISC",
@@ -28,8 +28,13 @@
     "@babel/core": "^7.24.8",
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-router-dom": "^5.3.3",
     "autoprefixer": "^10.4.19",
     "babel-loader": "^9.1.3",
+    "babel-plugin-module-resolver": "^5.0.2",
     "compression-webpack-plugin": "^11.1.0",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.2",
@@ -43,6 +48,7 @@
     "style-loader": "^4.0.0",
     "tailwindcss": "^3.4.4",
     "terser-webpack-plugin": "^5.3.10",
+    "typescript": "^5.5.3",
     "webpack": "^5.93.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4"

client/src/@types/html.d.ts

@@ -0,0 +1,4 @@
+declare module '*.html' {
+  const content: string;
+  export default content;
+}

client/src/@types/svg.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}

client/src/App.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NextUIProvider } from "@nextui-org/react";
+import { Outlet } from 'react-router-dom';
+import { Header } from "@/components/Header/Header";
+import { Footer } from "@/components/Footer/Footer";
+const App = () => {
+    return (_jsx("div", { className: "container", children: _jsxs(NextUIProvider, { children: [_jsx(Header, {}), _jsx(Outlet, {}), _jsx(Footer, {})] }) }));
+};
+export default App;

client/src/components/Footer/Footer.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Footer = () => (_jsx("footer", { style: { marginTop: "100px", padding: "30px" }, className: 'bg-light', children: "Footer component." }));

client/src/components/Header/Header.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import logoSrc from "@public/images/cloudflare.svg";
+export const Header = memo(() => {
+    const logo = useMemo(() => logoSrc, []);
+    return (_jsxs("div", { children: [_jsx("nav", { className: "navbar navbar-light bg-light mb-1", children: _jsxs("div", { className: "container-fluid", style: { height: "50px" }, children: [_jsx("span", { className: "navbar-brand h1", children: "Cloudflare React Worker" }), _jsx("span", { style: { position: "relative", right: 0 }, children: _jsx("img", { src: logo, width: "151", height: "50", alt: "logo" }) })] }) }), _jsx("br", {})] }));
+});

client/src/index.js

@@ -1,31 +1,25 @@
 import { Router } from 'itty-router';
 import * as routes from "./routers";
-
 const router = Router();
-
 const { base64Handler, healthHandler, postHandler, rootHandler, routesAndAssetsHandler } = routes;
-
 /**
  * Health route
  * This route is used to check the health status of the application.
  * When a GET request is made to /health, it will be handled by the healthHandler.
  */
 router.get('/health', healthHandler);
-
 /**
  * Test route for base64 encoding
  * This route takes a text parameter and returns its base64 encoded version.
  * When a GET request is made to /base64/:text, it will be handled by the base64Handler.
  */
 router.get("/base64/:text", base64Handler);
-
 /**
  * Test POST route
  * This route is used to handle POST requests for testing purposes.
  * When a POST request is made to /post, it will be handled by the postHandler.
  */
 router.post("/post", postHandler);
-
 /**
  * Catch-all route for serving the React app
  * This is the last route we define. It will match any route that hasn't been
@@ -34,13 +28,12 @@ router.post("/post", postHandler);
  * allowing the client-side routing of React Router to take over.
  */
 router.all('*', rootHandler);
-
 /**
  * Event listener for incoming requests
  * All incoming requests to the worker are passed to the router where your routes
  * are called, and the response is sent. The routesAndAssetsHandler will map
  * assets and routes accordingly.
  */
 addEventListener('fetch', event => {
-  event.respondWith(routesAndAssetsHandler(event, router));
+    event.respondWith(routesAndAssetsHandler(event, router));
 });

client/src/index.ts

@@ -0,0 +1,46 @@
+import { Router } from 'itty-router';
+import * as routes from "./routers";
+
+const router = Router();
+
+const { base64Handler, healthHandler, postHandler, rootHandler, routesAndAssetsHandler } = routes;
+
+/**
+ * Health route
+ * This route is used to check the health status of the application.
+ * When a GET request is made to /health, it will be handled by the healthHandler.
+ */
+router.get('/health', healthHandler);
+
+/**
+ * Test route for base64 encoding
+ * This route takes a text parameter and returns its base64 encoded version.
+ * When a GET request is made to /base64/:text, it will be handled by the base64Handler.
+ */
+router.get("/base64/:text", base64Handler);
+
+/**
+ * Test POST route
+ * This route is used to handle POST requests for testing purposes.
+ * When a POST request is made to /post, it will be handled by the postHandler.
+ */
+router.post("/post", postHandler);
+
+/**
+ * Catch-all route for serving the React app
+ * This is the last route we define. It will match any route that hasn't been
+ * defined above, making it useful as a catch-all route.
+ * This ensures that any route not explicitly defined will serve the React app,
+ * allowing the client-side routing of React Router to take over.
+ */
+router.all('*', rootHandler);
+
+/**
+ * Event listener for incoming requests
+ * All incoming requests to the worker are passed to the router where your routes
+ * are called, and the response is sent. The routesAndAssetsHandler will map
+ * assets and routes accordingly.
+ */
+addEventListener('fetch', (event: any) => {
+  event.respondWith(routesAndAssetsHandler(event, router));
+});

client/src/main.js

@@ -1,30 +1,27 @@
-import { createRoot } from 'react-dom/client';
-import { createBrowserRouter, RouterProvider } from 'react-router-dom'
-import App from './App';
-import Error from './pages/Error';
-import Home from '@/pages/Home';
-import './globals.css';
-
-const router = createBrowserRouter([
-  {
-    path: '/',
-    element: <App/>,
-    errorElement: <Error/>,
-    children: [
-      {
-        index: true,
-        element: <Home/>,
-      },
-      {
-        path: '/test',
-        element: <h1>Testing 1 2 3</h1>,
-      },
-    ],
-  },
-]);
-
-// Render your React component instead
-const root = createRoot(document.getElementById('root'));
-root.render(
-  <RouterProvider router={ router }/>
-);
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createRoot } from 'react-dom/client';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import App from './App';
+import Error from './pages/Error';
+import Home from '@/pages/Home';
+import './globals.css';
+const router = createBrowserRouter([
+    {
+        path: '/',
+        element: _jsx(App, {}),
+        errorElement: _jsx(Error, {}),
+        children: [
+            {
+                index: true,
+                element: _jsx(Home, {}),
+            },
+            {
+                path: '/test',
+                element: _jsx("h1", { children: "Testing 1 2 3" }),
+            },
+        ],
+    },
+]);
+// Render your React component instead
+const root = createRoot(document.getElementById('root'));
+root.render(_jsx(RouterProvider, { router: router }));

client/src/main.tsx

@@ -0,0 +1,31 @@
+import { createRoot } from 'react-dom/client';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+import App from './App';
+import Error from './pages/Error';
+import Home from '@/pages/Home';
+import './globals.css';
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <App/>,
+    errorElement: <Error/>,
+    children: [
+      {
+        index: true,
+        element: <Home/>,
+      },
+      {
+        path: '/test',
+        element: <h1>Testing 1 2 3</h1>,
+      },
+    ],
+  },
+]);
+
+// Render your React component instead
+// @ts-ignore
+const root = createRoot(document.getElementById('root'));
+root.render(
+  <RouterProvider router={router}/>
+);

client/src/pages/Error.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Header } from "@/components/Header/Header";
+import { Footer } from "@/components/Footer/Footer";
+const Error = () => {
+    return (_jsxs("div", { className: "container", children: [_jsx(Header, {}), _jsx("div", { className: "row", children: _jsx("div", { className: "col-12", children: _jsx("h1", { children: "Error!" }) }) }), _jsx(Footer, {})] }));
+};
+export default Error;

client/src/pages/Home.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from "@nextui-org/react";
+const Home = () => {
+    const [count, setCount] = useState(0);
+    const tester = "Victor E";
+    return (_jsx("div", { className: "row", children: _jsxs("div", { className: "col-12", children: [_jsx("h1", { children: "Hello, Cloudflare Workers!" }), _jsx("br", {}), _jsx("h3", { children: "This is a basic React page deployed on Cloudflare Workers." }), _jsx("br", {}), _jsxs("pre", { children: [_jsx("strong", { children: "Your name:" }), " ", tester] }), _jsxs("p", { children: ["Count: ", count] }), _jsx("br", {}), _jsx(Button, { color: "primary", type: "button", onClick: () => setCount(count + 1), children: "Increase" })] }) }));
+};
+export default Home;

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

@@ -1,26 +1,30 @@
-import { Buffer } from 'buffer';
-
-export const base64Handler = async ({ 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")
-
-    const backendApi = 'https://6wkf624dt4.execute-api.us-east-1.amazonaws.com/prod/';
-    const response = await fetch(backendApi)
-    const data = await response.json()
-
-    // Return the HTML with the string to the client
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Buffer } from 'buffer';
+export const base64Handler = (_a) => __awaiter(void 0, [_a], void 0, function* ({ 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");
+    const backendApi = 'https://6wkf624dt4.execute-api.us-east-1.amazonaws.com/prod/';
+    const response = yield fetch(backendApi);
+    const data = yield response.json();
+    // Return the HTML with the string to the client
     return new Response(`
 <p>Base64 encoding: <code>${base64}</code></p>
 <p>${JSON.stringify(data, null, 2)}</p>
-`, {
-        headers: {
-            "Content-Type": "text/html"
-        }
-    })
-};
+`, {
+        headers: {
+            "Content-Type": "text/html"
+        }
+    });
+});

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

@@ -0,0 +1,26 @@
+import { Buffer } from 'buffer';
+
+export const base64Handler = async ({ 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")
+
+    const backendApi = 'https://6wkf624dt4.execute-api.us-east-1.amazonaws.com/prod/';
+    const response = await fetch(backendApi)
+    const data = await response.json()
+
+    // Return the HTML with the string to the client
+    return new Response(`
+<p>Base64 encoding: <code>${base64}</code></p>
+<p>${JSON.stringify(data, null, 2)}</p>
+`, {
+        headers: {
+            "Content-Type": "text/html"
+        }
+    })
+};