Launch an Astro Site

Overview

Deploying a static website on Noop requires very little configuration. An Astro site is no different.

If you’re interested in starting an Astro site from scratch, install Workshop and select the Astro Template. The create-Template process in Workshop will automate everything outlined in this guide.

If, on the other hand, you want to modify an existing project to use Noop, the guide here can be used as reference.

The full source code constructed for this guide, including the Noop configuration, see the Template repository.

Why Develop Locally With Workshop?

There are two contexts where development of a static site in the context of Noop can be really helpful. First, when integrating with any external services that require HTTPS for Oauth callback URLs Noop handles all the certificates locally.

Second, when you need to run a static site in the context of other local application APIs or web apps Noop can serve all of them using a routing scheme very similar to your production deployments. That is, it can serve multiple services (development processes) all on the same local domain.

In the context of a single static site, development with Workshop might be overkill.

Setup

Noop Dependencies

Make sure you have Workshop installed locally, or a Github account connected to Noop Cloud. The remaining setup is identical in both.

Project Setup

To start a new Astro project, follow the official instructions, which are a single command (assuming you have NPM installed):

npm create astro@latest

Alternatively, use your own Astro or static website project.

The complete Template and project source code for the example created in this guide can be found on Github.

Blueprint Configuration

After you have the static site set up, you need to add the Noop Template configuration to create a local or cloud Deployment.

Create a .noop directory in your project root.

mkdir .noop

Next create a blueprint.yaml file to define the application setup.

The content below is the necessary config for our app:

---
components:
  - name: Website
    type: static
    image: node:alpine
    hosting:
      index: index.html
    build:
      steps:
        - copy: .
        - run: npm ci
        - run: npm run build
        - directory: dist/
routes:
  - target:
      component: Website

Automating Cloud Setup

For Cloud users, most of the Application setup is automated, including Environment creation, building and deploying, etc., using a Runbook. To create a Runbook, make a file called quickstart.yaml in the .noop/runbooks directory.

Here is the Runbook content:

name: Quickstart Setup

description: Demo full stack setup of this Astro site with internet endpoint

workflow:
  inputs:
    - name: EnvironmentName
      description: What should we name your new environment?
      type: string
      required: true
      default: Test

    - name: Cluster
      type: Cluster
      description: Which cluster should the environment launch on?
      required: true

  timeout: 300

  steps:
    - name: Environment
      action: EnvironmentCreate
      params:
        name:
          $inputs: EnvironmentName
        production: false
        appId:
          $runbook: Application.id
        clusterId:
          $inputs: Cluster.id

    - name: Build
      action: BuildExecute
      params:
        sourceCodeId:
          $runbook: SourceCode.id
        appId:
          $runbook: Application.id

    - name: Deploy
      action: DeploymentExecute
      params:
        envId:
          $steps: Environment.id
        buildId:
          $steps: Build.id

    - name: Endpoint
      action: InternetEndpointRandom
      params:
        orgId:
          $runbook: Organization.id
        routes:
          - name: 'Demo Environment'
            target:
              environments:
                - $steps: Environment.id

Launch on Noop

The rest of this guide will use Noop Desktop to run your site locally and in the cloud.

Cloud users can use the Runbook to automate most of the setup described below.

Create an Application

Select “New Application” and assign an appropriate name for your new app.

Cloud Setup

Choose the default cluster and run it. Behind the scenes this Runbook is:

• Creating an Environment
• Setting up placeholders for required environment variables
• Building the source code
• Deploying the build
• And finally, creating a public-facing endpoint to serve the application from

Once complete, visit the Application page to get the generated endpoint. Your new Astro site is now running at that URL.

The Noop Template Blueprint contains all the details about the application.

Workshop Setup

While workshop doesn’t have a Runbook, the setup is also mostly automated.

In Workshop select your Application, which should have been automatically detected by Workshop, or select the appropriate project directory (must include a .noop directory).

Workshop will automatically create a default environment with an associated endpoint.

Testing It Out

Once the app is deployed, it can be seen running on the endpoint created by either Workshop or Cloud in the steps above.

---

This guide was written with:

Software	Version
Noop	v2.0.111
Node	v20.7.0
Astro	v4.0.3