CODEWITHSUNDEEP
reactjscreate-react-appnetlify
Sooraj
Sooraj

Reputation: 10567

Catch all redirect for create-react-app in netlify

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?

Upvotes: 30

Views: 35918

Answers (4)

Wasiuddin Mansoori
Wasiuddin Mansoori

Reputation: 1

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

Upvotes: 0

Caden Finkelstein
Caden Finkelstein

Reputation: 81

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.

Upvotes: 1

saurabh
saurabh

Reputation: 2713

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.

Upvotes: 73

talves
talves

Reputation: 14353

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.

Upvotes: 30

Related Questions