25

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?

Sooraj
  • 9,717
  • 9
  • 64
  • 99

2 Answers2

68

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.

saurabh
  • 2,553
  • 2
  • 21
  • 28
  • Do I need to have the `_redirects` and `/* /index.html 200` inside that too? – Sooraj May 05 '19 at 09:32
  • `_redirects` is the file name in which `/* /index.html 200` will be there – saurabh May 05 '19 at 09:39
  • For details look for "Support for client-side routing" in `create-react-app` [docs](https://create-react-app.dev/docs/deployment/#netlify). – Juan Marco Feb 25 '20 at 21:27
  • 1
    You can actually create a `_redirects` file with the single line in the `/public` folder. The `build` command will copy the file to the `/build` directory. No need to explicitly create or copy the file on the fly. That way, you can also check it into your Git (or add to `.gitignore` if you don't want it there) – Traveling Tech Guy Sep 02 '20 at 03:24
27

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.

talves
  • 13,993
  • 5
  • 40
  • 63