Frameworks Compatibility | Astro
Explore how Azion Bundler integrates with Astro, a modern static site builder that delivers lightning-fast performance with its content-focused approach and zero JavaScript by default philosophy.
About Astro
Astro 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 | Learn more |
| Astro Boilerplate | Starter project | Learn more |
| Astro Blog Starter Kit | Blog creation | Learn more |
| Astro Ecommerce | E-commerce platform | Learn more |
| Astro with Multiple Frameworks | Starter project | Learn more |
| Astro with Framework Preact | Starter project | Learn more |
| Astro Minimal | Starter project | Learn more |
| Astro with Non-HTML Pages | Non-HTML content | Learn more |
| Astro Portfolio | Portfolio website | Learn more |
| Astro Quickstore | E-commerce | Learn more |
| Astro Starlog | Poject Release notes | Learn more |
| Astro with Markdoc | Starter project | Learn more |
| Astro Markdown with Plugins | Starter project | Learn more |
| Astro Markdown with Shiki | Code demo | Learn more |
| Astro with MDX | Starter project | Learn more |
| Astro with Nano Stores | E-commerce | Learn more |
| Astro with Tailwind CSS | Tailwind integration | Learn more |
| Astro with Vitest | Starter project | Learn more |
| Cosmic - Simple Astro Blog | Blog | Learn more |
| Devscard | Developer portfolio | Learn more |
| Clean Astro App with Sanity | CMS integration | Learn more |
| Webpage to PDF Resume | Resume generator | Learn more |
Deploying a template using Azion Console
- Login to Console.
- Click the + Create button.
- Click the Templates section.
- Choose the desired Astro template.
- Connect your GitHub Account.
- Choose a name for your application.
- Click Deploy.
Deploying an existing project using import from GitHub
- In Console click the + Create button.
- Select Import from Github.
- Select your repository.
- Choose an application name
- Select the Astro Preset.
- Input the install command:
- Click Deploy
Deploying a template using Azion CLI
You can use the Azion CLI to deploy a template.
- Initialize the project:
- Give your project a name, or press
enterto accept the given suggestion:
- Choose the Astro preset:
-
Choose one of the available templates.
-
With the template fetched and configured, you can choose to start a local development server.
The following steps are based on the answer you gave:
- If you chose to have a local development server running.
- If you chose not to have a local development server running.
Answering yes to local dev
- Install the project dependencies. Input
ywhen the interaction prompts:
Wait until the installation is complete.
Output:
- 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:
-
Stop the terminal execution with
control + c. -
Access the project folder:
- Deploy the project:
- Wait while the project is built and deployed to the Azion Web Platform.
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.
- Enter
yto the following interaction, indicating you want to deploy the project:
- Install the project dependencies. Input
ywhen the interaction prompts:
- Wait while the project is built and deployed to the Azion Web Platform.
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.
- Inside your existing project folder, use the command below to link your project to an application:
-
Choose the Astro preset.
-
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.