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!
Top comments (5)
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
_routesinsidepublic/should also do the trick no? And then you can avoid stringing extra commands in yourpackage.jsonbuild 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
_redirectsand then continue forward from there). I think?Guess I'm messing around with your repo this morning, hah.
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_routesshould 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.
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.
Loving astro thanks for sharing this on redirects not hit this use case just yet
I came across your post when I could not get redirects working with Netlify and Astro. Another gotcha occurs if you use Astro to statically generate a site without an adapter.
According to the Astro docs, you can specify these redirects in the
astro.config.mjsand this will technically work, although it uses a<meta http-equiv="refresh">tag.There is an adapter for Netlify, which would probably address the issue, and you can also specify the redirect dynamically in the frontmatter, but I think this might still generate the refresh tag.
I did not try either of those options, but you can see the result on our website. If you try to visit
/contact-us, it will show the refresh briefly and then redirect to/contact/- amp42.com/Hopefully, this helps someone else.