ember-cli-inject-live-reload

What is ember-cli-inject-live-reload?

The ember-cli-inject-live-reload package is an Ember CLI addon that injects live-reload functionality into your Ember application. This allows for automatic reloading of the application in the browser whenever changes are detected in the source code, which significantly speeds up the development process.

What are ember-cli-inject-live-reload's main functionalities?

Automatic Live Reload

This feature enables automatic live reloading of the application whenever changes are detected in the source code. By setting `liveReload: true` in the EmberApp configuration, the addon will inject the necessary scripts to enable live reloading.

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    liveReload: true
  });
  return app.toTree();
};

Custom Live Reload Port

This feature allows you to specify a custom port for the live reload server. By setting the `port` option within the `liveReload` configuration, you can control which port the live reload server listens on.

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    liveReload: {
      port: 35729
    }
  });
  return app.toTree();
};

Live Reload Host

This feature allows you to specify a custom host for the live reload server. By setting the `host` option within the `liveReload` configuration, you can control which host the live reload server uses.

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    liveReload: {
      host: 'localhost'
    }
  });
  return app.toTree();
};

Other packages similar to ember-cli-inject-live-reload

browser-sync

BrowserSync is a powerful tool for synchronizing file changes across multiple devices and browsers. It provides live reloading, CSS injection, and synchronized interactions. Compared to ember-cli-inject-live-reload, BrowserSync offers more advanced features like synchronized scrolling and form replication, but it requires additional setup outside of the Ember CLI ecosystem.

livereload

The livereload package is a standalone tool that provides live reloading functionality for any web project. It watches for file changes and automatically reloads the browser. While it offers similar live reloading capabilities as ember-cli-inject-live-reload, it is not specifically tailored for Ember applications and requires manual integration.

webpack-dev-server

Webpack Dev Server is a development server that provides live reloading and hot module replacement for projects using Webpack. It offers more advanced features like hot module replacement, which allows for updating modules without a full page reload. However, it is designed for use with Webpack and may require additional configuration to work with Ember applications.

README

ember-cli-inject-live-reload

Plugin for ember-cli that injects live-reload script into HTML content.

Overview

This plugin injects a script tag to load ember-cli-live-reload.js in the head of your application's html.

The contents of ember-cli-live-reload.js are dynamically generated to configure and inject livereload.js, which is served by Ember CLI courtesy of its tiny-lr dependency.

livereload.js initiates a websocket connection back to Ember CLI. This allows Ember CLI to notify the browser to trigger a refresh after JavaScript or style changes.

Configuration

For vanilla Ember CLI apps, no configuration is required.

The following options are supported via command line arguments or the .ember-cli file:

Option	Purpose
liveReload	Defaults to true during ember serve. Set to false to prevent the livereload script tag from being injected.
liveReloadPort	Specifies the port that ember-cli-live-reload.js and livereload.js are loaded from
liveReloadHost	The host that ember-cli-live-reload.js will be loaded from
liveReloadPrefix	The url prefix which will be prepended before livereload.js

The following options are supported via the .ember-cli file:

Option	Purpose
liveReloadJsUrl	The absolute URL used to load livereload.js. If specified, this overrides the liveReloadPort option.
liveReloadOptions	JavaScript object for LiveReload options. LiveReload supports a number of options for configuring websocket communication, including https, host, port, and others. See advanced example below.

Advanced Example Configuration

NOTE: Most apps will be fine with no special configuration. Only use this sort of configuration if you have reason to override the default LiveReload websocket behavior. A use case for this is serving Ember CLI apps in development via a reverse proxy such as nginx.

.ember-cli

{
  "liveReloadPort": 37531,

  // This `liveReloadOptions` property becomes `window.LiveReloadOptions`
  "liveReloadOptions": {
    "port": 37631,
    "https": true,
    "host": "your-hostname.dev"
  },

  "liveReloadJsUrl": "https://your-hostname.dev/livereload.js"
}