How to deploy react app on cloudflare worker

here is the full described question
I am trying to deploy a react app on Cloudflare worker and following this doc default doc and this is my worker-site/index.js file

import { getAssetFromKV, serveSinglePageApp } from '@cloudflare/kv-asset-handler';
addEventListener("fetch", event => {
  event.respondWith(handleEvent(event));
});

async function handleEvent(event) {
  try {
    return await getAssetFromKV(event, { mapRequestToAsset: serveSinglePageApp });

  } catch (error) {
    let pathname = new URL(event.request.url).pathname;
    return new Response(`"${pathname}" not found`, {
      status: 404,
      statusText: "not found"
    });
  }
 
}

nd then this is my react app.js file

import "./App.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import AuthProvider from "./contexts/AuthContext";
import AccountSetupSuccessfull from "./components/AccountSetupSuccessfull";
import VerifyPhone from "./components/VerifyPhone";
import EnterGSTIN from "./components/EnterGSTIN";
import CompanyLocation from "./components/CompanyLocation";
function App() {
  return (
    <AuthProvider>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<AccountSetupSuccessfull />} />
          <Route path="/verify-phone" element={<VerifyPhone />} />
          <Route path="/enter-gstin" element={<EnterGSTIN />} />
          <Route path="/company-location" element={<CompanyLocation />} />
          <Route
            path="/account-setup-successful"
            element={<AccountSetupSuccessfull />}
          />
        </Routes>
      </BrowserRouter>
    </AuthProvider>
  );
}

export default App;
and in my .toml file
name = "vendorapp"
type = "webpack"
account_id = "ggdggd"
route = "domainName/vendor/*"
zone_id = "gfggf"

[site]
bucket = "./build"
entry-point = "workers-site"

and when I am running domainName/vendor/verify-phone instead of org there is com it will give an error in getting like domainName/vendor/static/main.css and the .js file is giving 404 or 500 can anyone suggest a solution ?? i have changed the root folder package.json file and added homepage

Not sure i fully understand, however my first thought is, wouldn’t this make more sense as a Cloudflare pages project set up as a react build…

https://developers.cloudflare.com/pages/framework-guides/deploy-a-react-application/

Any worker specific code can then live in a pages function

https://developers.cloudflare.com/pages/platform/functions/

1 Like