Astro

Astro is an all-in-one web framework for building content-driven websites, that pioneers a new frontend architecture to reduce JavaScript overhead and complexity. Learn in this guide how to deploy an Astro site on Clever Cloud.

Overview

Clever Cloud supports deploying both fully static and on-demand rendered Astro projects:

• The static output mode is ideal for most content-oriented website, for which you have no need for per-visitor server-side customisation. Consider using a Static runtime when using this output mode, with the site generation in a post-build hook.
• The server or hybrid output modes: consider using a Node.js runtime runtime with Astro’s Node adapter

If you need an example source code, get Astrowind (you’ll need git and Node.js):

git clone https://github.com/onwidget/astrowind myStaticApp

Deploy a static Astro site

To deploy your Astro project to Clever Cloud, you need to create a new application.

Node.js application environment variables

If you’re using a Node.js application to serve a static Astro site, inject the following environment variables:

  CC_POST_BUILD_HOOK="npm run build"

  CC_NODE_BUILD_TOOL="custom"
  CC_PRE_BUILD_HOOK="npm install -g pnpm && pnpm install"
  CC_CUSTOM_BUILD_TOOL="pnpm run astro telemetry disable && pnpm build"
  CC_RUN_COMMAND="pnpm run preview"

  CC_NODE_BUILD_TOOL="yarn"
  CC_PRE_BUILD_HOOK="yarn && yarn run astro telemetry disable && yarn build"
  CC_RUN_COMMAND="yarn run preview"

Static application

If you’re using a Static application to serve a static Astro site, inject the following environment variables:

  CC_POST_BUILD_HOOK="npm run build"
  CC_PRE_BUILD_HOOK="npm install && npm run astro telemetry disable"
  CC_WEBROOT="/dist"

  CC_POST_BUILD_HOOK="pnpm build"
  CC_PRE_BUILD_HOOK="npm install -g pnpm && pnpm install && pnpm run astro telemetry disable"
  CC_WEBROOT="/dist"

  CC_POST_BUILD_HOOK="yarn build"
  CC_PRE_BUILD_HOOK="yarn && yarn run astro telemetry disable"
  CC_WEBROOT="/dist"

Deploy

If you’re deploying from GitHub, your deployment should start automatically. If you’re using Git, copy the remote and push on the master branch.

Deploy a static Astro site using the CLI

Create a static application

You can create an application in our Console or through Clever Tools:

npm i -g clever-tools
clever login

cd myStaticApp
clever create -t static-apache myStaticApp

To deploy on Clever Cloud, your local folder need to be a git repository (if not, git init) linked to an application. If you already have an application on Clever Cloud and want to link it to the current local folder:

clever link your_app_name_or_ID

Configure environment variables

Next, configure the application with a medium build instance to quickly generate static files. The host instance is nano-sized, enough for a simple website. Clever Cloud uses standard configurations, so you only need to define a few variables:

clever scale --build-flavor M
clever scale --flavor nano

clever env set CC_NODE_VERSION "20"
clever env set CC_WEBROOT "/dist"
clever env set CC_OVERRIDE_BUILDCACHE "/dist"
clever env set CC_PRE_BUILD_HOOK "npm install && npm run astro telemetry disable"
clever env set CC_POST_BUILD_HOOK "npm run build"

Push your code

Once you complete these steps, commit your content to the local repository and deploy it:

git add .
git commit -m "First deploy"
clever deploy
clever open

You can display your website’s URL or add a custom domain to it (you’ll need to configure DNS):

clever domain
clever domain add your.website.tld

Deploying an Astro Project with Server-Side Rendering (SSR)

To deploy an Astro SSR project, consider using a Node.js application on Clever Cloud. This is especially useful if your project uses the Node.js adapter.

Port and host

For SSR deployments, ensure to configure your application to listen on port 8080 as required by Clever Cloud. This differs from static deployments where such configurations are typically unnecessary.

Set your port and host in your astro dev script for development mode, and/or configure it directly for production:

 "scripts": {
   "dev": "astro dev",
   "start": "astro dev",
   "build": "astro check && astro build",
   "preview": "astro preview --host 0.0.0.0 --port 8080",
   "astro": "astro"
 } 

 import { defineConfig } from 'astro/config';

 export default defineConfig({
   server: {
     port: 8080,
     host: true
   }
 });

  "scripts": {
    "dev": "astro dev",
    "start": "astro build && node ./dist/server/entry.mjs",
    "build": "astro check && astro build",
    "preview": "astro preview --host 0.0.0.0 --port 8080",
    "astro": "astro"
  } 

Learn more