ESBuild Plugin Live Reload

An ESBuild development plugin that watches for file changes and triggers automatic browser refreshes.

Quick start

npm install -D @goauthentik/esbuild-plugin-live-reload
# Or with Yarn:
yarn add -D @goauthentik/esbuild-plugin-live-reload

1. Configure ESBuild

import { liveReloadPlugin } from "@goauthentik/esbuild-plugin-live-reload";

import esbuild from "esbuild";

const NodeEnvironment = process.env.NODE_ENV || "development";

/**
 * @type {esbuild.BuildOptions}
 */
const buildOptions = {
    // ... Your build options.
    define: {
        "process.env.NODE_ENV": JSON.stringify(NodeEnvironment),
    },
    plugins: [
        /** @see {@link LiveReloadPluginOptions} */
        liveReloadPlugin(),
    ],
};

const buildContext = await esbuild.context(buildOptions);

await buildContext.rebuild();
await buildContext.watch();

2. Connect your browser

Add the following import near the beginning of your application's entry point.

if (process.env.NODE_ENV === "development") {
    await import("@goauthentik/esbuild-plugin-live-reload/client");
}

That's it! Your browser will now automatically refresh whenever ESBuild finishes rebuilding your code.

About authentik

authentik is an open source Identity Provider that unifies your identity needs into a single platform, replacing Okta, Active Directory, and Auth0.

We built this plugin to streamline our development workflow, and we're sharing it with the community. If you have any questions, feature requests, or bug reports, please open an issue.

License

This code is licensed under the MIT License

Plugin API

EventServerInit

Properties

| Property | Type | | ------------------------------------ | ---------------------------------------------------------------------- | | dispatcher | EventTarget | | logger? | Pick<BaseLogger, "warn" | "error" | "debug" | "info"> | | pathname | string |

LiveReloadPluginOptions

Properties

| Property | Type | Description | | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | | listenOptions? | ListenOptions | Options for the server's listen method. | | logger? | Pick<BaseLogger, "warn" | "error" | "debug" | "info"> | A console-like logger. | | publicURL? | string | URL | A URL to listen on. If not provided, a random port will be used. | | relativeRoot? | string | A relative path to the root of the project. This is used to resolve build errors, line numbers, and file paths. | | server? | Server<typeof IncomingMessage, typeof ServerResponse> | Server<typeof IncomingMessage, typeof ServerResponse> | A server to listen on. If not provided, a new server will be created. |

RequestHandler()

RequestHandler<> = (req, res) => void

Type Parameters

| Type Parameter | | -------------- |

Parameters

| Parameter | Type | | --------- | ---------------------- | | req | http.IncomingMessage | | res | http.ServerResponse |

Returns

void

liveReloadPlugin()

liveReloadPlugin(options?): Plugin

Creates a plugin that listens for build events and sends them to a server-sent event stream.

Parameters

| Parameter | Type | Description | | ---------- | ----------------------------------------------------- | ----------- | | options? | LiveReloadPluginOptions | |

Returns

Plugin

default

Renames and re-exports liveReloadPlugin

Server API

createRequestHandler()

createRequestHandler(options): RequestHandler

Create an event request handler.

Parameters

| Parameter | Type | Description | | --------- | ------------------------------------- | ----------- | | options | EventServerInit | |

Returns

RequestHandler

Runtime

node