# electron-serve

> Static file serving for Electron apps

Latest version **3.0.1** (published 2026-01-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install electron-serve
pnpm add electron-serve
yarn add electron-serve
bun add electron-serve
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 3.0.1 |
| Published | 2026-01-29 |
| First published | 2018-01-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Node | >=20 |
| Dependencies | 0 |
| Unpacked size | 11.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 486 |
| Author | Sindre Sorhus |
| Maintainers | sindresorhus |
| Keywords | electron, serve, serving, server, static, file, dev, development, react, router, web, app, history, pushstate, replacestate, href, url |

## Links

- npm: https://www.npmjs.com/package/electron-serve
- Repository: https://github.com/sindresorhus/electron-serve
- Homepage: https://github.com/sindresorhus/electron-serve#readme
- Issues: https://github.com/sindresorhus/electron-serve/issues
- Funding: https://github.com/sponsors/sindresorhus
- npm.io page: https://npm.io/package/electron-serve

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.0.1 (latest) — 2026-01-29
- 3.0.0 — 2025-09-13
- 2.1.1 — 2024-09-17
- 2.1.0 — 2024-08-18
- 2.0.0 — 2024-05-01
- 1.3.0 — 2024-01-22
- 1.2.0 — 2023-11-01
- 1.1.0 — 2021-01-20
- 1.0.0 — 2020-04-04
- 0.4.1 — 2019-12-06
- 0.4.0 — 2019-09-08
- 0.3.0 — 2019-05-30
- 0.2.1 — 2019-04-30
- 0.2.0 — 2018-06-08
- 0.1.0 — 2018-01-11

## README

# electron-serve

> Static file serving for Electron apps

Normally you would just use `win.loadURL('file://…')`, but that doesn't work when you're making a single-page web app, which most Electron apps are today, as [`history.pushState()`](https://developer.mozilla.org/en-US/docs/Web/API/History_API)'ed URLs don't exist on disk. It serves files if they exist, and falls back to `index.html` if not, which means you can use router modules like [`react-router`](https://github.com/ReactTraining/react-router), [`vue-router`](https://github.com/vuejs/vue-router), etc.

## Install

```sh
npm install electron-serve
```

*Requires Electron 37 or later.*

## Usage

```js
import {app, BrowserWindow} from 'electron';
import serve from 'electron-serve';

const loadURL = serve({directory: 'renderer'});

let mainWindow;

(async () => {
	await app.whenReady();

	mainWindow = new BrowserWindow();

	await loadURL(mainWindow);

	// Or optionally with search parameters.
	await loadURL(mainWindow, {id: 4, foo: 'bar'});

	// The above is equivalent to this:
	await mainWindow.loadURL('app://-');
	// The `-` is just the required hostname
})();
```

## API

### loadUrl = serve(options?)

#### options

Type: `object`

##### directory

Type: `string`\
Default: `'.'`

The directory to serve, relative to the app root directory.

##### scheme

Type: `string`\
Default: `'app'`

Custom scheme. For example, `foo` results in your `directory` being available at `foo://-`.

##### hostname

Type: `string`\
Default: `'-'`

Custom hostname.

##### file

Type: `string`\
Default: `'index'`

Custom HTML filename. This gets appended with `'.html'`.

##### isCorsEnabled

Type: `boolean`\
Default: `true`

Whether [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) should be enabled.
Useful for testing purposes.

##### partition

Type: `string`\
Default: [`electron.session.defaultSession`](https://electronjs.org/docs/api/session#sessiondefaultsession)

The [partition](https://electronjs.org/docs/api/session#sessionfrompartitionpartition-options) where the protocol should be installed, if not using Electron's default partition.

### loadUrl(window, searchParameters?)

The `serve` function returns a `loadUrl` function, which you use to serve your HTML file in that window.

##### window

*Required*\
Type: `BrowserWindow`

The window to load the file in.

##### searchParameters

Type: `object | URLSearchParams`

Key value pairs or an [`URLSearchParams` instance](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) to set as the search parameters.

## Notes

### ES modules support

ES modules (ES2015+ modules) work out of the box. JavaScript files are served with the correct `text/javascript` MIME type, allowing you to use ES6 `import`/`export` syntax:

```html
<script type="module">
	import {myFunction} from './my-module.js';
</script>
```

### Source maps support

Source maps are fully supported for debugging. `.map` files are served with the correct MIME type, enabling Chrome DevTools to load them properly for debugging minified code.

### Relative `require()` paths

Since files are served via a custom protocol, Node.js `require()` calls with relative paths won't work as expected. Use `<script src="...">` tags, bundlers like Webpack, or `<script>require('./file.js')</script>` instead of `<script src="./file.js">`.

### Multiple windows with different content

To serve different directories or files for different windows, use unique `scheme` names:

```js
const loadMain = serve({directory: 'main', scheme: 'app'});
const loadSettings = serve({directory: 'settings', scheme: 'settings'});

// Or different files from the same directory
const loadMain = serve({directory: 'dist', file: 'main', scheme: 'main'});
const loadPopup = serve({directory: 'dist', file: 'popup', scheme: 'popup'});
```

Note: If you are using custom `partition` in BrowserWindow, it must match the `partition` in the serve options.

## Related

- [electron-util](https://github.com/sindresorhus/electron-util) - Useful utilities for developing Electron apps and modules
- [electron-reloader](https://github.com/sindresorhus/electron-reloader) - Simple auto-reloading for Electron apps during development
- [electron-debug](https://github.com/sindresorhus/electron-debug) - Adds useful debug features to your Electron app
- [electron-context-menu](https://github.com/sindresorhus/electron-context-menu) - Context menu for your Electron app
- [electron-dl](https://github.com/sindresorhus/electron-dl) - Simplified file downloads for your Electron app
- [electron-unhandled](https://github.com/sindresorhus/electron-unhandled) - Catch unhandled errors and promise rejections in your Electron app

---
_Source: https://npm.io/package/electron-serve · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._