It is essentially a very simple app where a user enters the name and the app returns the neighborhood the employee is sitting in using a simple javascript lookup in a file called (NeighborhoodLookup.js) of a json file (“database.json”)
It is built using react native. The build deploys without error and page loads. However, the issue is that the site requires a lookup of a database.json file and it doesnt seem to load the database.json file when the build completes. I get an error “Neighborhood data not found.” which basically means my app can’t find the database.json file when it does a lookup function on database.json.
The file is in the root directory and the app works when I test it locally on an http server. I tried updating my netlify toml a bunch of different ways. e.g.
[build]
command = “npx expo export:web”
publish = “database.json”
Currently my netlify.toml has:
[build]
command = “npx expo export:web”
publish = “.”
[context]
[context.branch]
branch = “easbuild2”
I have also tried moving database.json from the root to a subfolder but no dice. I think the issue is for some reason netlify does not build this file because I don’t see it in the “deploy file browser” when I search for it. I have done a lot of research on the forums and I know netlify doesnt support databases but this is essentially a static file that is doing a simple lookup using a useEffect. That still may be the issue. Appreciate any help you can provide. To give you an idea of the function and the call its used, check out the code below in my NeighborhoodLookup javascript file:
useEffect(() => {
async function readNeighborhoodData() {
try {
// Fetch the JSON data from your local http server during testing
//const response = await fetch(‘http://localhost:8080/database.json’)
// Fetch the JSON data from your Netlify server during production
const response = await fetch('https://neighborhoodlookuptool.netlify.app/database.json');
const data = await response.json();
if (data) {
setNeighborhoodData(data);
setLoading(false);
} else {
console.error('Neighborhood data not found.');
setLoading(false);
}
} catch (error) {
console.error('Error fetching neighborhood data:', error);
setLoading(false);
}
}
If you want to access the file using the above, you need to place the database.json file in the public folder.
Kindly make the changes and then redeploy.
Thanks.
I tried this by creating a new folder called public in the root of my project and putting the database.json file in there. I tried fetching both by using:
and I am still getting the error: “Neighborhood data file not found.”
Do I need to modify to look for this file in the public folder or modify my netlify.toml file in any way. Right now the build gets created into the “web-build folder” maybe everything needs to go into one folder?
sure, I want to keep my repository private. what is your github username or email? You can email me at matt0164@outlook.com if you don’t want to publish your username here.
@matt0164 I can explain why those two files cannot be loaded:
As @clarnx mentioned localhost:8080 is port 8080 of the computer of the person viewing it, so if you view it, then it’s your computer, but if I view it, it’s my computer. Obviously I’m not running your server on port 8080 so it doesn’t exist.
It’s not so much that you need to have the file be in a public folder (that’s build system dependent), what you need is that the file end up in your Publish directory so that it’s deployed to the CDN. Only the files in the Publish directory end up accessible on the site.
With some build systems that’s achieved with a public folder, from which all the files are copied into the build output directory during the build.
thanks that makes sense. I am using react native. Is there a specific setting or directory structure I can use to ensure that my database.json file ends up being deployed to the CDN? Currently my netlify.toml has:
[build]
command = “npx expo export:web”
publish = “.”
So I think this tells it to publish everything fromt the root directory where database.json is located, but it doesn’t make it to my build on the CDN.
@matt0164 I’d guess that the publish of . is superfluous, since it would mean “the current directory” and without having specified a Base directory, it’s probably identical to the default, which is the root /, you may want to just not specify it at all.
I can’t advise on specifics as I don’t work with react native, however one easy way to see what’s going on from a file perspective would be to run your build locally, not to serve it on localhost, but to simply run the build and see what files it produces.
So run npx expo export:web locally, and see what is output.
When you see what is output, you will then have a better idea of what directory you want to set as the Publish directory (note that it usually wouldn’t be the root, as that would deploy source files).
I list the files in the directory, then I run the command that you say is running on Netlify npx expo export:web, then I look if any new directories have appeared:
I assume that .expo is a cache folder for the export as it starts with a . which indicates a “hidden folder”, and that web-build is your actual export, so I see what’s in web-build:
It definitely looks to be the export of the app, lets do a search of the project to see where the database.json files are:
As guessed at, there’s only the one and it’s not making its way into the build output which is in the web-build folder, at this point you probably want to google around to find the right way to include a static asset with your export bundle.
Ignoring doing things “the right way” we can just copy the file into the build folder before deployment, to ensure it makes its way to the CDN. So instead of npx expo export:web we could run npx expo export:web && cp public/* web-build
After running that and going into the web-build folder we can see that the file is now in there:
If you were now to deploy that, with your Publish directory set to web-build, then your file would be accessible at https://neighborhoodlookuptool.netlify.app/database.json
