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 doesn’t know how to respond on your requests properly. Despite the fact that I’ll 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 don’t 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 don’t 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 we’ll 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 you’re using Vite I also recommend you read this Public Folder Documentation.

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

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

And that’s it! Error is gone.

Honestly I don’t 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 :)