Ember CLI Live Reload Injector

2.1.0 verified Thu Apr 23 auth: no javascript maintenance

ember-cli-inject-live-reload is an essential plugin for Ember CLI applications, responsible for injecting the necessary live-reload script into the HTML output during development. This script facilitates automatic browser refreshes upon changes to JavaScript or styling, significantly enhancing developer productivity. The current stable version is 2.1.0, though the package has seen infrequent updates, largely due to its stable and foundational role within the Ember CLI ecosystem. Its core function is to dynamically generate and serve `ember-cli-live-reload.js`, which then configures and loads `livereload.js` (provided by Ember CLI's `tiny-lr` dependency) to establish a WebSocket connection for change detection. This transparent integration is a key differentiator, as most vanilla Ember CLI apps require no explicit configuration. Users typically interact with it via `ember serve` options or `.ember-cli` configuration for advanced scenarios like reverse proxies.

Common errors

error [LiveReload] failed to connect to ws://localhost:49153/livereload ↓

cause The browser could not establish a WebSocket connection to the LiveReload server, often due to a port conflict, server not running, or network/firewall issues.

fix

Ensure ember serve is running. Check your browser's console for more specific WebSocket errors. Try specifying a different liveReloadPort (e.g., ember serve --live-reload-port=35730). If behind a proxy, configure liveReloadOptions in .ember-cli.

error Refused to connect to 'ws://localhost:49153/livereload' because it violates the following Content Security Policy directive: "connect-src 'self'" ↓

cause Your application's Content Security Policy (CSP) is blocking the WebSocket connection required by LiveReload.

fix

Modify config/environment.js to extend your contentSecurityPolicy settings. Add ws://localhost:49153 (or the specific LiveReload host/port) to the connect-src directive. For HTTPS environments, use wss://.

error Live reload not working, no refresh on file changes, no console messages related to LiveReload. ↓

cause Live reload script might not be injected, or the server-side component of LiveReload is not running correctly or being communicated with.

fix

Verify that ember serve is running without the --no-live-reload flag. Check the index.html source in your browser's developer tools to confirm that the ember-cli-live-reload.js script tag is present. If it's not, ensure ember-cli-inject-live-reload is installed and liveReload is not explicitly set to false in .ember-cli.

Warnings

gotcha When serving Ember CLI applications behind a reverse proxy (e.g., Nginx), the default LiveReload WebSocket connection may fail due to incorrect host or port. This requires explicit configuration. ↓

fix Configure `liveReloadOptions` and potentially `liveReloadJsUrl` in your `.ember-cli` file to specify the correct host, port, and HTTPS settings that the client will use to connect to the proxy. Ensure your proxy correctly forwards WebSocket traffic.

gotcha Conflicting port usage can prevent LiveReload from connecting. If another process is using the default LiveReload port (often 49153 or 35729), LiveReload will silently fail to connect. ↓

fix Check for conflicting processes. You can specify a different `liveReloadPort` either via the `.ember-cli` file or with the `--live-reload-port` command-line flag during `ember serve`.

gotcha Live reload will not function if a Content Security Policy (CSP) restricts `ws:` or `wss:` connections to the LiveReload server, or if `script-src` policies prevent the injected script from running. ↓

fix Adjust your `contentSecurityPolicy` settings in `config/environment.js` to allow WebSocket connections (e.g., `connect-src 'self' ws://localhost:49153`) and ensure the script source is permitted. For HTTPS, use `wss://`.

Install

npm install ember-cli-inject-live-reload

yarn add ember-cli-inject-live-reload

pnpm add ember-cli-inject-live-reload

Imports

Ember CLI
wrong
```
import { injectLiveReload } from 'ember-cli-inject-live-reload'
```
correct
```
ember install ember-cli-inject-live-reload
```
This package is an Ember CLI addon and is not directly imported into application code. Its functionality is integrated into the build process by Ember CLI itself, usually as a default dependency or via explicit installation. Interaction is primarily through Ember CLI commands and configuration files.
Configuration
wrong
```
import { setLiveReloadOptions } from 'ember-cli-inject-live-reload'
```
correct
```
// .ember-cli
{
  "liveReloadPort": 4200,
  "liveReloadOptions": {
    "https": true
  }
}
```
Configuration is handled via the `.ember-cli` file in the project root or command-line flags for `ember serve`. There are no direct JavaScript APIs exposed for configuration within the application.
Disabling
wrong
```
import { disableLiveReload } from 'ember-cli-inject-live-reload'
```
correct
```
ember serve --no-live-reload
```
To disable live reload, use the `--no-live-reload` command-line flag when running `ember serve`, or set `liveReload: false` in your `.ember-cli` configuration file.

Quickstart

Demonstrates how `ember-cli-inject-live-reload` is implicitly used and configured within an Ember CLI project, showing default `ember serve` behavior, disabling via CLI, and advanced configuration in `.ember-cli`.

import { EmberApp } from '@ember/application';
import { createRoutes } from './router';

// This addon is typically included by default in new Ember CLI projects
// and requires no direct import or explicit setup in app.js or ember-cli-build.js
// for basic functionality.

// To start your Ember application with live reload enabled (default):
// Open your terminal in the project root and run:
// ember serve

// You can verify live reload is active by checking the browser console
// for messages like '[LiveReload] connected to ws://localhost:49153/livereload'
// and observing automatic refreshes on code changes.

// Example: Temporarily disable live reload for a specific serve command:
// ember serve --no-live-reload

// Example: Configure live reload in .ember-cli for advanced scenarios (e.g., custom port):
// // .ember-cli (JSON file in project root)
// {
//   "liveReloadPort": 35729,
//   "liveReloadOptions": {
//     "host": "192.168.1.100",
//     "https": true
//   }
// }

// The following is boilerplate for an ember-cli-build.js file
// and does not directly interact with ember-cli-inject-live-reload
export default function (defaults) {
  let app = new EmberApp(defaults, {
    // Add options here
  });

  // Use `app.toTree()` to generate the final build assets
  return app.toTree();
}

// This quickstart focuses on demonstrating the *presence* and *configuration* of the addon
// rather than direct code interaction, as it's an infrastructural tool.