Multi-Region Sites on Netlify

It’s not immediately obvious on Nelify how you can host multiple sites all under the same domain when using multiple Netlify applications. This is probably because Netlify prefers to map a domain to a particular application, but you can work around this by using rewites to map url paths to sub domains.

This is really useful should you have a multi-region site where you want to keep all the ‘sites’ under the same domain - rather than split them across different sub-domains or TLD’s.

So, for example, if you had a site designed for 3 regions: Britain, Ireland & Germany

Site Structure

and you wanted the URL structure to be like the following:

https://example.com/gb/
https://example.com/ie/
https://example.com/de/

First you need to great 4 netlify applications, one for each of the site specific apps and an 4th for the master site to redirect to the others. Each of the site specific applications should be mapped to a subdomain. You then end up with a setup like this:

App "Master" - example.com
App "GB" - gb.example.com
App "IE" - ie.example.com
App "DE" - de.example.com

You can then configure the master application to redirect to a site specific app on a specific url path. The netlify.toml on the main site looks like this:

[[redirects]]
  from = "/gb/*"
  to = "https://gb.example.com/:splat"
  status = 200

[[redirects]]
  from = "/de/*"
  to = "https://de.example.com/:splat"
  status = 200

[[redirects]]
  from = "/ie/*"
  to = "https://ie.example.com/:splat"
  status = 200

_Note: If the site specific applications use absolute URL’s you need to remeber to add the path prefix otherwise the url may be resolved by the master app.

Once setup, you can add an additional layer to redirect the traffic automatically based on the calling users IP address by adding further redirects to the master sites netlify.toml:

[[redirects]]
  from = "/*"
  to = "/gb/"
  status = 302
  force = true
  conditions = {Country = ["gb"]}

[[redirects]]
  from = "/*"
  to = "/de/"
  status = 302
  force = true
  conditions = {Country = ["de"]}

[[redirects]]
  from = "/*"
  to = "/ie/"
  status = 302
  force = true
  conditions = {Country = ["ie"]}

Once donem these redirects will push users from example.com/ to example.com/<site path> automatically. It can make testing difficult however, so you can override this behaviour by setting a nf_country cookie with the correct ISO 3166 country code.

A full working example can be found on Github and a sample Netlify app.