Sung.codes

2019-07-25

Page Not Found on Netlify with MDX-Deck

mdx, netlify, tips

banner

_Photo by Sora Sagano on _Unsplash

You might run into the following error after deploying an MDX-Deck presentation decks to Netlify.

Please refer to my friend, Dave Follett's post on how to deploy to Netlify.

If you are having trouble with React Router, check out Page Not Found on Netlify with React Router, instead.

Page Not Found
Looks like you’ve followed a broken link or entered a URL that doesn’t exist on this site.

How did the error occur?

MDX-Deck (version <= 2 is based on create-react-app while v3 is based on Gatsby) routing is handled on client-side while Netlify (server-side) does not know how to handle the route.

How can we fix it?

Netlify offers a special file, _redirects, which you can add to your code base and let Netlify handle how to handle the URL that is not handled on the client-side.

But the problem is that, when you build MDX-deck content, the top level _redirect file isn't copied over to public/ distribution folder.

So you can specify the same redirects rule as you would have done in _redirects file in netlify.toml file.

Netlify TOML file contains an instruction for Netlify how to build & deploy your site

https://gist.github.com/dance2die/082d03441aa832ee65f80eb5e3c9f322

[build] contains instruction on how to deploy your site (found in Dave's post above).

[[redirect]] has the same instruction that you would have done for React Router but in TOML format.
You are instructing Netlify to redirect all requests to /index.html, from which client-side router takes over.

Now when you go to any of following links, you won't be faced with "Page Not Found" error page.

Resources