add webpack dev server

victorekpo · Jul 14, 2024 · 131c9eb · 131c9eb
1 parent 0fa91e4
commit 131c9eb
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 14 deletions.
diff --git a/client/package.json b/client/package.json
@@ -7,6 +7,7 @@
   "scripts": {
     "build": "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"
   },
@@ -37,6 +38,7 @@
     "style-loader": "^4.0.0",
     "tailwindcss": "^3.4.4",
     "webpack": "^5.93.0",
-    "webpack-cli": "^5.1.4"
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4"
   }
 }
diff --git a/client/public/index.html b/client/public/index.html
@@ -0,0 +1,15 @@
+<!-- This index.html is used for development purposes, keep in sync with router -->
+<!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>
diff --git a/client/src/components/Header/Header.jsx b/client/src/components/Header/Header.jsx
@@ -1,5 +1,5 @@
 export const Header = () => (
-  <nav className="navbar navbar-light bg-light mb-20">
+  <nav className="navbar navbar-light bg-light mb-1">
     <div className="container-fluid">
       <span className="navbar-brand h1">Cloudflare React Worker</span>
     </div>

diff --git a/client/src/globals.css b/client/src/globals.css
@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/*.container {*/
+/*    width: 50vh;*/
+/*}*/
diff --git a/client/src/pages/Home.jsx b/client/src/pages/Home.jsx
@@ -13,19 +13,16 @@ export const Home = () => {
       <Header />
       <div className="row">
         <div className="col-12">
-          <div>
-            <div>
-              <img src={logo} width="300"/>
-            </div>
-          </div>
+          <img src={ logo } width="200"/>
+          <br/>
           <h1>Hello, Cloudflare Workers!</h1>
+          <br/>
           <h3>This is a basic React page deployed on Cloudflare Workers.</h3>
-          <p>
-            <strong>Your name:</strong> { tester }
-          </p>
-          <pre>{ tester }</pre>
+          <br/>
+          <pre><strong>Your name:</strong> { tester }</pre>
 
           <p>Count: { count }</p>
+          <br/>
           <Button
             color="primary"
 

diff --git a/client/src/routers/root/router.js b/client/src/routers/root/router.js
@@ -1,5 +1,4 @@
 export const rootHandler = async () => {
-    // const html = ReactDOMServer.renderToString(<App />);
     return new Response(`
     <!DOCTYPE html>
     <html lang="en">
@@ -8,8 +7,6 @@ export const rootHandler = async () => {
         <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>

diff --git a/client/webpack-dev.config.js b/client/webpack-dev.config.js
@@ -0,0 +1,12 @@
+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
+  devServer: {
+    compress: true, // Enable gzip compression
+    port: 3000, // Port to run dev server on
+    hot: true, // Enable hot module replacement
+  },
+};