Page Not Found error on deploying with Netlify

[clearwater]

PLEASE help us help you by writing a good post!

• we need to know your netlify site name. Example: gifted-antelope-58b104.netlify.app
• DNS issues? Tell us the custom domain, tell us the error message! We can’t help if we don’t know your domain.
• Build problems? Link or paste the FULL build log & build settings screenshot

The better the post - the faster the answer.

Can you give me a hand ? my React app has a problem with “Page Not Found”
this is my Github repository that i want to deploy…

As you see, I set two directories, so there might be something wrong on build setting…

[gregraven]

@clearwater Welcome to the Netlify community.

You need to have an index.html file at the top level of your website files. If you download your deployed files and you do not see an index.html file at the top level, that’s why you are seeing the Page Not Found message.

[clearwater]

Thank you for your answer, gregraven !

As you said, there is no ‘index.html’ at the top level, the file is in the directory.
In this project structure, can I troubleshoot the “page not found” error using build setting?

[gregraven]

@clearwater I recommend you search this forum for similar posts, as there have been a lot of them. You might also check this page:

[Support Guide] I’ve deployed my site but I still see "Page not found”

Last reviewed by Netlify Support - August, 2023 Netlify attempts to lookup a file based on several xor filters, and when all of these fail, we end up serving a 404 page. For example, a request made to /example/ would check /example/index.html, /example.html, /example/home.html and several other combinations (not necessarily in the same order) before hitting the 404. However, in case you were not expecting a 404 at a particular URL, you might be interested in finding out the reason and potentia…

[clearwater]

Sorry , I already read the posts and tried what they have said, but I cannot adapt it to my problem
Could you please explain more detail?

also, I have to npm start(build) twice separately

[gregraven]

@clearwater No, because I don’t use those build systems, but perhaps someone else with knowledge about React apps can jump in here?

Maybe you could share with us what you have tried already? Can you build this on your local system?

[hrishikesh]

@clearwater If you can give us access to the repo, it would be much easier. I don’t see why you have to run npm build twice.

[clearwater]

My access is https://elated-saha-bee70d.netlify.app/My project has two directories and they occupy different ports !

• api : it runs as json-server
• movie-selector : client side

I really appreciate your answer. hrishkesh

[clearwater]

you mean the access to my repository?

React App

here is my app deployed on netlify(Page Not Found)

I tried setting a configure file

[hrishikesh]

The configuration file is wrong. It should be command = "CI= npm run build".

[clearwater]

3:34:29 PM: Build ready to start
3:34:31 PM: build-image version: d84c79427e8f83c1ba17bcdd7b3fe38059376b68
3:34:31 PM: build-image tag: v3.6.1
3:34:31 PM: buildbot version: f8648819b2de8637c0fbd87ac67f86c2856f6ad3
3:34:31 PM: Fetching cached dependencies
3:34:31 PM: Starting to download cache of 121.3MB
3:34:32 PM: Finished downloading cache in 1.047637152s
3:34:32 PM: Starting to extract cache
3:34:37 PM: Finished extracting cache in 4.982816612s
3:34:37 PM: Finished fetching cache in 6.101596093s
3:34:37 PM: Starting to prepare the repo for build
3:34:37 PM: Preparing Git Reference refs/heads/main
3:34:39 PM: Different build dir detected, going to use the one specified in the Netlify configuration file: ‘movie-selector-app’ versus ‘’ in the Netlify UI
3:34:39 PM: Different publish path detected, going to use the one specified in the Netlify configuration file: ‘movie-selector-app’ versus ‘/’ in the Netlify UI
3:34:39 PM: Different build command detected, going to use the one specified in the Netlify configuration file: ‘CI= npm run build’ versus ‘’ in the Netlify UI
3:34:39 PM: Starting build script
3:34:39 PM: Installing dependencies
3:34:39 PM: Python version set to 2.7
3:34:39 PM: Started restoring cached node version
3:34:42 PM: Finished restoring cached node version
3:34:43 PM: v12.18.0 is already installed.
3:34:43 PM: Now using node v12.18.0 (npm v6.14.4)
3:34:43 PM: Started restoring cached build plugins
3:34:43 PM: Finished restoring cached build plugins
3:34:44 PM: Attempting ruby version 2.7.1, read from environment
3:34:45 PM: Using ruby version 2.7.1
3:34:45 PM: Using PHP version 5.6
3:34:45 PM: Started restoring cached node modules
3:34:45 PM: Finished restoring cached node modules
3:34:46 PM: Started restoring cached go cache
3:34:46 PM: Finished restoring cached go cache
3:34:46 PM: go version go1.14.4 linux/amd64
3:34:46 PM: go version go1.14.4 linux/amd64
3:34:46 PM: Installing missing commands
3:34:46 PM: Verify run directory
3:34:47 PM: ​
3:34:47 PM: ────────────────────────────────────────────────────────────────
3:34:47 PM: Netlify Build
3:34:47 PM: ────────────────────────────────────────────────────────────────
3:34:47 PM: ​
3:34:47 PM: ❯ Version
3:34:47 PM: @netlify/build 9.0.0
3:34:47 PM: ​
3:34:47 PM: ❯ Flags
3:34:47 PM: deployId: 60222cf5e8deba0007fd7b3c
3:34:47 PM: mode: buildbot
3:34:47 PM: ​
3:34:47 PM: ❯ Current directory
3:34:47 PM: /opt/build/repo/movie-selector-app
3:34:47 PM: ​
3:34:47 PM: ❯ Config file
3:34:47 PM: /opt/build/repo/netlify.toml
3:34:47 PM: ​
3:34:47 PM: ❯ Context
3:34:47 PM: production
3:34:47 PM: ​
3:34:47 PM: ────────────────────────────────────────────────────────────────
3:34:47 PM: 1. build.command from netlify.toml
3:34:47 PM: ────────────────────────────────────────────────────────────────
3:34:47 PM: ​
3:34:47 PM: $ CI= npm run build
3:34:48 PM: > movie-selector-app@0.1.0 build /opt/build/repo/movie-selector-app
3:34:48 PM: > react-scripts build
3:34:50 PM: Creating an optimized production build…
3:35:10 PM: Compiled with warnings.
3:35:10 PM:
3:35:10 PM: src/components/movies/MovieList.js
3:35:10 PM: Line 13:6: React Hook useEffect has a missing dependency: ‘fetch’. Either include it or remove the dependency array react-hooks/exhaustive-deps
3:35:10 PM: src/components/movies/Storage.js
3:35:10 PM: Line 11:6: React Hook useEffect has a missing dependency: ‘fetch’. Either include it or remove the dependency array react-hooks/exhaustive-deps
3:35:10 PM: Search for the keywords to learn more about each warning.
3:35:10 PM: To ignore, add // eslint-disable-next-line to the line before.
3:35:10 PM: File sizes after gzip:
3:35:10 PM: 84.69 KB build/static/js/2.8495fa2f.chunk.js
3:35:10 PM: 2.17 KB build/static/js/main.60bedbea.chunk.js
3:35:10 PM: 1001 B build/static/css/main.efd6b695.chunk.css
3:35:10 PM: 780 B build/static/js/runtime-main.5289bb64.js
3:35:10 PM: The project was built assuming it is hosted at /.
3:35:10 PM: You can control this with the homepage field in your package.json.
3:35:10 PM: The build folder is ready to be deployed.
3:35:10 PM: You may serve it with a static server:
3:35:10 PM: npm install -g serve
3:35:10 PM: serve -s build
3:35:10 PM: Find out more about deployment here:
3:35:10 PM: Deployment | Create React App
3:35:10 PM: ​
3:35:10 PM: (build.command completed in 22.8s)
3:35:10 PM: ​
3:35:10 PM: ────────────────────────────────────────────────────────────────
3:35:10 PM: 2. Deploy site
3:35:10 PM: ────────────────────────────────────────────────────────────────
3:35:10 PM: ​
3:35:10 PM: Starting to deploy site from ‘movie-selector-app’
3:35:11 PM: Creating deploy tree
3:35:11 PM: Creating deploy upload records
3:35:11 PM: 11 new files to upload
3:35:11 PM: 0 new functions to upload
3:35:11 PM: Site deploy was successfully initiated
3:35:11 PM: ​
3:35:11 PM: (Deploy site completed in 915ms)
3:35:11 PM: ​
3:35:11 PM: ────────────────────────────────────────────────────────────────
3:35:11 PM: Netlify Build Complete
3:35:11 PM: ────────────────────────────────────────────────────────────────
3:35:11 PM: ​
3:35:11 PM: (Netlify Build completed in 23.8s)
3:35:11 PM: Caching artifacts
3:35:11 PM: Starting post processing
3:35:11 PM: Started saving node modules
3:35:11 PM: Finished saving node modules
3:35:11 PM: Started saving build plugins
3:35:11 PM: Finished saving build plugins
3:35:11 PM: Started saving pip cache
3:35:11 PM: Finished saving pip cache
3:35:11 PM: Started saving emacs cask dependencies
3:35:11 PM: Post processing - HTML
3:35:11 PM: Finished saving emacs cask dependencies
3:35:11 PM: Started saving maven dependencies
3:35:11 PM: Finished saving maven dependencies
3:35:11 PM: Started saving boot dependencies
3:35:12 PM: Finished saving boot dependencies
3:35:12 PM: Started saving rust rustup cache
3:35:12 PM: Finished saving rust rustup cache
3:35:12 PM: Started saving go dependencies
3:35:12 PM: Finished saving go dependencies
3:35:12 PM: Build script success
3:35:12 PM: Post processing - header rules
3:35:12 PM: Post processing - redirect rules
3:35:12 PM: Post processing done
3:35:12 PM: Site is live
3:35:33 PM: Finished processing build request in 1m2.079175297s

I modified the setting file as you wrote.
Here is log.
It was published, not failed. However the page is still not found.

[hrishikesh]

Then you’re not generating any index.html in your build. Kindly share the repo.

[clearwater]

GitHub - clearwater92/my-movie-selector

It is my repository. you mean this?

[clearwater]

Here is another repository, not for now
I deployed successfully that time.

GitHub - clearwater92/yt-app

there is publish directory and there is an index.html
btw i dont know how to fix …

[hrishikesh]

I just tried this repo and it seems to work. Just add publish = "build" to your netlify.toml right below the command line. This is usually configured in the UI, but, the TOML would work too.

[clearwater]

Thank you so much…hrishikesh! I really appreciate you. Bless you