{"id":17588,"library":"ember-cli-inject-live-reload","title":"Ember CLI Live Reload Injector","description":"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.","status":"maintenance","version":"2.1.0","language":"javascript","source_language":"en","source_url":"git://github.com/rwjblue/ember-cli-inject-live-reload","tags":["javascript","ember-addon"],"install":[{"cmd":"npm install ember-cli-inject-live-reload","lang":"bash","label":"npm"},{"cmd":"yarn add ember-cli-inject-live-reload","lang":"bash","label":"yarn"},{"cmd":"pnpm add ember-cli-inject-live-reload","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This package is an Ember CLI addon and functions within the Ember CLI build pipeline.","package":"ember-cli","optional":false},{"reason":"Ember CLI uses tiny-lr to serve the livereload.js script, which this addon injects.","package":"tiny-lr","optional":false}],"imports":[{"note":"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.","wrong":"import { injectLiveReload } from 'ember-cli-inject-live-reload'","symbol":"Ember CLI","correct":"ember install ember-cli-inject-live-reload"},{"note":"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.","wrong":"import { setLiveReloadOptions } from 'ember-cli-inject-live-reload'","symbol":"Configuration","correct":"// .ember-cli\n{\n  \"liveReloadPort\": 4200,\n  \"liveReloadOptions\": {\n    \"https\": true\n  }\n}"},{"note":"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.","wrong":"import { disableLiveReload } from 'ember-cli-inject-live-reload'","symbol":"Disabling","correct":"ember serve --no-live-reload"}],"quickstart":{"code":"import { EmberApp } from '@ember/application';\nimport { createRoutes } from './router';\n\n// This addon is typically included by default in new Ember CLI projects\n// and requires no direct import or explicit setup in app.js or ember-cli-build.js\n// for basic functionality.\n\n// To start your Ember application with live reload enabled (default):\n// Open your terminal in the project root and run:\n// ember serve\n\n// You can verify live reload is active by checking the browser console\n// for messages like '[LiveReload] connected to ws://localhost:49153/livereload'\n// and observing automatic refreshes on code changes.\n\n// Example: Temporarily disable live reload for a specific serve command:\n// ember serve --no-live-reload\n\n// Example: Configure live reload in .ember-cli for advanced scenarios (e.g., custom port):\n// // .ember-cli (JSON file in project root)\n// {\n//   \"liveReloadPort\": 35729,\n//   \"liveReloadOptions\": {\n//     \"host\": \"192.168.1.100\",\n//     \"https\": true\n//   }\n// }\n\n// The following is boilerplate for an ember-cli-build.js file\n// and does not directly interact with ember-cli-inject-live-reload\nexport default function (defaults) {\n  let app = new EmberApp(defaults, {\n    // Add options here\n  });\n\n  // Use `app.toTree()` to generate the final build assets\n  return app.toTree();\n}\n\n// This quickstart focuses on demonstrating the *presence* and *configuration* of the addon\n// rather than direct code interaction, as it's an infrastructural tool.","lang":"javascript","description":"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`."},"warnings":[{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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`.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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://`.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-23T00:00:00.000Z","next_check":"2026-07-22T00:00:00.000Z","problems":[{"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`.","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.","error":"[LiveReload] failed to connect to ws://localhost:49153/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://`.","cause":"Your application's Content Security Policy (CSP) is blocking the WebSocket connection required by LiveReload.","error":"Refused to connect to 'ws://localhost:49153/livereload' because it violates the following Content Security Policy directive: \"connect-src 'self'\""},{"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`.","cause":"Live reload script might not be injected, or the server-side component of LiveReload is not running correctly or being communicated with.","error":"Live reload not working, no refresh on file changes, no console messages related to LiveReload."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}