ember-cli / ember-cli-inject-live-reload

Ember CLI plugin that injects live-reload script into HTML content

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"
}

ember-cli-inject-live-reload's Issues

[Question]: starting point to hot reload JS like we do w/ css today?

I'm starting a spike to help find some of the edge cases that surround "hot reloading" JS code and noticed this line when I'm at the url http://localhost:49152/livereload.js?snipver=1

if (options.liveCSS) {
        if (path.match(/\.css$/i)) {
          if (this.reloadStylesheet(path)) {
            return;
          }
        }
      }

What builds this live reload js file so I can hack around inside of it /serve it locally to experiment with hot reloading JS with ember-cli ?

Thank you!

Live Reload not working when not using Ember CLI server to serve assets

Hey,

I've just updated our project to the latest Ember-CLI and with the latest version of this package (1.3.0) the live-reload is not working anymore. I guess this is due to our unconventional setup for a dev environment. We don't use the ember-cli server to serve our assets, instead we symlink the ember-cli dist directory with the public directory of our rails app in another directory.

//Edit Ember files here, dist is symlinked with dist in rails_app directory
-- ember_cli_app
  -- dist

-- rails_app
  -- public
    -- dist

In the ember-cli index.html the live-reload url is /ember-cli-live-reload.js but this 404s when we try to access it through our rails app as it doesn't know how to handle this url. I then tried to set up a redirect in the rails app from /ember-cli-live-reload.js to http://localhost:35729/livereload.js?snipver=1 which finds the required file. But the problem then is that livereload gives the following errors:

LiveReload disabled because it could not find its own <SCRIPT> tag livereload.js?snipver=1:858LiveReload livereload.js?snipver=1:858

Uncaught TypeError: Cannot read property 'addPlugin' of undefined livereload.js?snipver=1:965

I guess this is due to the fact that we are no longer dynamically inserting the http://localhost:35729/livereload.js?snipver=1 script tag into the page and just redirecting to it.

Do you have any suggestions what we can do here? Or is there any way to have some config to choose which type of dynamic insertion you want to happen?

Thanks,
Pat

EDIT: I've moved back to version 1.2.3 for the time being to get it working again.

Ember css live inject not working

After installation of ember-cli-ifa, css live inject stop working. Here is the reproduction.

[feature] support overlay for errors and warnings

This feature would be similar to https://webpack.js.org/configuration/dev-server/#devserveroverlay and would look like the following.

Instead of having to monitor the console for errors it would be great to throw an overlay up and alert the developer that something has gone wrong. We have all of this information available and it should just require styling it to show up when the developer has configured it.

Add CLI flag for --live-reload-js-url

The config value liveReloadJsUrl can be set via .ember-cli but not as a command-line flag (--live-reload-js-url).

This is different from the four config values that can be set using either the config file or CLI flags (see photo).

---

FOR REFERENCE (photo from repo readme: https://github.com/ember-cli/ember-cli-inject-live-reload)

END REFERENCE

---

Would you be open to making liveReloadJsUrl configurable via a CLI flag? If so, is there any place in addition to the following file that needs to be modified?

https://github.com/ember-cli/ember-cli/blob/073c32eff73c58eee62d6327b50f4422f0cd01cc/lib/commands/serve.js#L62

cc @rwjblue @kellyselden happy to hear your thoughts about this

Insert livereload-script?

Should the following be included in the index?

<script src="http://localhost:35729/livereload.js?snipver=1" type="text/javascript"></script>

Support dynamic or configurable hostname (besides localhost)

if (liveReloadPort && type === 'head') {
      return '<script src="http://localhost:' + liveReloadPort + '/livereload.js?snipver=1" type="text/javascript"></script>';
    }

make injected script protocol relative

https://github.com/rwjblue/ember-cli-inject-live-reload/blob/master/index.js#L10

Skipping livereload for:

I keep getting an issue in stylesReload of:
Skipping livereload for: addon/styles/foo...

Have tried the following in the rearme but still skips everything in addons.

Bug: new Ember app doesn't transition into or out-of broccoli-middleware error page

Expected behaviour

1. I have a working build, the page reloads when I make a change
2. I introduce a breaking change (eg. template compile error), the page reloads to show the error page with a error description and stack trace (broccoli-middleware)
3. I fix the breaking change, resulting in a successful rebuild, the page reloads to show the application again

Current behaviour

The below GIF shows a newly generated ember app not reloading to show the ember error page and, once the build error is fixed, not reloading to return to the application.

I'm not 100% certain but this feels like a regression, I thought ember apps always transitioned into and out-of the broccoli error page by default.

System info

live-reload-repro main* @ws ⫸ ember --version
ember-cli: 3.28.5
node: 14.15.0
os: linux x64

live-reload-repro main* @ws ⫸ yarn why ember-cli-inject-live-reload
yarn why v1.22.10
[1/4] Why do we have the module "ember-cli-inject-live-reload"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "[email protected]"
info Has been hoisted to "ember-cli-inject-live-reload"
info This module exists because it's specified in "devDependencies".
info Disk size without dependencies: "440KB"
info Disk size with unique dependencies: "812KB"
info Disk size with transitive dependencies: "2.12MB"
info Number of shared dependencies: 11
Done in 1.09s.

Reproduction in an app, but it's just ember new --yarn on [email protected]

Requirements

Hello, sorry for the mess. I am new to ember and ember-cli and especially livereload. My question is - does your library injects only client side, and, therefore, I need to install watchman on the serverside, so that my app would stop throw errors like

WebSocket connection to 'ws://localhost:35729/livereload' failed: Error during WebSocket handshake: Sent non-empty 'Sec-WebSocket-Protocol' header but no response was received

Possible to pull liveReloadBaseUrl from environment?

My dev machine is not the same as the machine I am using to test the app. I use full ip like http://192.168.x.x:3000 to talk to the (rails) server. I am using the lightning fast ember-cli-deploy to do my development. I've run into an issue where the ember-cli-live-reload.js url is pointing to the rails server and not the ember server. I am aware that I can set the liveReloadBaseUrl in .ember-cli and make it work that way, but my peers might not have the same development environment as I do. So I cannot go hardcoding the baseUrl into the .ember-cli file.

Possible suggestions:

• Pull it from the environment where the host is already being set
• Configure it in the ember-cli-build.js like so:

...
emberCLILiveReload: {
  baseUrl: process.env.ASSET_HOST || "localhost:4200"
}
...

Where can I find `ember-cli-live-reload.js`

>= 1.10 Doesn't Respect `liveReloadBaseUrl`

Ember: 3.5.0

Our apps are delivered in development mode via Nginx at a URL something like this:

http://example.com/some-app
http://example.com/another-app

some-app is, for instance, really found on http://example.com:4206/some-app.

Prior to v1.10+ we could get away with configuring LR as follows in our .ember-cli file:

"liveReloadBaseUrl": "http://example.com:4206/"

In the current versions I can't seem to get the right series of incantations to get this to work any more.

Here's what I've tried:

Host/Port Combo

"liveReloadHost": "http://example.com",
"liveReloadPort": "4206"

• cannot find ember-cli-live-reload.js at http://example.com/ember-cli-live-reload.js (it's missing the port)

Host/Port/ENV VAR

ember-cli-inject-live-reload/index.js

Lines 9 to 16 in 09f1525

	contentFor: function(type) {
	let liveReloadPort = process.env.EMBER_CLI_INJECT_LIVE_RELOAD_PORT;
	let baseURL = process.env.EMBER_CLI_INJECT_LIVE_RELOAD_BASEURL;
	if (liveReloadPort && type === 'head') {
	return '<script src="' + baseURL + 'ember-cli-live-reload.js" type="text/javascript"></script>';
	}
	},

seems to imply I can pass an env var, so above with `export EMBER_CLI_INJECT_LIVE_RELOAD_BASEURL="http://example.com:4206"

Same error.

More Advanced Vars

"liveReloadOptions": {
  "host": "example.com",
  "port": 4206
}

Same error

JS URL

"liveReloadJsUrl": "http://example.com:4206/_lr/livereload.js"

Same error.

Workaround

The work around right now is to downgrade and pin to 1.8.2. I assume the problem is something to do with the middleware configuration for modern Ember.

Content-Security-Policy Warnings

I'm running ember-cli in dev on a custom domain. My /etc/hosts looks like

127.0.0.1    my-app.dev.local

Then I access my Ember app at http://my-app.dev.local:4200. Ember works fine and LiveReload works fine. But in my console, I see

Content Security Policy violation:
{
  "csp-report": {
    "document-uri": "http://my-app.dev.local:4200/canary/authentication/sign-in",
    "referrer": "http://my-app.dev.local:4200/canary/authentication/sign-in",
    "violated-directive": "script-src 'self' 'unsafe-eval' localhost:35729 0.0.0.0:35729",
    "effective-directive": "script-src",
    "original-policy": "img-src 'self' https://secure.gravatar.com/; connect-src 'self' http://app.dev.local ws://localhost:35729 ws://0.0.0.0:35729 http://0.0.0.0:4200/csp-report; default-src 'none'; script-src 'self' 'unsafe-eval' localhost:35729 0.0.0.0:35729; font-src 'self'; style-src 'self'; media-src 'self'; report-uri http://0.0.0.0:4200/csp-report;",
    "blocked-uri": "http://my-app.dev.local:35729",
    "source-file": "http://my-app.dev.local:4200/canary/ember-cli-live-reload.js",
    "line-number": 6,
    "column-number": 43,
    "status-code": 200
  }
}

Content Security Policy violation:
{
  "csp-report": {
    "document-uri": "http://my-app.dev.local:4200/canary/authentication/sign-in",
    "referrer": "http://my-app.dev.local:4200/canary/authentication/sign-in",
    "violated-directive": "connect-src 'self' http://app.dev.local ws://localhost:35729 ws://0.0.0.0:35729 http://0.0.0.0:4200/csp-report",
    "effective-directive": "connect-src",
    "original-policy": "img-src 'self' https://secure.gravatar.com/; connect-src 'self' http://app.dev.local ws://localhost:35729 ws://0.0.0.0:35729 http://0.0.0.0:4200/csp-report; default-src 'none'; script-src 'self' 'unsafe-eval' localhost:35729 0.0.0.0:35729; font-src 'self'; style-src 'self'; media-src 'self'; report-uri http://0.0.0.0:4200/csp-report;",
    "blocked-uri": "ws://my-app.dev.local:35729",
    "source-file": "http://my-app.dev.local:35729",
    "line-number": 74,
    "column-number": 21,
    "status-code": 200
  }
}

The relevant portion of my config/environment.js looks like

contentSecurityPolicy: {
  'img-src': "'self' https://secure.gravatar.com/",
  'connect-src': "'self' http://app.dev.local"
},

Use `EMBER_CLI_INJECT_LIVE_RELOAD_BASEURL` in the injected script

    return "(function() {\n " +
           "var src = (location.protocol || 'http:') + '//' + (location.hostname || 'localhost') + ':" + liveReloadPort + "/livereload.js?snipver=1';\n " +
           "var script    = document.createElement('script');\n " +
           "script.type   = 'text/javascript';\n " +
           "script.src    = src;\n " +
           "document.getElementsByTagName('head')[0].appendChild(script);\n" +
           "}());";

Certainly possible I'm missing something, but I suspect the dynamic script we are loading should be using the same baseURL that's defined in the EMBER_CLI_INJECT_LIVE_RELOAD_BASEURL environment variable.

Feel free to close this if I'm wrong 👍

Tests

Hey, 100% Ember apps depend on this addon however there aren't any tests in this repo. Now @wongpeiyi opened issue because he's uncertain how something should work and I understand him. I think there should be tests created for this. It would be probably possible to setup Mocha tests + Travis CI on this. What do you think?

Injected script not being appropriately fingerprinted

I'm not sure if this belongs in this repository or ember-cli, so I thought I'd start here.

I'm trying to upgrade my Ember app to 2.7, which includes the deprecation of baseURL in favor of rootURL, and am having issues with ember-cli-live-reload.js not being correctly loaded anymore. I believe I've narrowed it down to the fact that this addon's content-for "head" is generating a script HTML tag that is not appropriately fingerprinted as part of my development workflow. I follow the ember-cli-deploy-lightning-pack deployment process, including setting a fingerprint.prepend config option so that I can easily run the Ember app via my Rails API backend.

What I end up seeing locally in my compiled index.html is:

<!DOCTYPE html>
<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic|Roboto+Slab:400,700" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Concierge</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">


<meta name="concierge/config/environment" content="..." />
<script src="/ember-cli-live-reload.js" type="text/javascript"></script>

    <link rel="stylesheet" href="http://foo.example.com:3701/assets/vendor-d41d8cd98f00b204e9800998ecf8427e.css">
    <link rel="stylesheet" href="http://foo.example.com:3701/assets/concierge-68238d05d8c846b15a26246906dbfff1.css">


  </head>
  <body>


    <script src="http://foo.example.com:3701/assets/vendor-634beea64fb44c0889763a1850d9f892.js"></script>
    <script src="http://foo.example.com:3701/assets/concierge-0423df8642ac8af31ada605ab0bd16d9.js"></script>


  </body>
</html>

You'll notice that all of the script/link tags have http://foo.example.com:3701 prepended to the asset path, but the ember-cli-live-reload.js script tag does not.

I'm pretty sure this is because the data returned from contentFor is not being passed through the broccoli-asset-rev fingerprinting process, but don't know enough about it to figure out why.

Let me know if there is anything else I can do to help figure out how to resolve this, or if I'm just doing something stupid!

Possibility of having different server port and base url port

With introduction of deployment technologies like Kubernetes and ECS, the services need to have an internal port on which they listen and an external port which is mapped to the internal port. This introduces the need of having a way to specify the internal port on which the server needs to be started and one more port to which the script will try to access from the browser.
So there should be possible configuration option to specify an extra port if the deployment is made through K8S or ECS.

--live-reload-* command line options need documentation

I am trying to change my live-reload-host to localhost because my http port is proxied to a development url. It's unclear to find out how to do this.

$ ./node_modules/.bin/ember help | grep reload
  --live-reload (Boolean) (Default: true)
  --live-reload-host (String) Defaults to host
  --live-reload-base-url (String) Defaults to baseURL
  --live-reload-port (Number) (Defaults to port number within [49152...65535])

Needs documentation.

• --live-reload-host changes the websocket host
• --live-reload-base-url changes the javascript location relative to baseURL
• --live-reload-port doesn't seem to work in my setup overridden by .ember-cli

I can't seem to change the javascript location. It's always {{rootURL}}/{{baseUrl}}/livereload.js. But I need to change the rootURL for the livereload location only.

---

ember-cli: 3.3.0
http_parser: 2.8.0
node: 8.12.0
v8: 6.2.414.66
uv: 1.19.2
zlib: 1.2.11
ares: 1.10.1-DEV
modules: 57
nghttp2: 1.32.0
napi: 3
openssl: 1.0.2p
icu: 60.1
unicode: 10.0
cldr: 32.0
tz: 2017c
os: linux x64
npm: 6.4.1

Incorrect dynamic script returned when hostname and ember server are on different ports. Setting `options.liveReloadPort` breaks the loading of livereload.js script

Background:
Ember server running on 192.168.0.244:4200
Rails server that serves the built app is running on 192.168.0.244:3000
We are following the ember-cli-deploy lightning method which pushes the built html file to redis store which is then served via rails.

There are two things that are going on here:

1. if you set liveReloadPort: 4200, nothing happens. livereload.js is still served from 192.168.0.244:3000. I suspect it is due to these lines here

    if (options.liveReloadPort !== options.port) {
      liveReloadPort = options.liveReloadPort
    }

If they are same, which they are in this case, liveReloadPort never gets set. Which would be fine if the script was actually loaded from 4200 but it looks at the location.port which is 3000

2. If you set liveReloadPort: 4700 (some arbitrary number), the generated dynamic script breaks on this line with this error:

    var prefixURL = '(location.protocol || 'http:') + '//' + host + ':' + 4700'; // Syntax Error

Unrelated; could I also interest you in exposing liveReloadBaseUrl, liveReloadPort, and liveReloadHost via ember-cli-build config? Currently we are serving these files from a different port (4200) than the server that's serving the files (3000). Something like this would be ideal:

    // ember-cli-build.js
    let app = new EmberApp(defaults, {
      emberCLILiveReload: {
        liveReloadBaseUrl: process.env.ASSET_HOST,
        liveReloadPort: 4700
      },
    });

These options can then be merged like so on this line

  serverMiddleware: function(config) {
    var self = this;
    var app = config.app;
    var options = config.options;
    // this will become
    var options = Object.assign(config.options, this.app.options.emberCLILiveReload)

No way to fetch / serve from different URLs

Right now the process.env.EMBER_CLI_INJECT_LIVE_RELOAD_BASEURL is used in the script tag and the server, which gets kind of hairy when supporting multiple environments.

It would be really convenient for us to be able to override liveReloadBaseUrl with something like this:

{
  "liveReloadServerBaseUrl": "/",
  "liveReloadScriptBaseUrl": "/ember-app/"
}

Let me know what you think about this. Glad to open a PR.

baseURL is being removed from ember

I've upgraded to latest beta version of ember-cli and latest ember.js and reload JS file returns 404 as baseURL is no more in the config.

Live reload on master not working (500 error)

Hey when I've changed in my package.json ember-cli-live-reload from 1.4.1 to master branch of this repo then after npm install and ember s live reload script errors:

And when I open this 500 error file in browser I can see:

Working package.json:

  "devDependencies": {
    "broccoli-asset-rev": "^2.4.2",
    "ember-ajax": "^2.0.1",
    "ember-cli": "2.8.0-beta.2",
    "ember-cli-app-version": "^1.0.0",
    "ember-cli-babel": "^5.1.6",
    "ember-cli-dependency-checker": "^1.2.0",
    "ember-cli-fastboot": "0.6.2",
    "ember-cli-font-awesome": "0.1.1",
    "ember-cli-foundation-sass": "1.2.0",
    "ember-cli-htmlbars": "^1.0.3",
    "ember-cli-htmlbars-inline-precompile": "^0.3.1",
    "ember-cli-inject-live-reload": "1.4.1",
    "ember-cli-qunit": "^2.1.0",
    "ember-cli-release": "0.2.8",
    "ember-cli-sass": "^5.5.1",
    "ember-cli-sri": "^2.1.0",
    "ember-cli-uglify": "^1.2.0",
    "ember-computed-decorators": "0.2.2",
    "ember-data": "2.8.0-beta.1",
    "ember-export-application-global": "^1.0.5",
    "ember-load-initializers": "^0.5.1",
    "ember-network": "0.3.0",
    "ember-resolver": "^2.0.3",
    "loader.js": "^4.0.1",
    "ember-cli-test-loader": "^1.1.0",
    "ember-cli-jshint": "^1.0.0"
  }

Package.json with master and not working:

  "devDependencies": {
    "broccoli-asset-rev": "^2.4.2",
    "ember-ajax": "^2.0.1",
    "ember-cli": "2.8.0-beta.2",
    "ember-cli-app-version": "^1.0.0",
    "ember-cli-babel": "^5.1.6",
    "ember-cli-dependency-checker": "^1.2.0",
    "ember-cli-fastboot": "0.6.2",
    "ember-cli-font-awesome": "0.1.1",
    "ember-cli-foundation-sass": "1.2.0",
    "ember-cli-htmlbars": "^1.0.3",
    "ember-cli-htmlbars-inline-precompile": "^0.3.1",
    "ember-cli-inject-live-reload": "rwjblue/ember-cli-inject-live-reload#master",
    "ember-cli-qunit": "^2.1.0",
    "ember-cli-release": "0.2.8",
    "ember-cli-sass": "^5.5.1",
    "ember-cli-sri": "^2.1.0",
    "ember-cli-uglify": "^1.2.0",
    "ember-computed-decorators": "0.2.2",
    "ember-data": "2.8.0-beta.1",
    "ember-export-application-global": "^1.0.5",
    "ember-load-initializers": "^0.5.1",
    "ember-network": "0.3.0",
    "ember-resolver": "^2.0.3",
    "loader.js": "^4.0.1",
    "ember-cli-test-loader": "^1.1.0",
    "ember-cli-jshint": "^1.0.0"
  }

Also if I fix that error by using:

if (liveReloadOptions && liveReloadOptions.snipver === undefined) {
      liveReloadOptions.snipver = 1;
    }

I get another error:

By the way, I started working on creating tests etc. but seems to me like master is fundamentally broken or I'm missing something very important... but seems like there is a problem with:

"window.LiveReloadOptions = " + JSON.stringify(liveReloadOptions) + ";\n " +

Because when:

var liveReloadOptions = options.liveReloadOptions;

is undefined then script will still create window.LiveReloadOptions which will be equal to undefined and then livereload.js script checks first:

if ('LiveReloadOptions' in window) {
  // parse window.LiveReloadOptions but obviously it's undefined here so we will get ws://null:xxx
} else {
  // find script with livereload.js by regex in scripts and get host from there
}

So, please check if master is working because to me it looks like it's wrong. @rwjblue

GET https://app-name.local/livereload.js net::ERR_ABORTED 404 (Not Found)

I'm serving my ember app in https. Followed the example which was given in https://github.com/ember-cli/ember-cli-inject-live-reload at the bottom of the page. It was working fine in ember 2.18.0

.ember-cli:

{
...
 "liveReloadPort": 37531,

  // This `liveReloadOptions` property becomes `window.LiveReloadOptions`
  "liveReloadOptions": {
    "port": 37631,
    "https": true,
    "host": "livereload.app-name.local"
  },

  "liveReloadJsUrl": "https://app-name.local/livereload.js"
}

after updating ember to 3.7.1 and ember-cli-inject-live-reload to 2.0.1 getting error in browser console

GET https://app-name.local/livereload.js net::ERR_ABORTED 404 (Not Found)
(anonymous) @ ember-cli-live-reload.js:14
(anonymous) @ ember-cli-live-reload.js:15

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' localhost:37531 0.0.0.0:37531 undefined:37531".

ember-cli-live-reload.js:

(function() {
  window.LiveReloadOptions = {"port":37631,"https":true,"host":"app-name.local","snipver":1};
  var srcUrl = 'https://app-name.local/livereload.js';
  var host= location.hostname || 'localhost';
  var liveReloadPort = 37531;
  var defaultPort = location.protocol === 'https:' ? 443 : 80;
  var port = liveReloadPort || location.port || defaultPort;
  var path = '&path=_lr/livereload';
  var prefixURL = (location.protocol || 'http:') + '//' + host + ':' + 37531;
  var src = srcUrl || prefixURL + '/_lr/livereload.js?port=' + port + '&host=' + host + path;
  var script    = document.createElement('script');
  script.type   = 'text/javascript';
  script.src    = src;
  "line 14" document.getElementsByTagName('head')[0].appendChild(script);
}());

Is it possible to remove the need for a liveReloadPort added to the livereload url

https://github.com/ember-cli/ember-cli-inject-live-reload/blob/master/index.js#L24

If that is configurable somehow it makes life easier in a docker environment. where something like

38100 is the nginx port
38000 is the live reload port
8000 is the ember port

and you only need to expose 38100 from the nginx docker container while having a location block that matches livereload.js and maps it over to the correct location

Livereload script not injected after a refresh

What's the issue ?

I have the issue ONLY in the tests (ember exam --server)
When doing a manual refresh it seems the live reload is no more injected into the DOM.
I need every time to restart completely my tests to make it come back 😞

Context

• ember-cli: 3.16.2
• ember-cli-inject-live-reload: 2.0.2

// .ember-cli
{
  "disableAnalytics": false,
  "usePods": true,
  "liveReloadJsUrl": "https://app.development.forestadmin.com/_lr/livereload.js?port=4200&host=app.development.forestadmin.com&path=_lr/livereload",
  "liveReloadOptions": {
    "https": true,
    "port": 443,
    "host": "app.development.forestadmin.com",
    "path": "_lr/livereload"
  }
}

liveReloadBaseUrl with absolute url no longer supported

In the past, we could use "liveReloadBaseUrl": "http://localhost:4200/" which is necessary for using ember-cli-deploy for a development workflow, i.e. accessing from http://localhost:3000/

However, with rwjblue@3473a64 this no longer seems to work

Should this be

app.use((options.rootURL || options.baseURL) + 'ember-cli-live-reload.js', // ...

instead?

Docs mention liveReloadHost. Should be liveReloadBaseUrl?

The README for this repo mentions a liveReloadHost option, but this doesn't seem to do anything, and I don't see it anywhere in the code.

Should this be liveReloadBaseUrl? That seems to be what actually changes the url of ember-cli-live-reload.js: https://github.com/ember-cli/ember-cli-inject-live-reload/blob/master/index.js#L41

live-reload does not work if rootURL is a subdirectory

By default this plugin expects the ember projects to be served from the local hosts webroot. If you are serving it from a sub directory i.e http://localhost.site/app/ the ember-cli-live-reload.js script will 404.

I am able to get it to load locally if I modify index.js on line 10 and remove the forward slash changing:

return '<script src="/ember-cli-live-reload.js" type="text/javascript"></script>';

into

return '<script src="ember-cli-live-reload.js" type="text/javascript"></script>';

I would assume we need to pull in the rootUrl from either ember or the ember-cli environment file if it is defined.

DEPRECATION: Upgrade ember-cli-inject-live-reload version to 1.10.0 or above

I get the message DEPRECATION: Upgrade ember-cli-inject-live-reload version to 1.10.0 or above when I use the option "liveReloadOptions": {...} or "liveReloadJsUrl": "...".

When I remove liveReloadOptions the message goes away.

$ ember v
ember-cli: 3.10.1
node: 12.4.0
os: win32 x64
$ npm ls ember-cli-inject-live-reload ember-source
[...]
+-- [email protected]
`-- [email protected]

I solved it by now by changing my apache config to use mod_proxy_wstunnel. But how can I use liveReloadOptions without a deprecation warning?

Livereload reloads whole page even if only the css has changed

I guess this has more to do with ember-cli (or even broccoli) but it impacts the effectiveness of live-reload.

When changing the css, and only the css, livereload signals the whole page to reload, since ember-cli will recompile the whole app and dump it on the dist folder again.

Do you know if there's any plans to support partial recompiling, so we can get the best of livereload? Reloading CSS only is a pleasure when it comes to style difficult-to-reach scenarios.

Thanks!