Ship It in Astro

Ship It is the seventh and last chapter of the free Astro tutorial. Asha's journal gets fresh data where it matters, tests that catch bugs early, and a real address on the internet.

What each lesson covers:

  • Fresh Data at Scale: server islands with server:defer and fallbacks, encrypted props and cookies, Cache-Control headers, and live collections with error handling.
  • Testing and Debugging: reading errors, server vs browser logs, <Debug />, astro check, Vitest, the Container API and Playwright.
  • Deploying Your Site: build and preview, adapters, site and base, SEO essentials, production secrets, deploying from Git, and the capstone checklist.

The first lesson keeps pages fast while some parts stay fresh. Server islands load personal or changing content after the page arrives, cache headers tell browsers and CDNs how long to keep a page, and live collections fetch data at request time. The second lesson finds and prevents bugs: reading error messages, astro check for types, unit tests with Vitest, component tests with the Container API, and end-to-end tests with Playwright. The last lesson builds and previews the site, picks static or server output, sets site and base, adds SEO basics, keeps secrets safe and deploys it from Git.

Every lab runs Astro 7's real runtime in your browser. The Terminal shows island requests, cache headers and live data loads as they happen.

Lessons in this section

  1. Fresh Data at Scale

    Why one fresh part slows a whole page, server islands with server:defer, fallback content, encrypted props and cookies in server islands, Cache-Control and CDN caching, live collections with defineLiveCollection(), getLiveCollection() and getLiveEntry(), and error handling.

    • Render slow or personal parts with server:defer
    • Show a fallback while a server island loads
    • Cache on-demand pages with Cache-Control
    • Load and error-check live collection data
  2. Testing and Debugging

    Reading Astro error messages, server vs browser console.log, the Debug component and the dev toolbar, astro check, unit tests with Vitest and getViteConfig(), component tests with the Container API, and end-to-end tests with Playwright.

    • Read Astro errors and find logs in the right place
    • Inspect values with Debug and the dev toolbar
    • Type-check a project with astro check
    • Test functions, components and pages
  3. Deploying Your Site

    astro build and preview, static vs server hosting and adapters, the site and base settings, SEO head tags, robots.txt, sitemaps and the 404 page, production environment variables, deploying from Git to Netlify, Vercel, Cloudflare and GitHub Pages, and the capstone checklist.

    • Build and preview a production site
    • Choose a host and adapter
    • Set site and base and add SEO essentials
    • Deploy from Git with production secrets