Fix issues with Netlify _redirects file not working for a Gatsby site
— Gatsby, Netlify, Web Development, Quick Tip — 2 min read
This is just a quick tip in case you're facing the same issue as I did today. I was trying to setup a redirect on Netlify for my Gatsby site. I read in Netlify's documentation that one of the options to setup redirects is to use a
_redirects file. I went ahead with this option and placed this file at the root of my Gatsby site codebase and published it and...it didn't work.😞
A bit of googling around revealed that we need to take care of two things to make this work.
1. You should have
I already had this installed so no further action was required on my end. If you don't have this installed then you can install this using the following command.
npm install gatsby-plugin-netlify
2. Place your
_redirects file in a folder called
static at the root of your Gatsby codebase
If this directory does not exist then create it.
This works because Netlify requires that the
_redirects file should be placed inside your web root, not your gatsby codebase. Gatsby builds your site from your source code and then places all the publicly accessible files in a
public directory which becomes the web root of your site. This is where we would want to place our
_redirects file. But Netlify builds the gatsby site for us dynamically so we have no way to specify that we want to place this file in our web root.
But luckily for us, the contents of the
static folder are moved to the web root during the build step. We can verify this locally by executing the
gatsby develop command.
After adding the
_redirects file to the
static folder, run
gatsby develop and when it's done running, you'll be able to see the
_redirects file automatically added to your
This is what worked for me and hopefully it'll work for you too.