Javascript

Upgrading from Astro 2 to Astro 4

Published Dec 22, 2023

Updated Dec 22, 2023

3 min read

Upgrading from Astro 2 to Astro 4

Astro is building fast. Right on the heels of their version 3 launch on August 30th, Astro version 4 launched on December 6th, 2023. They've built so fast, that I didn't even have a chance to try 3 before 4 came out! But the short time between versions makes sense, because the two releases are very complementary. Many Astro features introduced in version 3 as experimental are made stable by version 4. If, like me, you're looking at a two-version upgrade, here's what you need to know about Astro 3 and 4 combined.

View Transitions

Astro makes it easy to include animated transitions between routes and components with the <ViewTransitions /> component. You can add it to the <head> of specific pages, or to your site-wide <head> to be enabled across the entire site. No configuration is required, but you'll probably still want to configure it.

Adding <ViewTransitions /> between pages effectively turns your site into a single-page application, animating in and out content on route change rather than downloading a new statically generated HTML document. You can further customize how specific components animate in and out with the transition:animate property. If you don't want client side routing for a specific link, you can opt out for that link with the data-astro-reload property.

Image Optimization

The way Astro works with images has changed a lot from version 2. If you were using @astrojs/image, then updating how you handle images is probably going to be the most time-consuming part of your Astro migration.

Astro's <Image /> and <Picture /> components have had API changes, which will require you to make changes in your usage of them. You should definitely check out the full image migration guide in the Astro docs for all of the details. But some of the details you should be aware of:

@astrojs/image is out, astro:assets is in
You get image optimization when you import images inside /src. This can change your entire image src referencing strategy. Optimization only works for images imported from inside /src, so you might want to relocate images you've been keeping inside the /public directory.
Importing an image file no longer returns the path as a string, and an ImageMetadata object with src, width, height, and format properties. If you need the previous behavior, add ?url to the import path.
Markdown documents can reference image paths inside /src for automatic image optimization, no need to use <Image /> in MDX nor reference the root relative paths of images in the /public directory.
The <Image /> and <Picture /> components have changes to properties. For example, aspectRatio is no longer a valid property because it is inferred from the width and height of images. A new pictureAttributes property lets you do things like add a CSS style string.
You can use a helper image schema validator in your content collection schemas.

The Dev Toolbar is a new local development feature to help developers work with their interactive islands and to integrate with other tools. The Inspect option highlights what parts of the page are interactive, and lets you examine them. You can view their props and even open them directly in your editor. Audit checks for accessibility issues, such as missing alt attributes in images. And the Menu lets you use specific integrations. Currently only Storyblok and spotlight are available, but you can expect more integrations in the future. And if you don't want to wait, you can also extend the Dev Toolbar yourself with their API.

If you don't like the Dev Toolbar, you can turn it off in the CLI with astro preferences disable devToolbar.

Conclusion

Astro has added a lot of cool features in 2 major back-to-back releases, and you should absolutely consider upgrading if you're still on version 2. Be prepared to modify how you've handled images, but also get excited to play with view transitions!

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

About the author(s)

Tom VanAntwerp
@tvanantwerp @tvanantwerp

What’s New with Astro in 2024 with Matthew Phillips, CTO of Astro

In the latest episode of the Modern Web Podcast, Tracy Lee, Adam Rackis, Ben Lesh, and guest Matthew Phillips explore the concept of "Islands" in web development using Astro. They discuss how Astro allows developers to create self-contained interactive elements that enhance the user experience. One of the standout features of Astro is its framework-agnostic approach, which enables seamless integration of components from different frameworks like React or Vue. This flexibility allows developers to leverage the best features of each framework without being tied down to a single technology stack. The conversation covers the technical aspects of Astro, including client directives that enable selective rendering of components based on conditions like viewport visibility. This capability ensures that only the necessary components are loaded, improving performance and reducing unnecessary resource consumption. Matthew also touches on the challenges of collecting metrics and the importance of type safety in software development. These considerations highlight the attention to detail and focus on optimization that Astro brings to the table. The discussion shifts to the development of server actions in Astro, emphasizing the simplified implementation of remote procedure calls (RPC). This feature allows developers to easily create server-side functionality and interact with databases. The introduction of AstroDB, a database integration tool, further enhances the capabilities of Astro. With AstroDB, developers can seamlessly connect their applications to databases, making data management and retrieval a breeze. Throughout the podcast, Matthew shares his insights on different frameworks and the need for innovation in web development. They discuss potential paradigm shifts in the industry and highlight the importance of staying up to date with cutting-edge tools. Recommendations are made to explore tools like Astro, AstroDB, Solid, and SvelteKit for those interested in the evolving web development landscape. Download this episode here....

May 17, 2024

2 mins

AstroReact

Migrating From Gatsby to Astro: Migration and Styling Tips with Kathleen McMahon

Kathleen McMahon shares how she migrated her personal site from Gatsby to Astro. She discusses styling Astro Islands and Astro Slots, and their impact on CSS styles on deployment. Viewers also learn about component conversion, and challenges with React Live and display boxes in MDX articles. The transition came with plenty of challenges, but it also highlighted some great benefits of Astro. Here's a look at the hurdles she faced, the specific issues she encountered, and the ultimate wins. Challenges Faced One of the big challenges Kathleen dealt with was styling issues. Astro Islands and Astro Slots are powerful, but they caused unexpected CSS problems on the deployed site. She had to spend time tweaking the stylesheets to make everything look right. Converting components was another tough task. Kathleen's story shows how important it is to pay close attention to detail when switching platforms. Astro's Simplicity and Compatibility Despite the challenges, Kathleen praised Astro for its simplicity and compatibility with her existing setup. The platform's seamless integration with various tools and frameworks made the move smoother. Astro's focus on reducing reliance on JavaScript helped her optimize her website's performance and improve loading times. This simplicity and compatibility make Astro a great option for developers wanting to streamline their workflow. The Importance of Component Conversion Kathleen’s experience highlights how crucial component conversion is. Carefully analyzing and converting each component ensures a smooth transition. The issues with React Live and display boxes in MDX articles show that even minor components can have a big impact on the website’s functionality and look. Attention to detail and thorough testing are key to a successful migration. Conclusion Moving a website from one platform to another is no easy task, as Kathleen McMahon found out during her switch from Gatsby to Astro. The challenges she faced, like unexpected CSS styles and component conversion issues, highlight the need for careful planning and attention to detail. Despite these hurdles, Astro’s simplicity, compatibility, and potential to reduce JavaScript reliance make it a compelling choice for developers. Kathleen’s experience is a valuable lesson for anyone considering a platform migration: meticulous component conversion and a keen eye for detail are essential....

Jul 1, 2024

2 mins

GatsbyAstro

Creating Custom Types in TypeScript with Indexed Access Types, Const Assertions, and Satisfies

Frequently when writing TypeScript, you may need to create a new type from an existing type. For example, you may have a large type that you need to use in multiple places, and you want to create a new type that is a subset of the original type. Or you may have a large object full of data that you want to use to create types to maintain type safety. In this post, we'll cover how to create new types from existing types and data in TypeScript. Accessing parts of a type with indexed access types In JavaScript, you can access an object property's value with the string key of that property using someObject['someProperty']. You can use the same sort of syntax with TypeScript's types to get specific pieces out of a type. For example: ` Using TypeName["someProperty"] allows you to extract that piece of the type. These are called indexed access types. If you needed to use a piece of a large, complex type, you could simply pull that piece out into its own type using indexed access types. Why indexed access types? But what good is this? Couldn't I just refactor? In the previous example, wouldn't it be better for the pizza's Toppings to be a type of its own before defining Pizza, and then passed in as toppings: Toppings? I'd say yes, it would be. (And we'll cover that later!) But what if you're working with a type that you don't have control over (e.g., from a third party library), but you need to use a piece of it in a different type? That's where indexed access types come in. Why not just use Pick? Wait, why not just use Pick instead of indexed access types? You would want to use the indexed access type when you want _specifically_ a piece of the type, and not a type with that single property. For example: ` The index is a type! It isn't obvious from looking at the examples, but when you index a type, you're doing so with another type! So if I wanted to access a piece of a type with a defined string, it would fail. For example: ` In this case, I would instead have to use Pizza[typeof key] to get the same result as I would from just passing the value directly as Pizza["toppings"]. Alternatively, changing const key into type key would work. Because the index is a type, you can pass a type in as the index. This lets me do things like tell TypeScript: "I want to create a type that could be any one of the items in this array". You would do this by using the type number as your index access type. For example, if I wanted to create a single Topping type from our Pizza example, I could do the following: ` Creating types with const assertions Sometimes in TypeScript, you'll have some object full of data that you would like to use in a type-safe way. Let's return to our pizza example. Say we're building a web app to let people order our pizzas. Inside our order form, we have a list of toppings. This list of data could include a name, a description, and an extra price. ` Since we've gone through the trouble of writing all of this out, we should use this data to inform the Pizza type about our toppings. If we don't, it's both a duplication of code (a time-waster) and an opportunity for this data to get out of sync with our Pizza type. For a first attempt, you might use the indexed access types we learned about earlier to get each of the topping names: ` But that won't work! TypeScript has widened the type from those literal values to the broader string type. It doesn't assume that these values can't be changed later on. But it did notice that every name in TOPPINGS was a string, so it decided that the string type was the safest bet. Here, you can see how it would widely interpret the type of any entry in TOPPINGS: ` This is a good default, but it's not what we want here. The fix to this problem is easy: const assertions. We can simply append as const at the end of our TOPPINGS declaration. This tells TypeScript that we want to treat everything about this object as literal values that should not be widened. For example: ` Now we've got a type with all of the literal values from TOPPINGS as readonly properties in our type! From here, we can use indexed access types to create our Topping type from the name property: ` And we can use this type to inform our Pizza type: ` Extra type safety with satisfies Let's say we're factoring out the available crusts for making our Pizza. We could start with an array of strings, use a const assertion to use the literal values and avoid widening, and then again use our indexed access types to create a type from that array: ` Well, almost there. Notice that we have an undefined type in there. That's because we have an extra comma in our array. This is effectively the same as saying ['thin', 'thick', undefined, 'stuffed']. You could detect the undefined with type annotations, but that can't be mixed with const assertions. The type cannot both be string[] and readonly ['thin', 'thick', 'stuffed']. ` To avoid this issue, we can use satisfies to confirm that the value conforms to a certain intended shape. In our case, we want to confirm that the array is a tuple of strings. We don't need TypeScript to confirm which strings exactly—only that it matches the intended shape. ` We can further combine satifies with as const to get the literal values we want while verifying that the array is a tuple of strings: ` With as const, we tell TypeScript that it should not widen the inferred type of CRUSTS and that we expect it to be the literal values given. And with satisfies readonly string[], we tell TypeScript that CRUSTS should satisfy the shape of an array of readonly strings. Now we can't accidentally add an extra comma or other value to the array, and we can still use the literal values from CRUST to create new types. Conclusion The combination of indexed access types, const assertions, and the satisfies operator, give us a lot of power to create types that are more specific, and more accurate. You can use them to transform your data into useful types, rather than attempting to duplicate that information manually, and inevitably having the data and types fall out of sync. This can ultimately save you and your team a lot of time, effort, and headache. If you want to view the examples in this article in a runnable playground, you can find them at the TypeScript playground....

Apr 19, 2023

5 mins

TypeScript

Learning Paths for Next.JS Developers with Ankita Kulkarni

In this video, Rob Ocel and co-hosts Tracy Lee, Adam Rackis, and Danny Thompson talk with tech educator Ankita Kulkarni about her journey from engineering leader to full-time educator. Ankita shares insights on teaching Next.js, bridging practical knowledge gaps, and helping developers tackle real-world challenges. They discuss Next.js as a React-based framework, its benefits, and the challenges it presents for beginners. Chapters - Introduction to the Podcast and Guests 00:01 - Meet Ankita Kulkarni, Tech Educator 00:26 - Ankita's Transition to Full-Time Education 01:41 - Teaching Practical Knowledge in Next.js 03:19 - Effective Methods for Teaching Next.js 05:27 - Challenges of Being a Full-Time Educator 07:48 - Balancing Broad and Specific Examples 09:54 - Embracing Mistakes as a Teaching Tool 12:13 - Pair Programming and Mentorship 14:00 - Discussion on Next.js and Framework Adoption 16:48 - Advantages and Challenges of Next.js 18:12 - Choosing the Right Framework for Your Needs 20:35 - Impact of Next.js in React Documentation 22:26 - Learning Paths for New Developers 23:24 - The Rise of Full-Stack Web Development 25:09 - Benefits of Frameworks Abstracting Complexity 26:27 - OpenNext and Deployment Flexibility 28:06 - Ankita's Excitement for New Next.js Features 30:35 - The Future of Next.js Without Vercel 32:16 - Final Thoughts and Where to Find Everyone Online 34:21 Follow Ankita Kulkarni on Social Media Twitter: https://x.com/kulkarniankita9 YouTube: https://www.youtube.com/@kulkarniankita Sponsored by This Dot: thisdot.co...

Nov 12, 2024

2 mins

NextJSJavaScript

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

Upgrading from Astro 2 to Astro 4

Upgrading from Astro 2 to Astro 4

View Transitions

Image Optimization

Conclusion

Tom VanAntwerp

You might also like

What’s New with Astro in 2024 with Matthew Phillips, CTO of Astro

Migrating From Gatsby to Astro: Migration and Styling Tips with Kathleen McMahon

Creating Custom Types in TypeScript with Indexed Access Types, Const Assertions, and Satisfies

Learning Paths for Next.JS Developers with Ankita Kulkarni

Let's innovate together!

You might also like

What’s New with Astro in 2024 with Matthew Phillips, CTO of Astro

Migrating From Gatsby to Astro: Migration and Styling Tips with Kathleen McMahon

Creating Custom Types in TypeScript with Indexed Access Types, Const Assertions, and Satisfies

Learning Paths for Next.JS Developers with Ankita Kulkarni