I’m having a problem retrieving data from a JSON file when deploying my project on Netlify. Locally, everything works perfectly, but in production on Netlify (and previously on Vercel), I get a 404 error when I try to load the JSON file. Here are the details:
Error details :
Failed to load resource: the server responded with a status of 404 ()
I’ve checked the paths, file names and even moved the JSON file to different directories without success. The problem persists and seems to be specific to production deployment on these platforms.
Steps taken:
Checked and modified paths and filenames.
JSON file moved to different directories.
Attempt to deploy on Vercel and then Netlify.
Question:
Do JSON files need to be managed in a specific way on platforms like Netlify or Vercel? Are there any particular configurations to be applied to ensure that these files are not ignored or misinterpreted during production deployment? Or are files and folders in production structured differently and paths no longer correct?
No, they’re not inherently different from other files.
I’d anticipate them being similar, but you should seek support with Vercel from Vercel’s Community.
Not for Netlify itself, because they’re not being ignored or misinterpreted by the platform.
There may be a difference between development/production, but this is entirely within your control.
It all depends on your Build configuration, how your build operates and what it produces under development/production circumstances.
The issue you’ve encountered is due to a misunderstanding that you have with how Vite works.
As Vite doesn’t perform precisely the same thing “in development” as it does “in production”, a statement like “Locally, everything works perfectly” unfortunately doesn’t mean much.
However doing a more accurate comparison by running the following locally: npm run build && npx serve dist
Quickly reveals precisely the same error, proving the issue is unrelated to hosting on Netlify:
None of those files have public in the path, and none of them end up in your build output.
You can confirm by running npm run build locally, then looking at the output log, or simply checking the files in the dist folder it creates.
So the ultimate reason why the file doesn’t exist has nothing to do with Netlify.
Netlify cannot serve a file you have not deployed.
Then you can place the asset in a special public directory under your project root. Assets in this directory will be served at root path / during dev, and copied to the root of the dist directory as-is.
If you placed the file in /public/projet.json in your repository.
It would be served as /projet.json when using the development mode.
During the build it would be copied by Vite to dist/projet.json.
Since you likely have your Publish directory set to dist it would be served as /projet.json by Netlify.
You would adjust your JavaScript to load the file from /projet.json
