Astro
Astro is a modern, open-source Web framework with extensive influence in the Web development community, making it a popular choice for building content-driven websites and applications.
Note:
Currently, Makers supports Astro version 4+, with version 4 being the minimum supported version. Astro 5 is recommended.
When Astro projects are deployed and run, the Makers platform runtime environment is Node.js 22+. Using an earlier Node.js version is recommended.
Core Features
Astro provides the following core features:
Islands Architecture: Astro implements islands architecture design, deeming interactive components on the page as independent "islands" that perform client-side hydration only when needed, keeping the rest static.
Server-Side Rendering (SSR): Astro's server-side rendering can render dynamic data without requiring client-side JavaScript, while not slowing down pages that don't need the feature.
Static Site Generation (SSG): Supports pre-rendering webpages and generates static HTML during build.
Multi-Framework Support: When using Astro, you can still use other frameworks (Vue, React, Svelte). It supports the mixed use of multiple framework components in the project.
Content Collection: Use type-safe front matter to organize Markdown and MDX content.
API Routing: Server API endpoints for dynamic data processing.
Quick Start
To quickly deploy an Astro project on EdgeOne Makers, you can use the following methods:
Import an Astro project from a Git repository.
Select an Astro template from the Makers template library for deployment.
To see how Astro performs when it is deployed on Makers, click the Astro example template for Makers below:
Makers Feature Support for Astro
The table below lists the key Astro features currently supported by Makers.
Astro Features | Support Status |
Archipelago Architecture Rendering | ✓ |
Server-side rendering (SSR) | ✓ |
Static Site Generation (SSG) | ✓ |
Multi-framework support | ✓ |
Content collection (MD, MDX) | ✓ |
API routing | ✓ |
Route Actions | ✓ |
Middleware | Support Astro built-in middleware |
Image component | Not supported. |
Platform ISR | Not supported. |
Unsupported Astro features are currently being planned for the Makers platform. We recommend that you follow the version updates of the @edgeone/astro adapter to obtain the latest features and improvements in a timely manner.
Deploying Astro Projects on Makers
1. Installing the Makers Astro Adapter
The Astro adapter for Makers is named
@edgeone/astro. It automatically adapts the build output of Astro applications for the Makers platform. Similar to @astrojs/vercel, it works with the Makers scaffolding tool to package and deploy local Astro projects to the Makers platform. The adapter source code is open source. You are welcome to visit the astro-adapter repository to view the source code, submit issues, or contribute.The installation command for the adapter is as follows:
npm install @edgeone/astro
2. Configuring astro.config.mjs
According to the Astro configuration file API, you need to configure the Makers platform adapter in the
astro.config.mjs file of your Astro project. A configuration example is provided below:import { defineConfig } from "astro/config";import edgeoneAdapter from "@edgeone/astro";export default defineConfig({adapter: edgeoneAdapter(),});
3. Deploying a Project
Connecting Git for Deployment
After seamless integration with the adapter, you can submit the project to GitHub, GitLab, and other platforms, and use our import git repository.
CLI Deployment
You can also install the Makers scaffolding tool. For detailed installation and usage instructions, see EdgeOne CLI. After configuration, use the `edgeone makers deploy` command to deploy the project. During deployment, the CLI first automatically builds the project, then uploads and publishes the build artifacts.
Note:
EdgeOne CLI version requirement ≥ 1.2.4. Please first check the version before deployment to avoid deployment failure.
Astro Adapter Configuration for Makers
The adapter supports the following configuration options:
outDir (optional): Specifies the build output directory, defaults to .edgeone. Example: outDir: ".edgeone".includeFiles (optional): A mandatory inclusion file list used to underwrite specific files is packaged into server-side rendering code. Supports glob pattern matching. Example: includeFiles: ["src/locales/**", "public/config.json"].excludeFiles (optional): A file list for exclusion, used to exclude files that do not need to be packaged into server-side rendering code. Mainly used to exclude specific files in node_modules. Supports glob pattern matching. Example: excludeFiles: ["node_modules/.cache/**"].Configuration Example:
import { defineConfig } from "astro/config";import edgeoneAdapter from "@edgeone/astro";export default defineConfig({output: "server",adapter: edgeoneAdapter({outDir: ".edgeone",includeFiles: ["src/locales/**"],excludeFiles: ["node_modules/.cache/**"],}),});
Static Site Generation (SSG)
You can use Astro to generate completely static sites. Configured as static export mode, modify astro.config.mjs as in the following example:
export default defineConfig({output: 'static' // Enable static export});
Please note: In Astro's SSG (Static Site Generation) mode, all webpages are pre-rendered as static HTML during build time, with no server runtime environment. Therefore, server-side functionality cannot be used, including API routes (src/pages/api/*), middleware (src/middleware.ts), and any other features that require server-side execution.
Server-Side Rendering (SSR)
The Makers adapter also supports Astro's server-side rendering feature. To enable SSR mode, configure the following in
astro.config.mjs:export default defineConfig({output: 'server' // Enable server-side rendering});
In SSR mode, allow you to dynamically generate HTML content on the server side, provides better SEO support, faster page load speed, and real-time rendering capability for dynamic content.
In addition to pure SSR mode, Makers also supports Astro's hybrid mode. In hybrid mode, you can flexibly control the rendering method for each page:
Static page: Set
export const prerender = true on the page. This page will be pre-rendered as a static HTML file during build.Dynamic page: Pages with
prerender not set to true will use SSR dynamic rendering.
