From f1b4eeb1f251ba3a1b78124628fa2af5daf9a48d Mon Sep 17 00:00:00 2001 From: Vic Date: Sat, 13 Jul 2024 05:54:43 -0500 Subject: [PATCH] define routers --- client/package.json | 3 + .../cloudflare.hbs => public/cloudflare.svg} | 8 +- client/src/App.js | 16 ---- client/src/App.jsx | 34 +++++++++ client/src/components/Footer/Footer.jsx | 5 ++ client/src/components/Header/Header.jsx | 7 ++ client/src/index.js | 74 +++++++------------ client/src/main.js | 2 +- client/src/routers/handler.js | 27 +++++++ client/src/routers/health/router.js | 1 + client/src/routers/index.js | 6 +- client/src/routers/root/html.js | 6 -- client/src/routers/root/router.js | 35 ++++++--- client/src/utils/hbsAsyncHelper.js | 20 ----- client/src/views/pages/body.hbs | 35 --------- .../src/views/partials/logos/handlebars.hbs | 0 .../src/views/partials/structure/footer.hbs | 3 - .../views/partials/structure/footerlibs.hbs | 1 - .../src/views/partials/structure/header.hbs | 6 -- .../src/views/partials/structure/htmlhead.hbs | 2 - client/webpack.config.js | 19 ++++- 21 files changed, 154 insertions(+), 156 deletions(-) rename client/{src/views/partials/logos/cloudflare.hbs => public/cloudflare.svg} (94%) delete mode 100644 client/src/App.js create mode 100644 client/src/App.jsx create mode 100644 client/src/components/Footer/Footer.jsx create mode 100644 client/src/components/Header/Header.jsx create mode 100644 client/src/routers/handler.js create mode 100644 client/src/routers/health/router.js delete mode 100644 client/src/routers/root/html.js delete mode 100644 client/src/utils/hbsAsyncHelper.js delete mode 100644 client/src/views/pages/body.hbs delete mode 100644 client/src/views/partials/logos/handlebars.hbs delete mode 100644 client/src/views/partials/structure/footer.hbs delete mode 100644 client/src/views/partials/structure/footerlibs.hbs delete mode 100644 client/src/views/partials/structure/header.hbs delete mode 100644 client/src/views/partials/structure/htmlhead.hbs diff --git a/client/package.json b/client/package.json index 7eaf34a..a527f1f 100644 --- 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/client/src/views/partials/logos/cloudflare.hbs b/client/public/cloudflare.svg similarity index 94% rename from client/src/views/partials/logos/cloudflare.hbs rename to client/public/cloudflare.svg index 4df92a9..f0b1152 100644 --- a/client/src/views/partials/logos/cloudflare.hbs +++ b/client/public/cloudflare.svg @@ -3,19 +3,19 @@ diff --git a/client/src/App.js b/client/src/App.js deleted file mode 100644 index 6b7e81f..0000000 --- a/client/src/App.js +++ /dev/null @@ -1,16 +0,0 @@ -import React, { useState } from 'react'; - -function App() { - const [count, setCount] = useState(0); - - return ( -
-

Hello, Cloudflare Workers!

-

This is a basic React page deployed on Cloudflare Workers.

-

Count: {count}

- -
- ); -} - -export default App; diff --git a/client/src/App.jsx b/client/src/App.jsx new file mode 100644 index 0000000..969bc67 --- /dev/null +++ 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 ( +
+
+
+
+
+
+ +
+
+

Hello, Cloudflare Workers!

+

This is a basic React page deployed on Cloudflare Workers.

+

+ Your name: { tester } +

+ 
{ tester }
+ +

Count: { count }

+ +
+
+
+
+ ); +}; \ No newline at end of file diff --git a/client/src/components/Footer/Footer.jsx b/client/src/components/Footer/Footer.jsx new file mode 100644 index 0000000..e4bdff5 --- /dev/null +++ b/client/src/components/Footer/Footer.jsx @@ -0,0 +1,5 @@ +export const Footer = () => ( + +); \ No newline at end of file diff --git a/client/src/components/Header/Header.jsx b/client/src/components/Header/Header.jsx new file mode 100644 index 0000000..07d334e --- /dev/null +++ b/client/src/components/Header/Header.jsx @@ -0,0 +1,7 @@ +export const Header = () => ( + +); \ No newline at end of file diff --git a/client/src/index.js b/client/src/index.js index 735ecda..a2d02fa 100644 --- 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(); - return new Response(` - - - - - React App on Cloudflare Workers - - - - -
- - - - `, { - 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 index 3ee9c5d..25392e3 100644 --- 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 new file mode 100644 index 0000000..b510595 --- /dev/null +++ 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); +}; \ No newline at end of file diff --git a/client/src/routers/health/router.js b/client/src/routers/health/router.js new file mode 100644 index 0000000..8874958 --- /dev/null +++ b/client/src/routers/health/router.js @@ -0,0 +1 @@ +export const healthHandler = () => new Response("success"); \ No newline at end of file diff --git a/client/src/routers/index.js b/client/src/routers/index.js index 03606a1..0e64c0b 100644 --- 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 } \ No newline at end of file diff --git a/client/src/routers/root/html.js b/client/src/routers/root/html.js deleted file mode 100644 index 385e715..0000000 --- a/client/src/routers/root/html.js +++ /dev/null @@ -1,6 +0,0 @@ -export const html = ` - - -

Hello, world! This is the root page of your Worker template.

- `; \ No newline at end of file diff --git a/client/src/routers/root/router.js b/client/src/routers/root/router.js index 5d6d40c..8bf444e 100644 --- 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(); + return new Response(` + + + + + + React App on Cloudflare Workers + + + + + + +
+ + + + `, { + headers: { + 'Content-Type': 'text/html', + }, + }); }; \ No newline at end of file diff --git a/client/src/utils/hbsAsyncHelper.js b/client/src/utils/hbsAsyncHelper.js deleted file mode 100644 index 8b2d577..0000000 --- a/client/src/utils/hbsAsyncHelper.js +++ /dev/null @@ -1,20 +0,0 @@ -import Handlebars from 'handlebars/runtime.js'; - -import { registerAsyncHelper } from 'hbs-async-render' - -/** - * Register an asynchronous helper that waits for a second and then resolves with some information - * that is going to be rendered in the place where `asyncTest` has been used in the Handlebar templates. - */ -export const registerHBHelper = () => registerAsyncHelper(Handlebars,'asyncTest', function (options, context) { - - return new Promise((resolve, reject) => { - setTimeout( - function() { - resolve(`Async render with params: ${options.hash.name}`) - }, - 200 - ); - }); - -}) diff --git a/client/src/views/pages/body.hbs b/client/src/views/pages/body.hbs deleted file mode 100644 index 7b80430..0000000 --- a/client/src/views/pages/body.hbs +++ /dev/null @@ -1,35 +0,0 @@ - - - {{> structure/htmlhead }} - - Cloudflare Workers with Handlebars - - - -{{> structure/header }} - -
-
-
- -
-
- {{> logos/cloudflare }} -
-
- -

This template is rendered by Handlebars in a Cloudflare Worker!

- -

- Your name: {{name}} -

- - 
{{asyncTest name='Vic Tester'}}
- -
-
-
- -{{> structure/footer }} - - \ No newline at end of file diff --git a/client/src/views/partials/logos/handlebars.hbs b/client/src/views/partials/logos/handlebars.hbs deleted file mode 100644 index e69de29..0000000 diff --git a/client/src/views/partials/structure/footer.hbs b/client/src/views/partials/structure/footer.hbs deleted file mode 100644 index a5ccfb3..0000000 --- a/client/src/views/partials/structure/footer.hbs +++ /dev/null @@ -1,3 +0,0 @@ -
- Footer component. -
\ No newline at end of file diff --git a/client/src/views/partials/structure/footerlibs.hbs b/client/src/views/partials/structure/footerlibs.hbs deleted file mode 100644 index e4fd0f6..0000000 --- a/client/src/views/partials/structure/footerlibs.hbs +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/client/src/views/partials/structure/header.hbs b/client/src/views/partials/structure/header.hbs deleted file mode 100644 index 1fed4d2..0000000 --- a/client/src/views/partials/structure/header.hbs +++ /dev/null @@ -1,6 +0,0 @@ - -
\ No newline at end of file diff --git a/client/src/views/partials/structure/htmlhead.hbs b/client/src/views/partials/structure/htmlhead.hbs deleted file mode 100644 index 7cbddd4..0000000 --- a/client/src/views/partials/structure/htmlhead.hbs +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/client/webpack.config.js b/client/webpack.config.js index 1227552..2b717a7 100644 --- 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'], + }, };