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.
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?
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.
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.
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.
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
Hi there @luke, I’m about 2 hours deep into this issue myself and I finally came across this post and another that’s similar.
For me, I have about 5 active sites that have been using a very similar setup to @elie, that is - the client type folder that holds a React/Vue app. It’s a very common pattern when the API and the client facing code live in the same repo. My netlify.toml, that I’ve been using for about 2 years now, looks exactly the same as the original posted by @elie, and it’s never been a problem, just like everything I use that Netlify makes. Literally has never given me a single issue.
I recently did some housekeeping and moved git hosts, so I basically hooked up a new git account to my Netlify account, and redeployed my sites. All of them broke, and I could not find any information about this except just a few posts, and they were extremely hard to find.
I’m going to try the double-toml method that @elie found success with, but I’d like to ask, is this information mentioned anywhere? I think there’s going to be a lot of issues in the future when the monorepo changes get forced to older setups, if that’ll ever happen. Just figured I’d ask because I found it extremely strange and unlike anything I’ve every used from Netlify - which of course usually has the easiest and most intuitive options available. I’ll also update the docs for this if they’re not there, just let me know. Thanks.
Hey @johndatserakis,
It sounds like when you linked new repos, your new sites were automatically configured to use the monorepo support that we rolled out in October 2019. There’s a note about the change in our docs here:
And a blog announcement here:
That did change how our netlify.toml’s are processed, and I hear you that the information was hard to find. Searching for “monorepo” in our forum may surface some other threads that may be helpful for you. I hope this helps and please let us know if you run into issues setting up your config files with this new setup.
Thanks @jen. Yea, it seems like the re-linking is was spurred the issue. I actually had been to both those links in my research but didn’t see anything speaking directly on projects that have their client facing code in a nested folder, like @elie and I have, so solutions like the double-toml trick that @luke suggested didn’t exactly pop out at me.
That being said, there’s a lot of good info in that common configurations page, so I will continue to research that and perhaps figure out a way to add a contribution somehow, explaining the double-toml trick to others that have nested folders. Thank you for your help!
@luke is this noted in the documentation anywhere?
I just sunk an hour trying to work out what was wrong, why it worked with _redirects but not in netlify.toml and I eventually solved it after finding your post.
I trolled the docs and couldn’t find anything immediately obvious to indicate this was the problem (or intended behaviour…?).
A netlify.toml validator that points this out would be very useful, or if it was clearly documented, which, correct my if I’m wrong, but I don’t think it is at the moment.
Wanted to share a small update here, which is that we changed the wording in our docs’ sample configuration file to try to address some of the confusion here:
[build]
# Directory to change to before starting a build.
# This is where we will look for package.json/.nvmrc/etc.
base = "project/"
# Directory that contains the deploy-ready HTML files and assets generated by
# the build. This is relative to the base directory if one has been set, or the
# root directory if a base has not been set. This sample publishes the
# directory located at the absolute path "root/project/build-output"
publish = "build-output/"
...
This is just an interim step- we’re also having conversations internally about how to better document the “base” directory.
I also just sunk some time to figure this out. The issue is that once netlify.toml sees [build.base] it stops processing the netlify.toml and restarts the build process in the new directory. The documentation for base should say something like “WARNING: Changing the base means netlify will ignore the rest of this netlify.toml file. Any additional settings should appear in a netlify.toml file located in the new base path.”
A next simple step would be a validator, when it sees a netlify.toml file with [build.base] and that toml file has any additional settings in it, you should warn the user that netlify ignored all the other settings and that they should make a new netlify.toml in the base dir with those settings. This would fix most of the problems that people are having.
