Kevin Powell - Community•3y ago

Browser not showing images folder from react build

My images folder from React's build folder is not showing in the browser's sources files: http://54.212.156.118/. This is a mern stack project.

Welcome to Proshop

Find the best products for the cheapest prices.

2 Replies

MarkBoots•3y ago

I don't use react, but is the images folder in public? Maybe also (for others) show the way you include the images and show the folder structure

raul-barrigaOP•3y ago

It’s inside the react build. Here's how I serve the react build:

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

app.use("/uploads", express.static(path.join(__dirname, "../uploads")));

if (process.env.NODE_ENV === "production") {
  app.use("/api", express.static(path.join(__dirname, "../frontend/build")));
  app.get("*", (req, res) => {
    res.sendFile(path.resolve(__dirname, "../", "frontend", "build", "index.html"));
  });
 } else {
  app.get("/", (req, res) => {
    res.send("API is running....");
  });
}

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

app.use("/uploads", express.static(path.join(__dirname, "../uploads")));

if (process.env.NODE_ENV === "production") {
  app.use("/api", express.static(path.join(__dirname, "../frontend/build")));
  app.get("*", (req, res) => {
    res.sendFile(path.resolve(__dirname, "../", "frontend", "build", "index.html"));
  });
 } else {
  app.get("/", (req, res) => {
    res.send("API is running....");
  });
}

And my folder structure is:

root
- client (made with create-react-app)
-- build
-server
-uploads

root
- client (made with create-react-app)
-- build
-server
-uploads

I notice if I go to the network tab on dev tools, it does show it fetched the images with a status code of 304 & if I try to open one in a new tab, it will show the images folder under the sources tab, but the image file itself will be the index.html file. So I also noticed that in the headers of my fetched requests, in the dev tools, the main chuck files for css & js come from: Request URL: http://54.212.156.118/api/static/js/main.6f284354.chunk.js I took a look at what shows up for an image file: Request URL: http://54.212.156.118/images/playstation.jpg So don't know if this is correct. If I type /api before the route path for the fetched image, then it shows up correctly & then the sources files is reorganized, showing the structure:

-IP address
-- api/images
--- playstation.jpg

-IP address
-- api/images
--- playstation.jpg

So for some reason, the images are being fetched without the /api path. I just noticed that these fetched images come from the public folder of my folder structure, inside the create-react-app folder structure.

Gaming

Programming

Browser not showing images folder from react build