add jsconfig.json, clean up root handler

victorekpo · Jul 14, 2024 · 61e7ffa · 61e7ffa
1 parent 131c9eb
commit 61e7ffa
Show file tree

Hide file tree

Showing 11 changed files with 62 additions and 38 deletions.
diff --git a/client/jsconfig.json b/client/jsconfig.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "@public/*": ["public/*"]
+    }
+  }
+}
diff --git a/client/package.json b/client/package.json
@@ -29,6 +29,7 @@
     "@babel/preset-react": "^7.24.7",
     "autoprefixer": "^10.4.19",
     "babel-loader": "^9.1.3",
+    "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.2",
     "file-loader": "^6.2.0",
     "postcss": "^8.4.39",

diff --git a/client/public/cloudflare.svg → client/public/images/cloudflare.svg b/client/public/cloudflare.svg → client/public/images/cloudflare.svg
diff --git a/client/public/onedot-logo.svg → client/public/images/onedot-logo.svg b/client/public/onedot-logo.svg → client/public/images/onedot-logo.svg
diff --git a/client/public/index.html b/client/public/index.html
@@ -1,4 +1,3 @@
-<!-- This index.html is used for development purposes, keep in sync with router -->
 <!DOCTYPE html>
 <html lang="en">
 <head>

diff --git a/client/src/components/Header/Header.jsx b/client/src/components/Header/Header.jsx
@@ -1,7 +1,13 @@
+import logo from "@public/images/cloudflare.svg";
+
 export const Header = () => (
-  <nav className="navbar navbar-light bg-light mb-1">
-    <div className="container-fluid">
-      <span className="navbar-brand h1">Cloudflare React Worker</span>
+    <div>
+      <nav className="navbar navbar-light bg-light mb-1">
+        <div className="container-fluid">
+          <span className="navbar-brand h1">Cloudflare React Worker</span>
+        </div>
+      </nav>
+      <img src={ logo } width="200" alt="logo"/>
+      <br/>
     </div>
-  </nav>
-);
+  );
diff --git a/client/src/pages/Home.jsx b/client/src/pages/Home.jsx
@@ -1,8 +1,7 @@
-import React, { useState } from 'react';
-import logo from '../../public/cloudflare.svg'
-import { Header } from "../components/Header/Header";
-import { Footer } from "../components/Footer/Footer";
-import {Button} from "@nextui-org/react";
+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 [count, setCount] = useState(0);
@@ -13,8 +12,6 @@ export const Home = () => {
       <Header />
       <div className="row">
         <div className="col-12">
-          <img src={ logo } width="200"/>
-          <br/>
           <h1>Hello, Cloudflare Workers!</h1>
           <br/>
           <h3>This is a basic React page deployed on Cloudflare Workers.</h3>

diff --git a/client/src/routers/handler.js b/client/src/routers/handler.js
@@ -1,12 +1,22 @@
 import { getAssetFromKV } from "@cloudflare/kv-asset-handler";
 
+/**
+ * Handles requests for both routes and static assets.
+ * If the request matches certain file types (e.g., .js, .html, .css),
+ * it serves them directly from KV storage using getAssetFromKV.
+ * For other requests, it delegates handling to the provided router.
+ * @param {Event} event - The Cloudflare Worker event object containing the request.
+ * @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) => {
   // Extract the request from the event
   const request = event.request;
 
-  // Check if the request is for bundle.js
+  // Check if the request is for a static asset (e.g., bundle.js, .html, .ico, .svg, .jpg, .png, .css)
   if (
     request.url.endsWith('/bundle.js')
+    || request.url.endsWith('.html')
     || request.url.endsWith('/favicon.ico')
     || request.url.endsWith('.svg')
     || request.url.endsWith('.jpg')

diff --git a/client/src/routers/root/router.js b/client/src/routers/root/router.js
@@ -1,22 +1,13 @@
-export const rootHandler = async () => {
-    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 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',
-        },
+import indexHTML from '../../../public/index.html';
+
+/**
+ * Handles requests to serve the index.html file.
+ * Uses the indexHTML imported from the public directory.
+ */
+export const rootHandler = async (request) => {
+    return new Response(indexHTML, {
+      headers: {
+        'Content-Type': 'text/html',
+      },
     });
-};
+};
diff --git a/client/webpack-dev.config.js b/client/webpack-dev.config.js
@@ -1,9 +1,8 @@
 const config = require('./webpack.config.js'); // Import your existing webpack config
-const path = require('path');
 
 module.exports = {
-  ...config, // Spread the existing config
-  mode: 'development', // Override mode to development
+  ...config,
+  mode: 'development',
   devServer: {
     compress: true, // Enable gzip compression
     port: 3000, // Port to run dev server on

diff --git a/client/webpack.config.js b/client/webpack.config.js
@@ -1,4 +1,5 @@
 const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 module.exports = {
   mode: 'production',
@@ -35,7 +36,18 @@ module.exports = {
       },
     ],
   },
+  plugins: [
+    new CopyWebpackPlugin({
+      patterns: [
+        { from: './public', to: '' }, // Copy all files from public directory to dist
+      ],
+    }),
+  ],
   resolve: {
     extensions: ['.js', '.jsx'],
+    alias: {
+      '@': path.resolve(__dirname, 'src'), // Alias for src folder
+      '@public': path.resolve(__dirname, 'public'), // Alias for public folder
+    }
   },
 };