Unable to render React components using Express server

JavaScript
1

I am building a personal project Using React in the front-end and Express in the backend. The front-end also uses React-router for client side routing. When I try to render the page from Express, I get only an empty index.html page without any React components. Can anyone help me with this…??
Here is my code
App.js

import "./App.css";
import { Route, Routes } from "react-router-dom";
import Navi from "./components/Nav";
import Homepage from "./components/home";
import SignIn from "./components/signin";
import SignUp from "./components/signup";
import ErrorPage from "./components/error";

export default function App() {
  return (
    <Routes>
      <Route path="/" element={<Navi />}>
        <Route index element={<Homepage />}></Route>
        <Route path="/signup" element={<SignUp />}></Route>
        <Route path="/signin" element={<SignIn />}></Route>
      </Route>
      <Route path="*" element={<ErrorPage />}></Route>
    </Routes>
  );
}

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import "./index.css";
import "bootstrap/dist/css/bootstrap.min.css";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

server.js

import express from "express";
import * as path from "path";
import { fileURLToPath } from "url";
import { dirname } from "path";
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const app = express();
const PORT = process.env.port || 7000;

app.use(express.static(path.join(__dirname, "..", "public")));
console.log(path.join(__dirname, "..", "public"));

app.get("*", (req, res) => {
  console.log(`get request recieved from ${req.url}`);
  res.sendFile(path.join(__dirname, "..", "public", "index.html"));
});

app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="stylesheet" href="index.css" />
    <title>Meetings-video calling app</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="../dist/bundle.js"></script>
  </body>
</html>

Guidance would be appreciated.Thanks

2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.