Registry / web-framework / ember-cli-inject-live-reload

ember-cli-inject-live-reload

library2.1.0jsnpmunverified

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.

web-framework devops

npm install ember-cli-inject-live-reload

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · EMBER-CLI-INJECT-L

ember-cli-inject-live-reload

web-frameworkjavascriptv2.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Ember CLI

✓ ember install ember-cli-inject-live-reload

✗ import { injectLiveReload } from '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

✓ // .ember-cli { "liveReloadPort": 4200, "liveReloadOptions": { "https": true } }

✗ import { setLiveReloadOptions } from 'ember-cli-inject-live-reload'

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

✓ ember serve --no-live-reload

✗ import { disableLiveReload } from 'ember-cli-inject-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.

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.

Debug

Known issues

gotchaWhen 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.

affects: >=1.0.0

gotchaConflicting 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`.

affects: >=1.0.0

gotchaLive 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://`.

affects: >=1.0.0

Errors

Common errors & fixes

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

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`.

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

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://`.

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

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`.

Upgrade

Version history

2.1.0latest on npm

Audit

Dependencies

ember-clirequiredThis package is an Ember CLI addon and functions within the Ember CLI build pipeline.

tiny-lrrequiredEmber CLI uses tiny-lr to serve the livereload.js script, which this addon injects.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/rwjblue/ember-cli-inject-live-reload ↗

packagehttps://www.npmjs.com/package/ember-cli-inject-live-reload ↗

homepagehttps://ember-cli.com ↗