Jamstack Explorers

Exploring Netlify Redirects with Phil Hawksworth

Wildcards, placeholders and local development of redirects

Lean more of the syntax of the Netlify redirects configuration and also start developing and testing your redirect as part of your local development environment.

You'll explore:

  • Local development with Netlify Dev
  • Wildcards and splats (no, really. Splats!)
  • Named placeholders
  • Accessing deploy summaries with info of redirect configurations

Video transcript

Now we're going to take a look at wild cards at placeholders and that local development.

While it's simple enough to create redirect configuration and push those to Netlify so that it can be propagated to the CDN. We wouldn't always want to depend on testing there for our development workflow, a faster development workflow, would let us do that locally as well. And that's what we can do with Netlify dev. So we're going to get that set up first.

A quick look at this project. Before we dive into that, this is the same project that we looked at in an earlier stage. But now we've also included the static site generator that builds the web project in the first place. In a previous example, we were just looking within this folder. Looking at the resources that were there that we then deployed to Netlify. Now we're actually going to include the static site generator itself that yields this project. The reason for that is we want to be able to make changes to things like the various blog posts and the different files in there have access to templating that will make our life a bit easier. So I've chosen eleventy for this. We could choose any static site generator we like, or any build tooling, that will generate something that we can deploy to Netlify

Okay. First things first, let's get a Netlify Dev set up so that we can be running our build locally. One thing to note here is that the publish variable is now set to dist. Before it was just set to the current directory. But now, since we're generating a build in this project and publishing the dist folder, we'll need to tell Netlify that.

In our development environment, we're going to want the same setting. But we'll also want something else in addition. So we'll let Netlify dev know that we want to be serving the dist folder. But we're also going to give it a command to run every time we make changes and every time we run the build, so this is going to be NPM run serve which is our local development command. That's going to be running the site, building the site, but then also serving it up. In addition, Netlify dev will put a server in front of that. That will then also be able to action, whatever redirect rules we'll have. So let's give that a try. First of all, by running Netlify dev.

What we're seeing there is that it's run the build started up a server, which is actually a wrapper in front of the local build so that we can have our redirect rules running as well. We should be able to just navigate around the site. And I think we should also be able to see the same redirects that we configured, yeah our latest redirect is also pointing us back to the blog.

Okay. So we now have a local access to our routing rules are redirect rules. That we can now add to. Let's start first off by adding some wildcard rules. Why would we want to do this? Well? One particular example may be, if we decide that we want to change the URLs on our sites, let's say we want to change blog now to news, we could go off and change that in our site, but then of course, anywhere on the internet, where there are links pointing to blog, we want to handle those. We wouldn't want those to get lost along the way.

So let's make the change first of all, to our site. And we're going to go to the blog page. And when it changed that to, to news. So eleventy will generate a news page for that instead of the blog. And then all of the posts that are part of the blog, we can also change the links for all of those. Changing those to news as well. And as you can see, the build is running in the background. Netlify dev should be serving this for is now. So if we were to now go to news. Indeed. We are seeing the blog being served on our news URL and all of our posts are being served there as well. So that's great, but what happens if someone comes. This is one of the old URLs that we have before they're going to get, they're going to miss the site.

So let's add another redirect rule. To handle this situation. What we want this time is for any traffic that's coming into the blog URL. And all of the children that might be there. So we'll use a wildcard for that. To now be routed to our news pages. And the way that we expose what was captured in a wild card is we used a special place holder called splat.

So now this means that all of the traffic coming into any blog based URL is going to be passed through or redirected to a corresponding news URL. So we'll save that. Netlify Dev has picked up our new configuration. So now. If we go to go back to our site. And if we navigate to well news is there. Let's try navigating to blog. In fact that auto completed. So blog redirects to news. And what about some of the specific story URLs? Those are being captured as well.

Wildcards and splats like these are a particular special kind of placeholder, but we can give named placeholders as well. And that gives us slightly more granular access to formatting our URLs. So in the same way that a wildcard gives us a splat. A named place holder would be something like this. So a year. Maybe our URLs at one point had months in them. And days. And then the title.

We could be matching for these, for these variables and then reorganizing them anyway we like in our, in our target. URL. So perhaps we just want to go straight to the year and the title in the new format of our URLs, that would be a way that we could extract the information that we want from our inbound URLs, and then generate the desired output URLs.

So there we have it that's wildcards and splats working locally within Netlify dev. Just tidy up this example here. Our new redirect wildcard. We could of course deploy that to our Netlify sites using Netlify deploy. Those redirect rules will get packaged up in the same way that we've been using them locally. Now there'll be available to us are on the live site. You can take a look at that. We can see that. Yeah. So I, navigation may, may say blog where we are now. Of course rerouting to news. These news sites are working. And indeed, if we go. And trying to hit us directly. It is redirecting. Key thing to also note through the Netlify deployment process it also does allow us to access directly the the deploy logs for each particular build. And if we go and look at the deploy logs for this, for this build will also see in our deploy summary that the redirect rules are being picked up here. We're getting a little summary to tell us that there've been four redirect rules detected and deployed to the CDN.

So now we've got wildcards, placeholders, and local development in place. We can move on to doing different types of redirects and rewrites and doing interesting things with proxies. That's coming in the next stage.


your progress