Published on

Upgrading Astro V3 Guide

Upgrading Astro V3 Guide

Upgrading Astro V3 Guide

What is Astro?

Astro is an open-source web framework. It’s focused on performance and content-heavy websites like landing pages, blogs, technical documentation etc.

Astro V3

Astro 3.0 just got released, it's 30% faster and more powerful than ever, here are the few highlights

  • View Transitions API support: Astro 3.0 is the first major web framework to support the View Transitions API
  • Image Optimization (stable): Unflagged and better than ever.
  • Faster Rendering Performance: Astro components render 30-75% faster.
  • SSR Enhancements for Serverless: New ways to connect to your hosting platform.
  • HMR Enhancements for JSX: Fast Refresh support for React and Preact.
  • Optimized Build Output: Cleaner and more performant HTML.

How to Create New Project with Astro 3.0

    # Create a new Astro 3.0 project:
    npm create astro@latest

How to Upgrade Existing Project to Astro 3.0

  1. With npm
    # Upgrade to Astro v3.x
    npm install astro@latest

    # Example: upgrade React and Tailwind integrations
    npm install @astrojs/react@latest @astrojs/tailwind@latest
  1. With yarn
    # Upgrade to Astro v3.x
    yarn add astro@latest

    # Example: upgrade React and Tailwind integrations
    yarn add @astrojs/react@latest @astrojs/tailwind@latest

After upgrading Astro to the latest version, just build and run if it works without any error you may not need to make any changes but if you are using any additional library like node, typescript, @astrojs/image, <Markdown /> etc then you have to fix or update those versions as well.

Follow official documents to fix breaking changes.