Appearance

Astro ​

You should create a page component under src/pages/ as the entry point of your Astro site. Your Astro code should be linted using ESLint with the recommended Astro configuration.

Entry file ​

The entry file for this template is src/pages/index.astro. Astro automatically maps files under src/pages/ to routes based on their filename.

An Astro file has two parts separated by --- fences: the frontmatter (JavaScript/TypeScript that runs at build/request time) and the template (the HTML that's rendered):

astro
---
// frontmatter — runs in Node
---

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Astro</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Version ​

Running on Node.js v22.0.0

Supported languages ​

Javascript

Testing framework ​

Vitest

Special reminders and implementation details ​

  • Tests use the experimental Astro Container API (experimental_AstroContainer) to render a page to a string without spinning up a real server.
  • Frontmatter runs on the server only — no browser globals. To run code in the browser, use a <script> tag in the template, which Astro bundles for the client.
  • Astro components are zero-JS by default. UI components from React/Svelte/Solid/Vue can be added with the official integrations and the client:* directives when interactivity is needed.

Example with Vitest + Astro Container API: ​

js
import { describe, it, expect } from 'vitest';
import { experimental_AstroContainer as AstroContainer } from 'astro/container';
import Page from './src/pages/index.astro';

describe('index.astro', () => {
  it('renders an <h1> containing "Hello, World!"', async () => {
    const container = await AstroContainer.create();
    const html = await container.renderToString(Page);
    expect(html).toMatch(/<h1[^>]*>\s*Hello, World!\s*<\/h1>/);
  });
});

Included libraries ​

How to debug ​

Astro components have two execution phases — the frontmatter (server-side) and the template (rendered HTML, optionally hydrated). Each phase logs to a different place.

Frontmatter (server) ​

Frontmatter runs in Node at build/request time. console.log from here appears in the terminal running astro dev:

astro
---
const data = await fetch('/api/items').then((response) => response.json());
console.log('Fetched items:', data);
---

Template (client) ​

For browser-side logs, add a <script> tag — Astro bundles and ships it to the client:

astro
<script>
  console.log('This runs in the browser');
</script>

Steps to Debug Using Console Logs ​

  1. Identify the Problem Area: Decide whether the issue lives in the frontmatter (data prep) or in the rendered HTML / hydrated client script.

  2. Insert console.log() Statements: Add log calls in the relevant phase. Frontmatter → terminal; <script> → browser devtools.

  3. Check the Results Output of your tests

  4. Use Debug Icon in Preview Area: Click on the debug icon in the Preview area to check the terminal output, or open your browser's DevTools console for client logs.

  5. Analyze the Output: Compare logs against the rendered page to spot missing data, wrong props, or hydration mismatches.

Here's an example combining both phases:

astro
---
const message = 'Hello, World!';
console.log('Built message:', message); // logs in the terminal
---

<h1>{message}</h1>
<script>
  console.log('Page loaded'); // logs in the browser
</script>