Netlify, Vite, deploy and Page Not Found error

I know that a lot of people struggling with the problem when their web app works perfectly on localhost, but on Netlify server after refreshing page they got error Page Not Found. Why and how it should be fixed?

The key of this problem is not how Netlify works. Actually Netlify or something else is not matters, because it can be another server. The problem is the fact, that your server doesnt know how to respond on your requests properly. Despite the fact that Ill will refer to Netlify, you should keep in mind that it could be something else.

How Netlify [server] saves your files? There is a dist directory with similar files:

dist  index.html  hash.js  icon.svg  favicon.ico

We have a Netlify server and we dont have access to it, we cannot directly code that if a request comes to a specific address, server must give this specific file. We simply dont have such an opportunity. But all that our Netlify server has is dist directory with bunch of files. So if there is a request to https://netlify.app/icon.svg, our Netlify server should respond with a file icon.svg from dist as well. But what if we want to get https://netlify.app/example/1? We do have this route in our SPA and everything works well on localhost, but we well get Not Found Page error. Why? Just because there is no that file in our dist directory. Only thing that we have is index.html so we have to set up redirects, because we want to give responsibility of taking care of routes to SPA. So our server has to respond with index.html if there is no file in dist with matched name.

There is a bunch of ways to do it and of course as I want you to remember, there is nothing specific to Netlify till next approach. But if youre using Vite I also recommend you read this Public Folder Documentation.

Well, if were considering Netlify, all I need is create netlify.toml in project directory:

// netlify.toml[[redirects]]  from = "/*"  to = "/index.html"  status = 200

And thats it! Error is gone.

Honestly I dont really like this idea when I can not control the server and creating files such as netlify.toml is the only way to hook our (not really our) server makes me awkward. But I guess this is another indicator that we need to move to something more low-level than Netlify, although it is really good for pet-projects.

And thanks for reading :)