raul-barriga Comments - Answer Overflow

raul-barriga

•Created by raul-barriga on 9/21/2022 in #back-end

Browser not showing images folder from react build

I just noticed that these fetched images come from the public folder of my folder structure, inside the create-react-app folder structure.

8 replies

KPCKevin Powell - Community

•Created by raul-barriga on 9/21/2022 in #back-end

Browser not showing images folder from react build

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.

8 replies

KPCKevin Powell - Community

•Created by raul-barriga on 9/21/2022 in #back-end

Browser not showing images folder from react build

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.

8 replies

KPCKevin Powell - Community

•Created by raul-barriga on 9/21/2022 in #back-end

Browser not showing images folder from react build

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.

8 replies

KPCKevin Powell - Community

•Created by raul-barriga on 9/21/2022 in #back-end

Browser not showing images folder from 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

8 replies

KPCKevin Powell - Community

•Created by raul-barriga on 9/21/2022 in #back-end

Browser not showing images folder from react build

It’s inside the react build.

8 replies

Gaming

Programming