add routing

client/package.json

@@ -21,6 +21,7 @@
     "itty-router": "^2.6.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.24.1",
     "serverless-cloudflare-workers": "^1.2.0"
   },
   "devDependencies": {

client/src/App.jsx

@@ -1,11 +1,19 @@
-import * as React from "react";
 import { NextUIProvider } from "@nextui-org/react";
-import { Home } from "./pages/Home";
+import { Outlet } from 'react-router-dom';
+import { Header } from "@/components/Header/Header";
+import { Footer } from "@/components/Footer/Footer";
 
-export const App = () => {
+const App = () => {
   return (
-    <NextUIProvider>
-      <Home/>
-    </NextUIProvider>
+    <div className="container">
+      <NextUIProvider>
+        <Header/>
+        <Outlet/>
+        <Footer/>
+      </NextUIProvider>
+    </div>
+
   );
-}
+};
+
+export default App;

client/src/index.js

@@ -5,30 +5,42 @@ const router = Router();
 
 const { base64Handler, healthHandler, postHandler, rootHandler, routesAndAssetsHandler } = routes;
 
-/** The rootHandler will serve the React app accordingly
- * Other routes can be defined as neeeded
+/**
+ * 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('/', rootHandler);
-// Health route
 router.get('/health', healthHandler);
-// Test route
+
+/**
+ * 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
+
+/**
+ * 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);
 
 /**
- * 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!).
+ * 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("*", () => new Response("404, not found!", { status: 404 }));
+router.all('*', rootHandler);
 
 /**
- * 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
+ * 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));
 });
-

client/src/main.js

@@ -1,7 +1,30 @@
-import { App } from './App';
 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(<App />);
+root.render(
+  <RouterProvider router={ router }/>
+);

client/src/pages/Error.jsx

@@ -0,0 +1,19 @@
+import { Header } from "@/components/Header/Header";
+import { Outlet } from "react-router-dom";
+import { Footer } from "@/components/Footer/Footer";
+
+const Error = () => {
+  return (
+    <div className="container">
+      <Header/>
+      <div className="row">
+        <div className="col-12">
+          <h1>Error!</h1>
+        </div>
+      </div>
+      <Footer/>
+    </div>
+  );
+};
+
+export default Error;

client/src/pages/Home.jsx

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

client/webpack-dev.config.js

@@ -6,6 +6,7 @@ module.exports = {
   devServer: {
     compress: true, // Enable gzip compression
     port: 3000, // Port to run dev server on
-    hot: true, // Enable hot module replacement
+    hot: true, // Enable hot module replacement,
+    historyApiFallback: true // This option is crucial for handling client-side routing
   },
 };

client/webpack.config.js

@@ -8,7 +8,7 @@ module.exports = {
   mode: 'production',
   entry: './src/main.js',
   output: {
-    filename: 'bundle.[contenthash].js', // Use content hash for cache busting
+    filename: 'bundle.js', // Use content hash for cache busting
     path: path.resolve(__dirname, 'dist'),
   },
   module: {
@@ -45,7 +45,7 @@ module.exports = {
         { from: './public', to: '' }, // Copy all files from public directory to dist
       ],
     }),
-    new CompressionPlugin()
+    // new CompressionPlugin()
   ],
   resolve: {
     extensions: ['.js', '.jsx'],
@@ -54,21 +54,21 @@ module.exports = {
       '@public': path.resolve(__dirname, 'public'), // Alias for public folder
     }
   },
-  optimization: {
-    minimize: true,
-    minimizer: [
-      new CssMinimizerPlugin(),
-      new TerserPlugin({
-        terserOptions: {
-          format: {
-            comments: false,
-          },
-        },
-        extractComments: false,
-      }),
-    ],
-    splitChunks: {
-      chunks: 'all',
-    },
-  }
+  // optimization: {
+  //   minimize: true,
+  //   minimizer: [
+  //     new CssMinimizerPlugin(),
+  //     new TerserPlugin({
+  //       terserOptions: {
+  //         format: {
+  //           comments: false,
+  //         },
+  //       },
+  //       extractComments: false,
+  //     }),
+  //   ],
+  //   splitChunks: {
+  //     chunks: 'all',
+  //   },
+  // }
 };