# Frameworks Compatibility | Astro
import DocButton from '~/components/webkit/DocButton.vue';
## About Astro
[Astro](https://astro.build/) is a static site generator that compiles your content into static HTML. It uses a component-based architecture where you can write components in your preferred framework (React, Vue, Svelte, etc.) and Astro will render them to static HTML at build time. This approach results in minimal JavaScript being sent to the client, as components are rendered to HTML by default.
**Key features:**
- Static HTML generation at build time
- Component-based architecture with framework support
- Partial hydration through Islands Architecture
- Built-in support for Markdown and MDX
- TypeScript support out of the box
- File-based routing system
You can deploy your Astro project either by using our ready to deploy templates or by linking an existing project with the Azion CLI.
## Available Templates
| Template name | Use case | Details |
|:-------------|:---------|:-----|
| Astro Audiophile | E-commerce | |
| Astro Boilerplate | Starter project | |
| Astro Blog Starter Kit | Blog creation | |
| Astro Ecommerce | E-commerce platform | |
| Astro with Multiple Frameworks | Starter project | |
| Astro with Framework Preact | Starter project | |
| Astro Minimal | Starter project | |
| Astro with Non-HTML Pages | Non-HTML content | |
| Astro Portfolio | Portfolio website | |
| Astro Quickstore | E-commerce | |
| Astro Starlog | Poject Release notes | |
| Astro with Markdoc | Starter project | |
| Astro Markdown with Plugins | Starter project | |
| Astro Markdown with Shiki | Code demo | |
| Astro with MDX | Starter project | |
| Astro with Nano Stores | E-commerce | |
| Astro with Tailwind CSS | Tailwind integration | |
| Astro with Vitest | Starter project | |
| Cosmic - Simple Astro Blog | Blog | |
| Devscard | Developer portfolio | |
| Clean Astro App with Sanity | CMS integration | |
| Webpage to PDF Resume | Resume generator | |
### Deploying a template using Azion Console
1. Login to [Console](https://console.azion.com).
2. Click the **\+ Create** button.
3. Click the **Templates** section.
4. Choose the desired Astro template.
5. Connect your GitHub Account.
6. Choose a name for your application.
7. Click **Deploy**.
### Deploying an existing project using import from GitHub
2. In [Console](https://console.azion.com) click the **\+ Create** button.
3. Select **Import from Github**.
4. Select your repository.
5. Choose an application name
6. Select the **Astro Preset**.
7. Input the install command:
```
npm install
```
8. Click **Deploy**
### Deploying a template using Azion CLI
You can use the Azion CLI to deploy a template.
:::tip
Visit our [CLI guide](/en/documentation/products/azion-cli/overview/#installing-azion-cli) for detailed installation instructions.
:::
1. Initialize the project:
```sh
azion init
```
2. Give your project a name, or press `enter` to accept the given suggestion:
```sh
? Your application's name: (black-thor)
```
3. Choose the Astro preset:
```sh
? Choose a preset: [Use arrows to move, type to filter]
Angular
> Astro
Docusaurus
Eleventy
Emscripten
Gatsby
Hexo
Hono
Hugo
Javascript
...
```
4. Choose one of the available templates.
5. With the template fetched and configured, you can choose to start a local development server.
```sh
Do you want to start a local development server? (y/N)
```
The following steps are based on the answer you gave:
- [If you chose to have a local development server running](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/#answering-yes-to-local-dev).
- [If you chose not to have a local development server running](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/#answering-no-to-local-dev).
### Answering yes to local dev
1. Install the project dependencies. Input `y` when the interaction prompts:
```sh
Do you want to install project dependencies? This may be required to start local development server (y/N)
```
Wait until the installation is complete.
Output:
```sh
Your Application was built successfully
[Azion] [Server] › ✔ success Function running on port 0.0.0.0:4321, url: http://localhost:4321
```
2. On the browser, go to `http://localhost:4321/` and you can see your Astro project running.
#### Deploying the project
When your project is running locally, you're still able to deploy it to the edge. To do so:
1. Stop the terminal execution with `control + c`.
2. Access the project folder:
```sh
cd [your-project-name]
```
3. Deploy the project:
```sh
azion deploy
```
4. Wait while the project is built and deployed to the Azion Web Platform.
:::note
Once the deployment is triggered, Azion will open the browser and take the user to a page on Azion Console where the deployment logs and process can be monitored. If it doesn't open automatically, just click on the provided link.
:::
After the deployment is complete, you'll receive a domain to access your Astro project on the Azion's platform.
Wait a few minutes so the propagation takes place, and then access your application using the provided domain, which should be similar to `https://xxxxxxx.map.azionedge.net`.
### Answering no to local dev
After indicating you don't want to have a local server running, deploy the Astro project to the edge.
1. Enter `y` to the following interaction, indicating you want to deploy the project:
```sh
Do you want to deploy your project? (y/N)
```
2. Install the project dependencies. Input `y` when the interaction prompts:
```sh
Do you want to install project dependencies? This may be required to deploy your project (y/N)
```
3. Wait while the project is built and deployed to the Azion Web Platform.
:::note
Once the deployment is triggered, Azion will open the browser and take the user to a page on Azion Console where the deployment logs and process can be monitored. If it doesn't open automatically, just click on the provided link.
:::
After the deployment is complete, you'll receive a domain to access your Astro project on the Azion Web Platform.
Wait a few minutes so the propagation takes place, and then access your application using the provided domain, which should be similar to `https://xxxxxxx.map.azionedge.net`.
### Local project deploy with Azion CLI
You can use the Azion CLI to deploy a project compatible with our [availiable frameworks](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/).
:::tip
Visit our [CLI guide](/en/documentation/products/azion-cli/overview/#installing-azion-cli) for detailed installation instructions.
:::
1. Inside your existing project folder, use the command below to link your project to an application:
```shell
azion link
```
2. Choose the Astro preset.
3. The CLI will guide you through the rest of the process. In less than five minutes, your application can be up and running on the Azion Web Platform.