define routers

victorekpo · Jul 13, 2024 · f1b4eeb · f1b4eeb
1 parent 57516db
commit f1b4eeb
Show file tree

Hide file tree

Showing 21 changed files with 154 additions and 156 deletions.
diff --git a/client/package.json b/client/package.json
@@ -17,6 +17,9 @@
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-react": "^7.24.7",
     "babel-loader": "^9.1.3",
+    "css-loader": "^7.1.2",
+    "file-loader": "^6.2.0",
+    "style-loader": "^4.0.0",
     "webpack": "^5.93.0",
     "webpack-cli": "^5.1.4"
   },

diff --git a/...t/src/views/partials/logos/cloudflare.hbs → client/public/cloudflare.svg b/...t/src/views/partials/logos/cloudflare.hbs → client/public/cloudflare.svg
diff --git a/client/src/App.js b/client/src/App.js
diff --git a/client/src/App.jsx b/client/src/App.jsx
@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import logo from '../public/cloudflare.svg'
+import { Header } from "./components/Header/Header";
+import { Footer } from "./components/Footer/Footer";
+
+export const App = () => {
+  const [count, setCount] = useState(0);
+  const tester = "Victor E";
+
+  return (
+    <div className="container">
+      <Header />
+      <div className="row">
+        <div className="col-12">
+          <div>
+            <div>
+              <img src={logo} width="300"/>
+            </div>
+          </div>
+          <h1>Hello, Cloudflare Workers!</h1>
+          <h3>This is a basic React page deployed on Cloudflare Workers.</h3>
+          <p>
+            <strong>Your name:</strong> { tester }
+          </p>
+          <pre>{ tester }</pre>
+
+          <p>Count: { count }</p>
+          <button type="button" onClick={ () => setCount(count + 1) }>Increase</button>
+        </div>
+      </div>
+    <Footer />
+    </div>
+  );
+};
diff --git a/client/src/components/Footer/Footer.jsx b/client/src/components/Footer/Footer.jsx
@@ -0,0 +1,5 @@
+export const Footer = () => (
+  <footer style={{marginTop: "100px", padding: "30px"}} className='bg-light'>
+    Footer component.
+  </footer>
+);
diff --git a/client/src/components/Header/Header.jsx b/client/src/components/Header/Header.jsx
@@ -0,0 +1,7 @@
+export const Header = () => (
+  <nav className="navbar navbar-light bg-light mb-20">
+    <div className="container-fluid">
+      <span className="navbar-brand h1">Cloudflare React Worker</span>
+    </div>
+  </nav>
+);
diff --git a/client/src/index.js b/client/src/index.js
@@ -1,56 +1,34 @@
 import { Router } from 'itty-router';
-import { getAssetFromKV } from '@cloudflare/kv-asset-handler';
+import * as routes from "./routers";
 
 const router = Router();
 
-// Serve the React app
-router.get('/', async () => {
-  // const html = ReactDOMServer.renderToString(<App />);
-  return new Response(`
-    <!DOCTYPE html>
-    <html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <title>React App on Cloudflare Workers</title>
-        <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
-        <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
-    </head>
-    <body>
-        <div id="root"></div>
-        <script src="bundle.js"></script>
-    </body>
-    </html>
-  `, {
-    headers: {
-      'Content-Type': 'text/html',
-    },
-  });
-});
+const { base64Handler, healthHandler, postHandler, rootHandler, routesAndAssetsHandler } = routes;
 
-// Respond to fetch events with the router
-addEventListener('fetch', event => {
-  // Pass the entire event object to handleAssetRequest function
-  event.respondWith(handleAssetRequest(event));
-});
+/** The rootHandler will serve the React app accordingly
+ * Other routes can be defined as neeeded
+ */
+router.get('/', rootHandler);
+// Health route
+router.get('/health', healthHandler);
+// Test route
+router.get("/base64/:text", base64Handler);
+// Test post route
+router.post("/post", postHandler);
 
-async function handleAssetRequest(event) {
-  // Extract the request from the event
-  const request = event.request;
+/**
+ * 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 }));
 
-  // Check if the request is for bundle.js
-  if (request.url.endsWith('/bundle.js') || request.url.endsWith('/favicon.ico')) {
-    // Serve the bundle.js file from KV storage
-    try {
-      // Pass the entire event object to getAssetFromKV
-      return await getAssetFromKV(event);
-    } catch (e) {
-      return new Response(`Bundle not found: ${e.message}`, {
-        status: 404,
-        statusText: 'Not Found',
-      });
-    }
-  }
+/**
+ * All incoming requests to the worker are passed to the router
+ * where your routes are called and the response is sent.
+ * routesAndAssetsHandler will map assets and routes accordingly
+ */
+addEventListener('fetch', event => {
+  event.respondWith(routesAndAssetsHandler(event, router));
+});
 
-  // For any other requests, handle them with the router
-  return router.handle(request);
-}
diff --git a/client/src/main.js b/client/src/main.js
@@ -1,4 +1,4 @@
-import App from './App';
+import { App } from './App';
 import { createRoot } from 'react-dom/client';
 
 // Render your React component instead

diff --git a/client/src/routers/handler.js b/client/src/routers/handler.js
@@ -0,0 +1,27 @@
+import { getAssetFromKV } from "@cloudflare/kv-asset-handler";
+
+export const routesAndAssetsHandler = async (event, router) => {
+  // Extract the request from the event
+  const request = event.request;
+
+  // Check if the request is for bundle.js
+  if (
+    request.url.endsWith('/bundle.js')
+    || request.url.endsWith('/favicon.ico')
+    || request.url.endsWith('.svg')
+  ) {
+    // Serve the bundle.js file from KV storage
+    try {
+      // Pass the entire event object to getAssetFromKV
+      return await getAssetFromKV(event);
+    } catch (e) {
+      return new Response(`Bundle not found: ${e.message}`, {
+        status: 404,
+        statusText: 'Not Found',
+      });
+    }
+  }
+
+  // For any other requests, handle them with the router
+  return router.handle(request);
+};
diff --git a/client/src/routers/health/router.js b/client/src/routers/health/router.js
@@ -0,0 +1 @@
+export const healthHandler = () => new Response("success");
diff --git a/client/src/routers/index.js b/client/src/routers/index.js
@@ -1,9 +1,13 @@
 import { base64Handler } from './encoding/base64/router.js';
+import { healthHandler } from './health/router'
 import { postHandler } from './post/router.js';
 import { rootHandler } from './root/router.js';
+import { routesAndAssetsHandler } from './handler';
 
 export {
     base64Handler,
+    healthHandler,
     postHandler,
-    rootHandler
+    rootHandler,
+    routesAndAssetsHandler
 }
diff --git a/client/src/routers/root/html.js b/client/src/routers/root/html.js
diff --git a/client/src/routers/root/router.js b/client/src/routers/root/router.js
@@ -1,14 +1,25 @@
-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"
-    //         }
-    //     })
+    // const html = ReactDOMServer.renderToString(<App />);
+    return new Response(`
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>React App on Cloudflare Workers</title>
+        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css"/>
+        <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+        <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/js/bootstrap.min.js"></script>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script src="bundle.js"></script>
+    </body>
+    </html>
+  `, {
+        headers: {
+            'Content-Type': 'text/html',
+        },
+    });
 };
diff --git a/client/src/utils/hbsAsyncHelper.js b/client/src/utils/hbsAsyncHelper.js
diff --git a/client/src/views/pages/body.hbs b/client/src/views/pages/body.hbs
diff --git a/client/src/views/partials/logos/handlebars.hbs b/client/src/views/partials/logos/handlebars.hbs
diff --git a/client/src/views/partials/structure/footer.hbs b/client/src/views/partials/structure/footer.hbs
diff --git a/client/src/views/partials/structure/footerlibs.hbs b/client/src/views/partials/structure/footerlibs.hbs
diff --git a/client/src/views/partials/structure/header.hbs b/client/src/views/partials/structure/header.hbs
diff --git a/client/src/views/partials/structure/htmlhead.hbs b/client/src/views/partials/structure/htmlhead.hbs
diff --git a/client/webpack.config.js b/client/webpack.config.js
@@ -10,7 +10,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.js$/,
+        test: /\.(js|jsx)$/,
         exclude: /node_modules/,
         use: {
           loader: 'babel-loader',
@@ -19,6 +19,23 @@ module.exports = {
           },
         },
       },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+      },
+      {
+        test: /\.(png|jpg|svg)$/,
+        use: {
+          loader: 'file-loader',
+          options: {
+            name: '[name].[hash].[ext]',
+            outputPath: 'images/',
+          },
+        },
+      },
     ],
   },
+  resolve: {
+    extensions: ['.js', '.jsx'],
+  },
 };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const healthHandler = () => new Response("success");