Jamstack Explorers

Exploring Netlify Redirects with Phil Hawksworth

Localization with conditional redirects

Learn how different conditions can be used to influence your redirect rules.

We'll explore:

  • Generating a redirects config and localised content
  • Routing according to languages settings
  • How configurations can generated by your build

Video Transcript

Now we're going to take a look at conditional redirects. Now you might argue that we've already been looking at conditional redirects after all redirects happened on the condition of, deciding which incoming URL route we want to route from a, and then dictating which one we'd like that to go to. So there is a condition, I guess they are already.

But in Netlify redirects. We have a few different parameters and one of those are conditions. A good place to look are the Netlify docs on docs.netlify.com and if you go to the redirects here, you can actually start to see some of the options in our configuration that we've already been using. We've been using the, from the, to the status of the other things along the way here and now we're going to be looking at a condition.

So a conditional redirect will have to satisfy certain conditions that will specify. And I configuration in order to. To execute that redirect.

Why would we do that? Well this is great for if we want to have localization and internationalization and our site. So in our in our now familiar Vapourium site, what we're going to do is we're going to start adding some localized content into this site and then routing people to it based on the language that they've got their browser set to. So the place we'll start is the store page. Now at the moment, there is no store page. We've moved the store page to a new URL. We've moved it to a couple of different URLs. We have one for the English version of the page, which is what we've been looking at before.

And we have another which is for a Spanish version of the page, which is the same thing just translated into Spanish. Now behind the scenes we have a couple of different store pages being outputs to our dist folder where we can then go off and find them in our es store index file or the en store index file.

This is a very common pattern for generating sites that have lots of localized content. A static site generators are great at abstracting the data from the templates and content strings are no different to that. So we've got a very simplistic version of this in here, but ultimately what we want to be able to do is generate these different localized pages so that we can start routing traffic to those. Accordingly.

How would we do that? Well, we'll gonna start to add. Some more redirect rules. So that start shaping the traffic. People who are coming into the store page, we want to route them to a Spanish version of the page. Which leaves on that URL. We'll do that with a status. Of 302, so we'll do a temporary redirect for now. And we're going to do that only if the following conditions are true.

Now, this is the toml format for this. What we're going to do here is we're going to say. That we're going to look for the language and for that to satisfy one of the followings, that's gonna equal. So it's going to equal one of the following array items. And this is going to be the language string. In the user's browser. So Netlify's CDN ,Netlify's edge network exposes some of these headers to the redirects engine. So it exposes the language . It also exposes the location and other few bits and pieces besides. So we're going to be looking first of all, for the language and if it matches there, if it's the Spanish language header we will send the traffic that goes coming on this URL to this different URL. So let's, let's save that. The site is already running with Netlify dev locally. Let's go back to the browser. And see if that has, has taken effect. Well, if I hit that, first of all, No, it hasn't taken effect, I still go straight through to the store URL which currently isn't being served. And that's because I have English setters my as my language or my system. I have a little browser extension here that lets me change the language just for the purpose of testing and demonstrations. So I set my, my language headed to Spanish. And in fact, it's reloaded the page immediately behind the scenes and you can see now it's redirected me. Let's just let's just hit that one more time explicitly so we can see that happening. Yeah. And it's redirecting to the Spanish language version of the site.

These URLs, I haven't translated the URLs underneath these, just the language so we can, we can navigate around. And the only page that I'm currently translating is, is the, the store page, but we can see that's redirecting as appropriate. What then, if I change this back again, if I change this back to English. And go to the store page. We can see we've still got this problem with, there is no page beneath that. So we've got a couple of options there. Well, first of all first of all, we could. We could just duplicate this and then for the English language users we could set an explicit rule that takes them there. The other thing of course we could do is we could provide a catch all. So if there were no conditions met... so there are no conditions there. So irrespective of what the language settings are in the, in the, in the browser, then we'll have a default that falls back to this this English language page as well. So let's take a look here. I think perhaps now if I just reload. Yeah, there we are. So now store for me will redirect to the English version of the page because I'm in English there. If I once again toggle through Spanish. And go to the store page it's redirected me to the Spanish page and if I choose some other languages say Indonesian... what's going to happen here when we never get to the store page. Yes. It, it, it felt defaults to the English page.

So here we are with the with the redirects specified here in the toml.

It can be useful to not specify all of these languages here, but actually used them in our redirects configuration file.

You may recall that we've got two places. We can specify redirects either here or in a, within a file that we serve as part of the the site itself. So I'm gonna actually take those out and will reimplement those by putting them into our sites we've created a new file, _redirect. Which is going to get built into our dist folder as well. I think we'll probably see it. They're already there, yeah there it is. Blank at the moment.

But we can, we can do the same exact same operation as we did before, but we can do that here. And I quite like to do this here, because this is also a config file, which can get generated by your build. So we can implement the same exact thing here. In the redirects file. Let's say anyone who's visiting the store page, we'll go to the the Spanish version of the store page. We'll do that with a 301.

And that's for anyone who's visiting with the language set to Spanish. Now we could do as many as we like here, we can specify Portuguese specify as many languages as we like here. Comma separated. Those will all satisfy that rule and have the same, the same action as we just saw in the toml file. I like to do this here because you can, well, imagine this is the kind of thing that you could put in some kind of,

for loop. In whatever your templating language is here that generates this. And perhaps this could be abstracted into whatever language you have. So you might have a list of many languages and many abstracted language string files that you're using in your site generators that output these various different pages along the way. This is a helpful way of also then being able to generate the redirects configuration. So if you're supporting, maybe dozens of languages in your build, you can generate this automatically. As well.

We go back to our toml file and let's reinstate where we just had a moment ago. Yeah. So we do also have the option of not doing 302s we might want to do 200s. So what would be the results if we did 200s? Well, you may recall this results in a redirect, but I'm going to deploy this as well as sort of also just demonstrate this getting deployed to Netlify. Deploy.... I have to set up as a site already. So if we send that to our site. Our site gets deployed. The redirects are propagated to the CDN. What happens if we go to the store page? Well We all served at the English version. Now we haven't been redirected to the dash four slash EN version of the site. Because we are rewriting now, rather than redirecting, I've gone to the English version because although I'm set to Indonesian it will default to the English version of the background that service also look at Spanish.

So again, now we've seen the Spanish content being proxied or rewritten rather to this URL. So this works nicely as well and it means that it maintains the same URLs. However, it does mean that it's more difficult for users to choose different languages and address different language versions of the site based on the URL. It's also worth noting that these conditions can also be satisfied, not just from the the language settings in the user's browser.

We can also detect the country or language, not just from the header. That's been detected by the Netlify edge network the CDN, but in fact, these can also be specified. In a cookie as well. So notifies redirects engine will detect the country or the language header that's been included in the request. Or indeed, if there is an NF, a Netlify Lang or an NF Netlify country, cookie being passed in, we will honor that as well. So it means that you will be able to apply the same kind of routing rules. Based either on the header value or if there's a cookie value it will do that as well. This is great for being able to offer people the option to choose which language they want to browse this store on. So you could have country or language selecters as well.

So, this is how you can start adding conditions, do your redirects, so you can choose routes based on conditions, such as language settings , geographical location, and some other things as well. So take a look at the Netlify docs for more information on that, remembering also that you can generate your redirect configuration as a part of your build.


your progress