Astro Weekly #60

Astro 5.0 released, learn Astro 5.0 in 30 minutes, turbocharge Astro Storefront with advanced caching techniques

In partnership with

Greetings, Astronauts.

Astro 5.0 has officially landed, and it’s packed with incredible updates that are sure to take your Astro projects to new heights! This week’s newsletter dives into the major release of Astro 5.0, plus a 30-minute crash course to get you up to speed in no time.

But that’s not all—find out how to turbocharge your e-commerce site using Astro Storefront with advanced caching techniques.

Prepare for launch! 🚀

What’s new with Astro 🗞️

Ladies and gentlemen, this is Astro Number 5

Astro 5.0 released 🎉

Astro 5.0 has officially landed, bringing a wave of exciting updates to enhance performance, developer experience, and site-building flexibility.

What’s new with Astro 5.0?

  • Content Layer ✏️ A flexible and pluggable way to manage content, providing a unified, type-safe API to define, load, and access your content in your Astro project, no matter where it comes from.

  • Server Islands 🏝️ Combine high-performance static HTML and dynamic server-generated components on the same page.

  • Simplified pre-rendering ⚙️ Hybrid and static rendering modes have been merged into the default static option.

  • astro:env 🛟 A type-safe way to define the environment variables your application expects and needs.

  • Vite 6 ⚡️ Astro 5.0 is one of the first frameworks to ship with Vite 6.

  • Experimental features 🧪 Experimental support for image cropping, responsive image layouts, and SVG components.

For a complete breakdown of everything new in Astro 5.0, check out the official release blog post.

Upgrade or start a new project

To upgrade an existing project, use the automated @astrojs/upgrade CLI tool.

To start a new project using Astro 5.0, run the create astro command for your package manager: npm create astro@latest

Check out the upgrade guide for full details and individual upgrade guidance for each change of this release.

Astro Boosters 🚀

Try the internet’s easiest File API

Tired of spending hours setting up file management systems? Pinata’s File API makes it effortless. With simple integration, you can add file uploads and retrieval to your app in minutes, allowing you to focus on building features instead of wasting time on unnecessary configurations. Our API provides fast, secure, and scalable file management without the hassle of maintaining infrastructure.

Astro Community 🧑‍🚀

Learn Astro 5.0 in 30 minutes ⏱️

If you’re new to Astro or need a quick refresher, Chris Pennington’s latest Astro Crash Course is a must-watch.

In just 30 minutes, this video dives into the fundamentals of Astro 5.0, offering valuable insights for both beginners and experienced developers alike.

Supercharging Astro Storefront

Advanced caching with Astro + Turso 🛍️

Netlify has released an excellent 3-part guide on advanced caching for e-commerce sites, building on Astro’s Storefront template.

tl;dr: you can watch a brief overview and see the end result at the link below.

What else I’ve been reading this week 🤓

Check out these great posts from the Astro Community ↓

If you have something awesome you’d like to share with the Astro community, you can reach me at [email protected] or via DM on X

Why struggle with file uploads? Pinata’s File API is your fix

Simplify your development workflow with Pinata’s File API. Add file uploads and retrieval to your app in minutes, without the need for complicated configurations. Pinata provides simple file management so you can focus on creating great features.

Astro on X 💫

What’s happening on Twitter X this week…

Astro Showcase 🤩

Check out these impressive projects built with Astro!

Would you like your work to be featured in our Astro Showcase? Get in touch at [email protected] or DM me on X

That’s a wrap for this week, Astronauts.

If you’d like to contribute to Astro Weekly, feel free to reach out to [email protected] or via DM on X.

Join me next week for our final regular edition of Astro Weekly in 2024.

Until then.

– Nathan 👨‍🚀