how to add files to hot reloading

[summer spindle]

how do I tell astro dev to reload when a certain file changes?

[vale pawn]

Hi @summer spindle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

You have a few options, depending on what you’re building:

• If you’re writing an Astro integration: use addWatchFile() in the astro:config:setup hook to tell the dev server to restart when specific files change. The path must be absolute. You can also detect restarts via isRestart.

  // inside your integration
  hooks: {
    'astro:config:setup': ({ addWatchFile, config, isRestart }) => {
      addWatchFile(new URL('./my-config.json', config.root));
      // isRestart is false on first start, true on subsequent reloads
    }
  }
  

  (astro:config:setup, addWatchFile() option, isRestart option)

• If you’re building a Content Loader (object loader): use the watcher from LoaderContext to react to file changes and update your store. This doesn’t restart the whole dev server, but lets you hot-reload loader data when a file changes.

  return {
    name: 'file-loader',
    load: async ({ config, store, watcher }) => {
      // ...
      watcher?.on('change', async (changedPath) => {
        if (changedPath === filePath) {
          await syncData(filePath, store);
        }
      });
    },
  };
  

  (watcher)

• For Cloudflare Wrangler dev: hot reloading may require custom setup; see the linked community examples if you need Wrangler-driven reloads rather than Astro’s dev server.
  (Preview with Wrangler)

---

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@summer spindle Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[summer spindle]

@vale pawn I bring in an extra config file to astro.config.mjs, how do I hot reload when it changes?

[vale pawn]

Let me check the knowledge base for you again. One moment! :books:

---

Use addWatchFile() from the astro:config:setup hook in an integration to watch your external config and trigger a dev server restart when it changes. The path must be absolute.

// astro.config.mjs
import { defineConfig } from 'astro/config';

function watchExtraConfig() {
  return {
    name: 'watch-extra-config',
    hooks: {
      'astro:config:setup': ({ addWatchFile, config }) => {
        // Watch a file relative to your project root:
        addWatchFile(new URL('./extra.config.mjs', config.root));
      },
    },
  };
}

export default defineConfig({
  integrations: [watchExtraConfig()],
});

When that file changes, Astro will reload; you can detect reloads using isRestart if needed (addWatchFile() option, astro:config:setup, isRestart).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@summer spindle Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[summer spindle]

@vale pawn can I feed multiple files to addWatchFile()?

[vale pawn]

Let me check the knowledge base for you again. One moment! :books:

---

Yes. Call addWatchFile() once per file you want to watch. It accepts a single path (URL or string) and must be an absolute path, so invoke it multiple times for multiple files. For example:

'astro:config:setup': ({ addWatchFile, config }) => {
  addWatchFile(new URL('./a.config.mjs', config.root));
  addWatchFile(new URL('./b.config.json', config.root));
  addWatchFile(new URL('./sub/other.conf', config.root));
}

Whenever any of these change, the dev server will reload (you can detect restarts via isRestart) (addWatchFile() option, astro:config:setup, isRestart).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@summer spindle Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[summer spindle]

<@&1095491216776380548> what is the typescript type for the config argument?