Jamstack Explorers

Exploring Netlify Redirects with Phil Hawksworth

Getting started configuring redirects

Take control of URL routing at the Netlify Edge by adding redirect configuration to your projects.

To get started we'll explore:

  • Creating a new site with the Netlify CLI
  • Deploying a site directory with netlify deploy
  • Adding a _redirects file to configure Netlify redirects
  • Adding redirects configuration to the netlify.toml file

Video Transcript

Let's take a look at a project where we can start to answer some redirects. And explore this, this feature of Netlify. So we have a simple site here. It may be familiar from another mission which the Vapourium, it's a fictional e-commerce sites. We've got a homepage here. We have a store page actually a product page here. On the store URL. There's also a blog, which just has a couple of example posts in here that we could go and explore on blog and then the name of the post. And there's also an about us page, which doesn't exist yet. We've just gotten about URL in the navigation. Nothing behind that at the moment. We'll come to that shortly.

The code for this is just a simple set of HTML. This is something that I generated earlier on. And in later stages, we'll look at that static site generator, but for the moment, all we care about are the resources that we're serving. So we have it index dot HTML file we have a few folders, like for the store page, which also has a file and so on and so forth. So it's a, it's a fairly simple pre-generated set of assets that we want to start to embellish and add some redirects to. Wouldn't it be nice for instance, if we could start to add redirects for other URLs to different places. So perhaps we could have something like a latest take us straight through which doesn't exist at the moment. Take us straight through perhaps to the latest news on the blog page. Well as it stands,

The project is just HTML. So there's no server configuration for redirects or, or proxying or rewrites or any of that. But we need to be able to have that configuration. What kind of thing might be like, well, let's actually make a little redirects file here so that we can start experimenting and thinking about what we, what we might want to create. Well, we did just say what about having the latest URL pass through to the, the blog? Would it be nice if we could just write something like that? Well, this is nice and descriptive, and indeed, this is all we need to start to add redirects configuration to the Netlify CDN.

If I saved that as this file underscore redirects and send that to Netlify at the roots of my my generated content. So at the root of my published directory, Then I would configure Netlify too. To serve this. Let's have a look at doing that. There's a few ways that we could add this site to Netlify in another mission that you'll perhaps have seen has us connecting the site to Netlify using Git, rather than. Leaning on Git, which I must admit is my preferred way to work, we're just going to be pushing these assets to Netlify through a deploy command. We need for that. The Netlify CLI now from the Netlify docs, you can get all the information you need about the Netlify CLI. This is installed via NPM. So you can run this command to install the CLI, and that will give you globally access to this command. The Netlify command or NTL is. Is an alias for short. So I'd been, I hadn't, I've installed that already and now I'm going to make make use of it.

But before I do that, I'm going to add a tiny bit of configuration to our project. So that Netlify knows how to deploy that, so I'm going to create a new file netlify.toml. And this is the standard configuration for any Netlify project. And I'm going to add to that just a one chunk of configuration. So I'm going to let Netlify know, in our building infrastructure, what to deploy. So what what directory to publish. And in this case in actual fact, I'm just going to publish the directory we're in.

That's all I'm going to add. And now I have to run Netlify init to create a new Netlify project. And it's going to ask me, would I like to connect this to GitHub so I can have continuous integration. I'm actually just going to do this as a manual deploy that we're just going to push the, the code that we have here. The HTML that we've generated. And choose the team. I want to be at this site to be a part of, or just take the default name. And there we go. So now it's created new site for me. So now I can run a Netlify deploy. And I can even add the production flag. And that will do a push to Netlify send the assets that are here in my project to the CDN. And then it will give me a URL for that. So we can take a look at that now.

Okay. Great. So our site now is, is there it's hosted. We can navigate around. And hopefully our redirect that we created latest now indeed does redirect to blog. Let's just look at that one more time. Latest redirects us to blog. So, in doing this, what we've done is we've created a simple site. We've added a Netlify redirects file, configuration file. We've created the site on Netlify and pushed it to Netlify. So that then we can start configuring that further.

There is another way that we could add redirects. So this redirects configuration, this needs to live in our published directory, and that's the only, that's the root directory of this particular project.

We can also add the redirects directly to the netlify.toml. So let's just do that quickly as well. So the, the syntax for that is with TOML format, we're adding something to the redirects array. And this is a little bit more explicit. I think it's a little bit more descriptive than the underscore redirects file.

This says which URL we're coming from. So that was the latest. And where do we want to redirect to, and that was Blog. So this configuration is exactly the same as this underscore redirects configuration file they'll have exactly the same. the same result.

It should be noted that the first rule, that Netlify encounters when it's deploying the site is the one that we'll use. So the order of preference, it works down. However many URLs we have here. And it will catch the first one and redirect there. And then it will go to the netlify.toml file and work down the list until it finds a hit. The first match it finds is the redirect that we'll get to the applied. And by default, you'll notice that I'm not specifying what kind of redirect here. We could be specifying an HTTP status code. Such as the 301. For a permanent redirect or a 302 for found redirect have more of an, a femoral redirect on the CDN.

By default Netlify applies to 302 if it finds no status there at all.

But in a later stage, we'll start looking at different things we could do by applying different status codes in our redirects.


your progress