# reloadsite

> A simple live-reload server with events and ability to reload sites on demand

Latest version **1.0.9** (published 2024-03-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install reloadsite
pnpm add reloadsite
yarn add reloadsite
bun add reloadsite
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2024-03-10 |
| First published | 2021-12-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 20.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Anthony Mugendi |
| Maintainers | nguru |
| Keywords | live, reload, site, livereload |

## Links

- npm: https://www.npmjs.com/package/reloadsite
- Repository: https://github.com/mugendi/reloadsite
- Homepage: https://github.com/mugendi/reloadsite#readme
- Issues: https://github.com/mugendi/reloadsite/issues
- npm.io page: https://npm.io/package/reloadsite

## Dependencies (3)

- [ws](https://npm.io/package/ws.md) ^8.15.1
- [chokidar](https://npm.io/package/chokidar.md) ^3.5.2
- [debug-symbols](https://npm.io/package/debug-symbols.md) ^1.0.2

## Recent versions

- 1.0.9 (latest) — 2024-03-10
- 1.0.8 — 2024-03-10
- 1.0.7 — 2023-12-14
- 1.0.6 — 2023-12-13
- 1.0.5 — 2023-12-13
- 1.0.4 — 2023-12-02
- 1.0.3 — 2022-01-02
- 1.0.2 — 2022-01-02
- 1.0.1 — 2022-01-02
- 1.0.0 — 2021-12-29

## README

# Motivation

There are a variety of livereload modules out there so be sure to select what works for you.

This module serves the following specific purposes:

- **Events:** It emits a number of events that you can listen to. This is useful in the event you want to run a few other stuff before or after the site reloads.

  - The **changed** event fires immediately a change is detected.
  - The **reloaded** event fires after the reload message has been sent to socket

- **Manual Reloads:** In addition to being able to delay the reload process. You can also completely disable it using the **autoReload** option and instead trigger the reload process manually. This is useful where you wish to run processes before reloading and you cannot predict how long those processes will take, hence a simple delay wont cut it.

# Server Side

` yarn add reloadsite` of course!

```javascript
const reloadSite = require('reloadsite');

const serverOptions = {
  // defaults to the common livereload port 35729
  port: 35729,
};

const reloader = reloadSite(serverOptions);

const reloadOptions = {
  // You can delay reload. Value in milliseconds
  delay: 300,
  // Or disable auto reloading in favour for manual reloading
  autoReload: true,
};

reloader.watch(
  // the directories to watch
  // can be a string or array
  './public',
  reloadOptions
);
```

## Reload manually

ReloadSite is built to enable you manually trigger auto reload.
You achieve that by listening to the `changed` event.

```javascript
// Because we set autoReload to false, we want to listen to change event and manually reload
reloader.on('changed', async function (file) {
  // Ok let's log what has happened
  console.log(`${file} changed... will reload after a bit...`);

  // we run some long process before reloading
  await some_long_running_process();

  // Manually trigger site reload
  // note passing the file that changed allows ReloadSite to figure out how to reload. See Reloading Section below
  reloader.reload(file);
});
```

# Client Side

For the client-end, use:

```html
<!-- Then load the simple script that executes the actual reloading -->
<script src="http://localhost:35729/reloadsite.js"></script>
```

## Reloading

To Understand how reloading happens we first need to discuss the file extensions that ReloadSite watches by default.

### File Extensions

```javascript
let styleExtensions = ['css'];

let imageExtensions = [
  'jpg',
  'jpeg',
  'jpe',
  'jif',
  'jfif',
  'pjpeg',
  'pjp',
  'png',
  'svg',
  'tif',
  'tiff',
  'webp',
  'apng',
  'avif',
];

let scriptExtensions = [
  'asp',
  'aspx',
  'cgi',
  'htm',
  'html',
  'jhtml',
  'js',
  'jsa',
  'jsp',
  'php',
  'php2',
  'php3',
  'php4',
  'php5',
  'php6',
  'php7',
  'phps',
  'pht',
  'phtml',
  'shtml',
  'xml',
];
```

Styles and images are reloaded by editing the `href` and `src` attributes of the files and adding a timestamp in the format `?ts=24633445544`. This forces the browser to reload only the affected file.

All files types under `scriptExtensions` above are also watched. These force the browser top reload the entire page.

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