Redirects netlify.toml not working

I know people have asked about this a lot on the forums. I’ve had it working on a bunch of previous sites but can no longer get redirects to work properly for an SPA.

This is netlify.toml file I have:

[build]
  base = "client"
  publish = "build"
  command = "yarn build"

# The following redirect is intended for use with most SPAs that handle routing internally.
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

The project has a client folder at the root of the project. Whether I place this file at the root of the project or in the client doesn’t help. It actually breaks the site completely when placed in the client folder with nothing loading. It’s a simple Create React App.
Also tried using redirects file but no luck either.

How is your project laid out in terms of package.json? You shouldn’t set base to “client” unless package.json is in the client folder.

In terms of the redirects, what the redirect setting is supposed to do is make it so that you get index.html if you request /some-react-router-path but not if you request /my-css.abcef.css. To do that, try adding “force = false” and see if it helps.

The package.json is in the client folder. The client folder is a create react app

hey @elie, welcome!

Your package.json should be in your project root, not in a subdirectory:

Your netlify.toml also belongs in your project root:

Pretty sure the package.json does not need to be in the root directory. From the link you sent:

Base directory : Optional field that specifies the directory to change to before starting a build. This is where we will look for dependency management files such as package.json / .nvmrc /etc. A common use for this field is linking a site to a monorepo (a repository that contains multiple sites or apps, each in its own subdirectory).

hi @elie, i should have been more clear. It does need to be in the root unless you are specifying a different build directory in your netlify settings. Could you post a screenshot of those maybe?

Project structure:

client, server, netlify.toml and README.md are at root.

And the netlify.toml I posted above:

[build]
  base = "client"
  publish = "build"
  command = "yarn build"

# The following redirect is intended for use with most SPAs that handle routing internally.
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Hi, @elie. The redirect above should be detected in either the base directory of the repo or the base of the publish directory. Both should work and it is curious that neither does.

Which Netlify site is this for? We’ll research that to research why the redirect isn’t working.

Can I send you the info in a private message? Or over email?

You can private message (PM) that to one of our support staff and I’ve confirmed that PMs are enabled for your community login. Note, that only one person can see the PM and this will likely mean a slower reply than posting the information publicly. Please feel free to reply to however you prefer though.

1 Like

Hi, @elie, I’ve tested this behavior and this is what I have found.

For clarity:

  • base directory = the build.base directory (the base directory for the Netlify build)
  • base of the repo = the base directory of the Git repo itself

If the netlify.toml file specifies a base then the build process starts over from that directory. However, this has a side effect of only processing the build.base setting itself. No other settings from that netlify.toml will be used.

There are several possible solutions for this. Some of those are:

  • have a second copy of the netlify.toml file with the required settings, including redirects, in the base directory
  • use a _redirects file in the publish directory (not the base directory) and have the redirects loaded from that file instead

Changing the base directory in netlify.toml also means the TOML file build command will not be used from that file. You must then either have a second netlify.toml file in the base directory which does contains the build command plus publish directory, the redirects, and any other settings required or those must be specified in the web UI settings for the site at Netlify.

I’d suggest the second netlify.toml file in most cases. There may be instances where you are better off setting these in the Netlify settings for the site in our web app though.

​Please let us know if there are other questions.

1 Like

Thanks!

Finally got it working with 2 netlify.toml files.

For others that run into this. In the root folder:

[build]
  base = "client"

In the client folder:

[build]
  publish = "build"
  command = "yarn build"

# The following redirect is intended for use with most SPAs that handle routing internally.
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200