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

@@ -3,13 +3,13 @@
   "private": true,
   "version": "1.0.0",
   "description": "tech tools hosted on cloudflare worker",
-  "main": "index.js",
+  "main": "src/index.ts",
   "scripts": {
     "build": "webpack",
-    "deploy": "wrangler deploy src/index.js",
+    "deploy": "wrangler deploy src/index.ts",
     "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,12 @@
     "@babel/core": "^7.24.8",
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-react": "^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 +47,8 @@
     "style-loader": "^4.0.0",
     "tailwindcss": "^3.4.4",
     "terser-webpack-plugin": "^5.3.10",
+    "ts-loader": "^9.5.1",
+    "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/index.js → client/src/index.ts

@@ -41,6 +41,6 @@ router.all('*', rootHandler);
  * are called, and the response is sent. The routesAndAssetsHandler will map
  * assets and routes accordingly.
  */
-addEventListener('fetch', event => {
+addEventListener('fetch', (event: any) => {
   event.respondWith(routesAndAssetsHandler(event, router));
 });

client/src/main.js → client/src/main.tsx

@@ -24,7 +24,8 @@ const router = createBrowserRouter([
 ]);
 
 // Render your React component instead
+// @ts-ignore
 const root = createRoot(document.getElementById('root'));
 root.render(
-  <RouterProvider router={ router }/>
+  <RouterProvider router={router}/>
 );

client/src/pages/Home.jsx → client/src/pages/Home.tsx

@@ -12,14 +12,14 @@ const Home = () => {
         <br/>
         <h3>This is a basic React page deployed on Cloudflare Workers.</h3>
         <br/>
-        <pre><strong>Your name:</strong> { tester }</pre>
+        <pre><strong>Your name:</strong> {tester}</pre>
 
-        <p>Count: { count }</p>
+        <p>Count: {count}</p>
         <br/>
         <Button
           color="primary"
           type="button"
-          onClick={ () => setCount(count + 1) }
+          onClick={() => setCount(count + 1)}
         >
           Increase
         </Button>

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

@@ -0,0 +1,26 @@
+import { Buffer } from 'buffer';
+
+export const base64Handler = async ({ params }: any) => {
+  // 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"
+    }
+  })
+};

client/src/routers/handler.js → client/src/routers/handler.ts

@@ -9,7 +9,7 @@ import { getAssetFromKV } from "@cloudflare/kv-asset-handler";
  * @param {Router} router - The router object responsible for handling non-static asset requests.
  * @returns {Response} A Response object containing the requested asset or routed content.
  */
-export const routesAndAssetsHandler = async (event, router) => {
+export const routesAndAssetsHandler = async (event: any, router: any): Promise<Response> => {
   // Extract the request from the event
   const request = event.request;
 
@@ -27,8 +27,8 @@ export const routesAndAssetsHandler = async (event, router) => {
     try {
       // Pass the entire event object to getAssetFromKV
       return await getAssetFromKV(event);
-    } catch (e) {
-      return new Response(`Bundle not found: ${ e.message }`, {
+    } catch (e: any) {
+      return new Response(`Bundle not found: ${e.message}`, {
         status: 404,
         statusText: 'Not Found',
       });

client/src/routers/post/router.ts

@@ -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: any) => {
+  // Create a base object with some fields.
+  let fields: any = {
+    "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/router.js → client/src/routers/root/router.ts

@@ -4,7 +4,7 @@ import indexHTML from '../../../dist/index.html';
  * Handles requests to serve the index.html file.
  * Uses the indexHTML imported from the public directory.
  */
-export const rootHandler = async (request) => {
+export const rootHandler = async (request: any) => {
   return new Response(indexHTML, {
     headers: {
       'Content-Type': 'text/html',

client/tsconfig.json

@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noImplicitAny": true,
+    "noEmit": false,
+    "outDir": "dist",
+    "esModuleInterop": true,
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+      "@public/*": [
+        "./public/*"
+      ]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "src/@types/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

client/webpack.config.js

@@ -7,7 +7,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 module.exports = {
   mode: 'production',
-  entry: './src/main.js',
+  entry: './src/main.tsx',
   output: {
     filename: 'bundle.[contenthash:8].js', // Use content hash for cache busting
     path: path.resolve(__dirname, 'dist'),
@@ -17,14 +17,19 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.(js|jsx)$/,
+        test: /\.ts(x?)$/,
         exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            configFile: './.babelrc',
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              configFile: './.babelrc',
+            },
           },
-        },
+          {
+            loader: 'ts-loader'
+          }
+        ]
       },
       {
         test: /\.[s]?css$/,
@@ -59,7 +64,7 @@ module.exports = {
     new CompressionPlugin()
   ],
   resolve: {
-    extensions: ['.js', '.jsx'],
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
     alias: {
       '@': path.resolve(__dirname, 'src'), // Alias for src folder
       '@public': path.resolve(__dirname, 'public'), // Alias for public folder

client/wrangler.toml

@@ -2,7 +2,7 @@ name = "tech"
 account_id = "**********"
 workers_dev = true
 compatibility_date = "2024-07-11"
-main = "index.js"
+main = "src/index.ts"
 
 [site]
 bucket = "./dist"