Astro

Astro is a modern static site builder focused on shipping minimal JavaScript to the browser. Choose this component when you are delivering content-heavy marketing sites, blogs, or documentation that benefit from fast page loads. Diploi handles the SSR build pipeline and pushes assets where they need to run.

Add to your project

Paste this entry into the components list in diploi.yaml to add Astro to your project.

components:
  - name: Astro
    identifier: astro
    package: https://github.com/diploi/component-astro#v7.1.1

If the folder of the component in your repository is not named astro, add a folder parameter with the name of the folder.
Import the environment variables of add-ons, such as a database, into the component with env.include in diploi.yaml:

components:
  - name: Astro
    identifier: astro
    package: https://github.com/diploi/component-astro#v7.1.1
    env:
      include:
        - postgres.*

Astro reference

Readme

Launch a trial, no registration needed https://diploi.com/component/astro

Uses the official node Docker image.

Has the @astrojs/ node adapter preconfigured.

Operation

Getting started

Sign up at https://console.diploi.com/ using your GitHub account.
In your dashboard, click Create Project +
Under Pick Components, choose Astro
If you want to expand your Astro website with other tools, like a backend framework, here you can add them.
In Pick Add-ons, select any databases or tools supported on Diploi.
In Repository, choose Create Repository which will generate a new GitHub repo for you.
Click Launch Stack

Prefer the full guide? Check https://diploi.com/blog/hosting_astro_apps

Package managers

Supports Bun, Yarn, npm, and pnpm. The package manager is auto-detected from your lockfile (bun.lock, yarn.lock, package-lock.json, or pnpm-lock.yaml). The install and build steps always use the detected package manager.

Development

When the component is first initialized, dependencies are installed using the detected package manager. The development server is then started with:

npm run dev -- --host

This can be changed with the containerCommands.developmentStart field in diploi.yaml.

Production

Builds a production-ready image. Dependencies are installed and npm run build is run during the image build, using the detected package manager. When the container starts, it runs:

npm start

This can be changed with the containerCommands.productionStart field in diploi.yaml.

ENV

Since Vite embeds environment variables during the build step, we provide two ways to manage ENV values in production builds:

For values that are not deployment-dependent, define them in diploi.yaml using the static import syntax. The values are exposed to the Dockerfile as ARG variables.
For values that depend on a specific deployment (such as variables imported from other components in diploi.yaml, or configured in the Options tab), enable the runtime build option.

Runtime Build

When runtime build is enabled (which it is by default), npm run build is executed again when the container starts. This ensures that environment variables from the running deployment are correctly applied, and that any data loaded from other components can use the internal network.

To disable runtime build, set __VITE_RUNTIME_BUILD to false in diploi.yaml:

- name: Astro
  identifier: astro
  package: https://github.com/diploi/component-astro#v1.0.0
  env:
    include:
      - name: __VITE_RUNTIME_BUILD
        value: false