Cloudflare Developers•15mo ago

Not loading files in files

Hello. I have my react-website. I used /dist because I am using react + vite. The problem is that I have files of images inside main image folder. As you can see on pictures. What are steps to build it to work?

9 Replies

Tom4skoOP•15mo ago

https://github.com/Tom4sko/BuildsMarket-Web tell me if it is private or public

Victor•15mo ago

Posting again here for visibility. The repo is now public. Project does use the github connect not manual upload I made a fork of your repo (https://github.com/demosjarco/BuildsMarket-Web) and it's live here: https://buildsmarket-web-cf6.pages.dev (This is just for demo purposes, I'll be taking it down later this week)

Victor•15mo ago

By default the build configurations points to a finished directory of /build but the last few logs

16:34:54.710    dist/assets/brandingBackground-329d6ed1.png     262.35 kB
16:34:54.710    dist/assets/portfolioBackground-0723e27b.png    872.92 kB
16:34:54.710    dist/assets/homeBackground-9faeacf6.png       1,514.07 kB
16:34:54.710    dist/assets/index-64a9f809.css                  255.70 kB │ gzip:  37.18 kB
16:34:54.711    dist/assets/index-919dd778.js                   297.77 kB │ gzip:  94.91 kB
16:34:54.711    ✓ built in 5.17s
16:34:54.768    Finished
16:34:54.769    Note: No functions dir at /functions found. Skipping.
16:34:54.769    Validating asset output directory
16:34:54.770    Error: Output directory "build" not found.
16:34:55.954    Failed: build output directory not found

16:34:54.710    dist/assets/brandingBackground-329d6ed1.png     262.35 kB
16:34:54.710    dist/assets/portfolioBackground-0723e27b.png    872.92 kB
16:34:54.710    dist/assets/homeBackground-9faeacf6.png       1,514.07 kB
16:34:54.710    dist/assets/index-64a9f809.css                  255.70 kB │ gzip:  37.18 kB
16:34:54.711    dist/assets/index-919dd778.js                   297.77 kB │ gzip:  94.91 kB
16:34:54.711    ✓ built in 5.17s
16:34:54.768    Finished
16:34:54.769    Note: No functions dir at /functions found. Skipping.
16:34:54.769    Validating asset output directory
16:34:54.770    Error: Output directory "build" not found.
16:34:55.954    Failed: build output directory not found

show the content being created in /dist instead

Victor•15mo ago

Changing the output directory to /dist allows it to build successfully on the next try

Victor•15mo ago

To change this, go to the pages project > Settings > Builds & deployments > Build configurations > Edit Configurations > Build output directory and set it to dist not build

Tom4skoOP•15mo ago

but still i cant see the images in team section when you look closely to team page there are empty images. It is caused because they are in a folderer inside main image folder

QuaqSim•15mo ago

I think this is an error in e.g. src/database/PartnerData.js. The photo properties in there reference ../src/images/ but I think they should be ../images/

Tom4skoOP•15mo ago

yeah but ../images/ is not working even on my local I tried to put folders inside public folder and still idk how can my imports be bad it is just ignoring folder inside folder even though i checked .gitignore and there is nothing it is live on git, but still cloudflare cant process it somehow

QuaqSim•15mo ago

I've been looking at Vite documentation (interesting distraction), I think the issue was that the path strings were not being imported. In src/screens/DonateScreen.jsx for example, paypalLogo is being imported and that reference is being used for the src. It seems this triggers the asset management and the src gets adjusted appropriately during build. Without the import, as is the case where those images are missing, the reference to e.g. {BuildersItem.photo} is simply being treated as a string and results in exactly that string being output during the build. If you put images inside public, it looks like you should reference them using an absolute path, treating public as the root. E.g. if you have public/images/BuildersImages/Hyyzounn.png, the string you use in BuildersData.js should be /images/BuildersImages/Hyyzounn.png. The part about using public is here by the way: https://vitejs.dev/guide/assets.html#the-public-directory

Gaming

Programming

Not loading files in files