I have been testing creating some simple one page web applications using Replit and I’m not looking to host it in Netify but I’m running into build issues which I believe are related to the folder structure that Replit created.
I either receive 404 error for https://goliathprotocol.netlify.app/ or make some changes to the build settings I can at least get the web app to launch but none of the functionality works.
After two days of changes and countless discussions with ChatGPT I decided to post for some help before I try debugging via VS Code or Cursor.
My index.html exist in a client directory off the root so this is what I add to my netify.toml but it fails. Leaving it empty returns a 404 error when accessing the site.
@flexfanatic You’ve not provided enough detail to be able to provide any direct instructions.
To try and debug yourself, you can use the ‘Deploy File Browser’ to see what files you’ve deployed:
https://answers.netlify.com/t/new-feature-browse-files-in-your-deploy-with-the-deploy-file-browser/105196
If there is no index.html in the root, (and you have no other serverless functions that would handle that route), then you’re going to see the Page Not Found (404) error when accessing your site.
If you want someone else to check what you have, you’ll need to actually show what you have.
Preferably with a link to a public repository.
Repo is GitHub - flexfanatic/NetworkProtocolTesterv2 but yes, the index is not located in the root directory. Its located in the client directory so I thought I could reference that in my build settings.
something similar to:
@flexfanatic That won’t work.
It seems to be a misunderstanding of both the project files and what the Base directory is for.
The Base directory is for: selecting what folder Netlify’s CI will start within.
Your client folder contains source files for a portion of your application.
The Base directory is:
- Base directory: directory where Netlify checks for dependency management files such as
package.json or .nvmrc, installs dependencies, and runs your build command. The build system will use this directory to perform caching during the build process. If not set, the base directory defaults to the root of the repository.
So, if you set it to client then Netlify wouldn’t be factoring in any of the files above that directory (which is basically all your configuration files, your package.json etc).
Note: You’ve accidentally named your netlify.toml with netify.toml
Even if you were to deploy the client folder, it’s just source code and won’t work without being built.
You can confirm this yourself by going to your project root locally and running npx serve client.
It’s possible this project hasn’t been constructed in a way where it can be deployed to Netlify.
Since you’re using AI to create it, you may want to go back to the AI’s and instruct them that the project should be constructed so that it can be hosted on Netlify.
When you run the build for your project, it’s outputting to dist, but also within public.
The index.js file it’s producing is why I say the project might not be constructed in a Netlify way, since it wants to run an express server, and express works on Netlify like this:
https://docs.netlify.com/frameworks/express/
The index.html you’re expecting to see is in /dist/public/
But also isn’t working when loaded:
https://goliathprotocol.netlify.app/public/
.. which is due to the various asset paths being wrong
1 Like
I’ll go back to Replit and also perform some testing there. Good catch on the file name being incorrect but question.
If I do create a toml file and add to the project should I leave all fields blank in the build settings under Deploys in Netify? Which gets ignored?
@flexfanatic Those questions are addressed in the documentation, there’s even a big warning box, see:
https://docs.netlify.com/configure-builds/file-based-configuration/
