Dynamic Astro.Site Value For Local And Production Environments

In many build systems, including Vite, the value of NODE_ENV is automatically set to development when running in development mode and production when building. Some deployment platforms like Netlify may also set the production value automatically.

Because the Astro config file uses JavaScript rather than JSON or another static format, it is possible to set the values of our keys to functions which return a dynamic value. In this case, the value of Astro.Site will be set to http://localhost:4321 when running in development mode and when building, depending on the value of the NODE_ENV environment variable.

Use this trick to prevent broken links when developing locally if you had previously statically set the value of Astro.Site to a production URL.

import { defineConfig } from "astro/config";

export default defineConfig({
    process.env.NODE_ENV === "development"
      ? "http://localhost:4321"
      : "",

Share this tip