# The Astro edition

> The Astro edition is a real Astro project: one file per page, a shared layout, reusable components and every image, script and style from the design. It builds to a static site you can host anywhere.

> **Where it's ready** Ready today for [Meetly](https://frontiertemplates.com/templates/meetly). Astro editions of the other templates are in production and arrive as free updates; [the status table](https://frontiertemplates.com/docs/choosing-a-format#status) is always current.

## Requirements

- Node.js **22.12 or newer** (`node -v` to check).
- npm, which comes with Node. pnpm and yarn work too.

## Install and run

Press play. This is a real run of the Meetly Astro edition:

```
$ npm install
added 200 packages, and audited 201 packages in 3s
$ npm run dev
Dev server running at http://localhost:4321
$ npm run build
[build] 33 page(s) built in 1.44s
[build] Complete! Your site is in dist/
```

```shell
$ npm install
$ npm run dev       # http://localhost:4321 with live reload
$ npm run build     # static site in dist/
$ npm run preview   # serve dist/ to check the build
```

## Where things are

Meetly · Astro edition:

- `README.md`: Requirements, commands, where things are, and deploy steps for Netlify, Vercel and Cloudflare Pages.
- `package.json`: Astro and three scripts: `dev`, `build`, `preview`. Needs Node.js 22.12 or newer.
- `astro.config.mjs`: Static output with `build.format: 'file'`, so URLs stay `pricing.html` like the HTML edition. Set `site` to your domain for absolute social images.
- `src/`
  - `pages`: One `.astro` file per page, 33 in Meetly. Title, description and social image sit in the `meta` object at the top.
  - `Base.astro`: The shared `<head>`: fonts, stylesheets, favicon and scripts.
  - `components`: `Header.astro`, `Footer.astro` and `News.astro`, shared across pages.
  - `copy.json`: The copy marked with `data-slot`: hero headline, lead, buttons and feature lines for the three home pages. The store's “Try it with your brand” copy drops in here.
- `public/`
  - `tokens.css`: Colours, fonts and spacing as CSS custom properties, light and dark.
  - `site.js`: The brand name, navigation, Pages menu, footer columns and notification bars, in the `SITE` object at the top.
  - `boot.js`: `MEETLY_SETTINGS`: header and footer layout, default theme, theme toggle, languages, cookie banner, loader.
  - `media`: The hero video and its posters. Swap them for your own footage.

## Editing

- **Text** lives in the page file. Copy marked with `data-slot` on the home pages lives in `src/data/copy.json`.
- **Brand, navigation and footer** are built in the browser from the `SITE` object at the top of `public/assets/site.js`.
- **Colours, fonts and spacing** are tokens in `public/assets/tokens.css`. Page-only styles sit in a `<style is:inline>` block inside the page.
- **A new page**: copy one in `src/pages/`, rename it and change its `meta`. It is served at `/<name>.html`.
- **Social images** need absolute URLs: set `site` in `astro.config.mjs` to your domain.

![The Meetly Astro edition open in an editor, with its README showing requirements, start and build commands.](https://frontiertemplates.com/img/docs/files-astro.webp)

## Deploy

`npm run build` writes plain static files to `dist/`. Netlify, Vercel and Cloudflare Pages all detect Astro and fill in the settings; see [Deploying](https://frontiertemplates.com/docs/deploying).

---
Source: https://frontiertemplates.com/docs/astro · All guides: https://frontiertemplates.com/docs