Use Visual Editor with Astro

Astro is a modern web framework designed to build fast websites by optimizing for performance and simplicity. It uses a component-based architecture, supporting popular frameworks like React, Vue, and Svelte, but prioritizes minimal JavaScript on the client side.

Configure Visual Editor for an Astro project

Astro is supported through the ssgName: custom option.

Follow the example branch for a concrete example of how to integrate Visual Editor with Astro. Here’s an excerpt from the Visual Editor configuration file:

// stackbit.config.ts
export default {
  stackbitVersion: "~0.6.0",
  ssgName: "custom",
  nodeVersion: "18",
  // Astro to run inside Visual Editor container
  devCommand: "node_modules/.bin/astro dev --port {PORT} --hostname 127.0.0.1",
  // Astro-specific configuration
  experimental: {
    ssg: {
      name: "Astro",
      logPatterns: {
        up: ["is ready", "astro"]
      },
      directRoutes: {
        "socket.io": "socket.io"
      },
      passthrough: ["/vite-hmr/**"]
    }
  }
};

Note the use of some experimental configuration properties to ensure compatibility with Vite (the development server used by Astro and others):

1. experimental.ssg.logPatterns.up is set to ['is ready']. This is part of the log message that appears when the Vite dev server is ready to accept requests.
2. experimental.ssg.passthrough is set to a dedicated relative path to Vite’s Hot Module Replacement (HMR) WebSocket endpoint. The path "/vite-hmr/" is configured accordingly in astro.config.mjs. With this setting, all code changes will trigger a client refresh through Vite’s HMR mechanism, without interference from our container.

Run the Visual Editor locally

Visual Editor’s default port is 3000. To run Visual Editor locally with an Astro project, you need to change the default Astro port from 4321 to 3000 in astro.config.mjs:

server: {
  port: 3000
}

Another option is to specify the port with Visual Editor CLI command instead:

stackbit dev --port 4321

Example

Astro + Git Content Source Example.