Master programming syntax, solve interactive challenges & run live code in Syntaxis Explore Arena →

menu_book Course Curriculum (Astro) expand_more

Components

Astro component Component frontmatter Component props Default props Component slots Named slots HTML attributes Dynamic attributes Conditional rendering List rendering

Pages & Routing

src/pages routing Index page Dynamic route Rest parameters getStaticPaths 404 page Redirects Route priority Endpoint route Trailing slash

Layouts & Content

Layout component Nested layouts Content collections Collection schema getCollection getEntry Render content Markdown pages MDX integration Content images

Styling

Scoped styles Global styles CSS variables Class:list Sass integration Tailwind integration CSS modules Style props External stylesheet Critical CSS

Islands

Static component client:load client:idle client:visible client:media client:only Framework component Hydration boundary Sharing state Nano Stores

Data & Server

Top-level await Fetch at build time Astro.glob migration Astro.request Astro.url Cookies API Server actions Middleware API endpoint Environment variables

Rendering

Static output Server output Adapter configuration Prerender page On-demand rendering Streaming SSR Redirect response Headers Sessions View transitions

Performance & Testing

Image component Picture component Font optimization Prefetch Bundle client JavaScript Accessibility audit Component test End-to-end test Build analysis Deployment adapter

Astro / Data & Server

Environment variables

Learn Environment variables in Astro with a dedicated explanation, topic-specific example, edge guidance, and mastery check.

12 min read • Intermediate

astro-060.astro

astro

const apiBase = import.meta.env.PUBLIC_API_BASE; const secret = import.meta.env.API_SECRET; // do not expose non-PUBLIC secret to client code

What to watch

Content source & attribution

Original Syntaxis Content · Original Syntaxis Content

Lesson quizzes

Environment variables Mastery Check →