Im learning web development. Im using visual studio code So I created a react app using "npx create-react-app my-app" Then I did some frontend and ran the site using 'npm start' command, it was working fine
After working on some frotend, I decided to create a 'server' folder for the backend Here i tried to load the index.html file onto the browser using 'app.get', however the react part dont not load onto the page. The html file gets displayed, but all the react stuff that should be coming into the div id="root" does not show up. How do I fix this?
the file directories:
the index.html file inside the public folder:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous"
/>
<title>Food Town</title>
<link rel="shortcut icon" type="image/png" href="\Images\favicon.jpg" />
<script
src="https://kit.fontawesome.com/73800f79be.js"
crossorigin="anonymous"
></script>
</head>
<body>
Hello!!!
<div id="root"></div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"
></script>
</body>
</html>
the index.js file inside the server folder:
const express = require("express");
const bodyParser = require("body-parser");
const mongoose = require("mongoose");
const cors = require("cors");
const app = express();
const path=require("path");
const dotenv = require("dotenv").config();
const staticPath= path.join(__dirname, '../food-site');
app.use(cors());
app.use(express.urlencoded({ extended: true }));
app.use(express.static(staticPath));
app.get("/", (req,res)=>{
res.sendFile(path.join(__dirname , '../food-site/public/index.html'));
});
const PORT = process.env.PORT;
app.listen(PORT, () => {
console.log("Server connected on port: " + PORT);
});
At first I was getting the error that I had to use absolute path or relative path, the html file wasnt displaying at all. I tried looking online and on youtube for possible solutions and was able to resolve that issue. However, the react portion wasnt rendering onto the screen and i wasnt able to find any solution for it.
There's no code which would look anything into #root there. All the scripts are for libraries that have nothing to do with React.
It looks like you have dropped your raw source code into your web server instead of running your build script (which probably uses webpack) and deploying the output from it.