This content originally appeared on DEV Community and was authored by Michal Bryxí
Ever uploaded your cool new project to Netlify and everything just seemed to work, but you seemingly randomly get a "Page Not Found" error? The reason might be very simple as well as the solution.
The problem
- Open the URL of your deployed empress-blog instance on your Netlify account
- Navigate to any subpage that changes the URL
- Execute hard, full page reload (cmd + shift + R)
- See Netlify 404 page:
The solution
Create _redirects file in /public folder with following content:
# /public/_redirects
/* /index.html 200
Deploy your site again. And the problem should be gone.
Why this works
Single Page Applications (SPAs) usually consist of three files: index.html, everything.js and everything.css. Although it seems like the user can click on various links, navigate around and as a side effect change URL, those are all just a mirage. Well, sort of. The clicking happens for sure and the URL in the address bar also change. Just not in the "traditional" sense.
After a click, the browser is not sending a request to the server. Instead, some JavaScript magic happens and it manipulates the content of the page and the URL bar to make it seem like the page has changed.
But unfortunately when you do a hard reload the browser sends a request to the server for whatever page is currently in the URL. But the server does not have those. Only one file: index.html. So how does the _redirects file save the day? Let's break down the syntax:
-
/*matcher: every possible URL that the user requested (the star is a wildcard) -
/index.htmlif the matcher matched, then serve this page instead -
200an "OK" HTTP response code from the server
So a request to every page will be redirected to our only file (index.html) and that one will then display respective content, because of JavaScript SPA magic.
Note
- The issue described here is not specific to empress-blog nor to Netlify. It's just the combination where I see it most often. So I used it as an example to talk about something specific.
- Any SPA deployed via any hosting provider will have this problem.
Photo by Nathan Dumlao on Unsplash
This content originally appeared on DEV Community and was authored by Michal Bryxí
Michal Bryxí | Sciencx (2021-07-04T20:48:47+00:00) empress-blog + netlify = Page Not Found?. Retrieved from https://www.scien.cx/2021/07/04/empress-blog-netlify-page-not-found/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.