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 customization. Consider using a Static runtime when using this output mode, with the automatic site generation.
• The server or hybrid output modes: consider using a Node.js 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

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

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 application

You can create an application in our Console or through Clever Tools. Install them with npm or any supported package manager:

# Install with npm or any supported method
npm i -g clever-tools

# Login to Clever Cloud and check it worked
clever login
clever profile

Go to the folder where you want to create your application, and run the following command:

cd myStaticApp
clever create -t static

# If the folder is not a git repository, initialize it:
git init

To deploy on Clever Cloud, your local folder need to be an initialized git repository 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

Automatic build

Astro is one of the many Static Site Generator (SSG) that Clever Cloud automatic build supports in the static runtime, you don’t have anything special to manage. To use a pico instance with a dedicated build instance change it in the Console or with Clever Tools:

clever scale --flavor pico

# To select a bigger build instance, use:
clever scale --build-flavor M

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

404 page location

If you need to use a specific page for 404 errors, define its location with SERVER_ERROR_PAGE_404 environment variable from Static Web Server, used as default in static runtime. For example : SERVER_ERROR_PAGE_404=404.html.

Deploying a Node.js application with Server-Side Rendering

To deploy an Astro project with Server-Side Rendering (SSR), use a Node.js application on Clever Cloud and the Node.js adapter.

Inject environment variables

Depending on your package manager, use 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"

Port and host

As you manage the server, ensure to configure your application to listen on port 8080 as required by Clever Cloud. 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