Catch all redirect for create-react-app in netlify

Question

I have a built using create-react-app and hosted in netlify.

In this link it is mentioned that I need to write redirect rules for SPAs.

/*    /index.html   200

But redirecting to index.html is not working since no view is rendered with that URL. I also tried redirecting to / like

[[redirects]]
  from = "/*"
  to = "/"

but this is also not working.

How do I do a catch-all redirect for create-react-app?

Answer 1

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.

Answer 2

There are two (2) ways to create redirects when hosting on Netlify.

• _redirects file in the root of the publish directory (/build in CRA)
• [[redirects]] list in the netlify.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.