Catch all redirect for create-react-app in netlify
To catch all the redirects use /* /index.html 200
in _redirects
file.
According to the netlify docs, the _redirects
file should be in your root build directory.
create-react-app by default creates all build files under the folder named build
so just modify the build scripts
in package.json
to add the _redirects
in the build folder after building the app.
example.
"scripts": {
....
"build": "react-scripts build && echo '/* /index.html 200' | cat >build/_redirects ",
...
}
If you have multiple redirects to make things easier you can create a _redirects
file with all the redirects in your root(/
) folder of the CRA
then in the package.json
will become
"scripts": {
....
"build": "react-scripts build && cp _redirects build/_redirects",
...
}
make sure that the build command in your netlify is yarn run build
or npm run build
after making the changes in package.json
simply rebuild your code.
UPDATED: much better way
IN CRA(Create React App), the build script copies every file in public directory to the build folder so just put the _redirects with the rules in the public directory without changing anything and you are good to go.
There are two (2) ways to create redirects when hosting on Netlify.
_redirects
file in the root of thepublish
directory (/build
in CRA)[[redirects]]
list in thenetlify.toml
config file at the root of the repository (project)
/public/_redirects
(option 1)
Put the _redirects
in the /public
directory. CRA will copy all files in /public
to the build directory when running the build command.
/public/_redirects
/* /index.html 200
/netlify.toml
(option 2)
Put the netlify.toml
in the root (/
) directory of your project (repository) being deployed to Netlify. You can add the redirect lines to the end of the netlify.toml
if it exists already.
/netlify.toml
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
force = false
Note: These options can be combined, but remember the _redirects
will overwrite an entry with the same source (from) path in the netlify.toml
.
You can also use the redirects playground to convert from one format to the other.