Setting up Netlify Redirects with Astro

I struggled recently setting up Netlify Redirects with Astro, until I realized I needed to copy the file from the root of my directory to the built output.

Luckily, this is a very small change to make in your package.json for your project! First of all, make sure you have a _redirects file at the top level of your project.

Under your scripts, change the build command to include cp (copy) to the final built folder. I'm just using the default naming here (dist), but you can use whatever your site uses:

    "scripts": {
        // ...
        "build": "astro build && cp _redirects dist/_redirects",
        // ...
    },

And voilà! That's all you need to get it working!

Working example

Here's an example repository for this. The website (just using a basic Astro template) is deployed at astro-redirects-example.netlify.app, and you can go to /fart and it'll redirect you to /fish.

The _redirects file shows you a couple options (and a fallback) for how you can set it up, and here's what the little script looks like in context!

Update after talking to the Astro team: Putting the _redirects file in the public/ directory works now for purely statically generated sites. I think if you use server-side rendering, then you still have to do a script like the above. There's also a Build Plugin made by one of the Astro contributors, Bryce Russell, that can solve this for you!

Comments

[chris thomas]

Admittedly, I've not done much with Astro in general. I love it and always mean to set something up but none of my projects or actual work has called for it yet. Dang.

But, I think just having _routes inside public/ should also do the trick no? And then you can avoid stringing extra commands in your package.json build script.

I'm also curious about the route priority order when you redirect. I'm assuming it works as you'd logically expect (handle the main redirect in _redirects and then continue forward from there). I think?

Guess I'm messing around with your repo this morning, hah.

[chris thomas]

public/ certainly copies over in the same manner. Not sure if there's an Astro personal preference to be had with something like this on where _routes should actually live.

But I still can't get a fart to not return a 404 page and instead route me to the fish after building your base repo or running the dev server.

What gives? Something fishy. Or rather a lack thereof.

[Cassidy Williams]

I think it has to do with the underscore starting the file name! When I looked into it I saw that they had to make some custom configurations for that for the Cloudflare integration. So until it's "natively" supported, this is the trick.

[ImTheDeveloper]

Loving astro thanks for sharing this on redirects not hit this use case just yet