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?

Eliathas

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.

Adamsite

Do I need to have the _redirects and /* /index.html 200 inside that too? – Eliathas

_redirects is the file name in which /* /index.html 200 will be there – Adamsite

For details look for "Support for client-side routing" in create-react-app docs. – Bolanger

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) – Dribble

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.

Anapest

Answer 3

The main way I do this in my websites is to put it inside of _redirects.

Here is what should be inside of the file:

/* /index.html 200

This should be placed inside of the react-project-name/public/ directory, or the directory that appears in the public accessible files ( example: my website _redirects, although it doesn't appear, it is there. )

Make sure on your Netlify build settings, you set the build directory to the correct one ( your project, which should be where the package.json is located ).

The _redirects file allows Netlify to route all navigation through the index.html file, instead of trying to load a different "page". Since React is technically a single-page application, it only uses one HTML file ( index.html ). The traffic from the pathname is sent to the index.html file.

Without the _redirects file, you wouldn't be able to refresh if you were on a sub-directory inside of your website. It would give a Netlify "Page not found" error. Example of the sub-directory is cadenmf.com/defs/frontend-developer.

Laureenlaurel

Answer 4

When u face this issue its better to change the build command from

Vite Build

to

react-scripts build && cp _redirects build/_redirects

This will auto generate the _redirects file with the required content and you can push latest changes as well and ut will take those changes also without any routing issue.

Hope this helps

Errantry