Getting started with Astro (GraphQL, REST APIs, and more)

Discover Astro's html-first approach with a zero JavaScript runtime and server-rendered HTML. Learn to use client directives to load interactive islands only when needed.

Set up your astro development environment by installing the latest node LTS, verifying the version, selecting a text editor (VS Code), and installing the official astro extension to start building.

Install and initialize a new Astro project, configure TypeScript with strict mode, run the dev server, and customize the welcome message in the src/pages/index.astro.

Explore Astro components by inspecting the home page component, using the script and template sections, code fences, jsx-inspired syntax, and dynamic post rendering with layout and card components.

Learn to implement reusable Astro layouts by importing a layout component, passing a title prop, and using a slot to render nested page content across any page type.

Explore how Astro uses file-based routing to generate static routes from files in source pages directory, creating pages for Astro components and markdown files at addresses like /about and /contact.

Explore dynamic routes in Astro by generating pages for blog posts using their IDs, via get static paths, fetching posts from an API, and rendering title and body at /post/{id}.

Fetch remote data in Astro components using the global fetch function at build time, then map the API results to render posts in the template with top level await.

Learn to fetch data in astro framework components by integrating react, installing the react integration, and rendering a component that fetches posts from a placeholder API.

Import markdown files into components using Astro Glob to render posts from the source/pages/posts directory, and access front matter properties to generate post pages for blogs or documentation.

Explore how Astro lets you mix React, View, and Svelte on a single page, install multiple integrations with astro add, and use themes to build sites quickly.

Create a new Astro project using npm create astro@latest, name it Astro blog, include sample files, install dependencies, enable TypeScript and strict mode, then run the dev server at localhost:3000.

Create a posts page in an Astro project, import markdown posts with front matter via an Astro glob, and render clickable titles linking to each post page.

Install the MDX integration in Astro, migrate markdown posts to MDX, and update imports and file extensions; then render components and dynamic headings inside MDX.

Install Strapi CMS and learn to pull remote data into Astro using both REST and GraphQL APIs, including setting up an admin and accessing the Strapi dashboard.

Create a post collection type in Strapi, add fields for title, slug, body, and image, with slug auto-generated from the title, then save and restart the server for dynamic routes.

Create posts in Strapi using the content manager, filling title, body text, and Unsplash images; Strapi auto-generates the slug, then you save and publish to have posts listed as published.

Enable public access to the post content type in Strapi by configuring roles and permissions. Learn to expose /api/posts and verify post data through the REST API.

Pull posts from the Strapi REST API into an Astro project, fix localhost with 127.0.0.1, map over posts, and enable images by using populate=* on the endpoint.

Create dynamic routes in Astro using a slug file and getStaticPaths to generate page for each post from STRAPPY. Use route params and props to render title, body, and image.

Install the GraphQL plugin for Strapi and use the GraphQL playground to fetch post data: title, slug, body, and image. Then build an Astro page that fetches GraphQL data.

Practice building dynamic routes for a post from the GraphQL API, using paths like /graphql/post-1, and review the REST API approach from the previous video.

Explore Astro themes by downloading a blog theme, cloning it, and modifying layouts, pages, and components to render blog posts from strappy CMS using REST and GraphQL APIs.

Learn how Astro 2.0 content collections organize markdown content with a typed schema and front matter validation. Query the collection and generate dynamic routes for blog posts.