Support customizing the hostname in URLs that point to the package server

To facilitate testing the client on devices that are not the same as the
one the package server and Hypothesis dev server are running on, it is
useful to be able to set the hostname for URLs that point to the package
content server that `gulp watch` runs.

This commit adds support for setting this via a `PACKAGE_SERVER_HOSTNAME`
env var.

gulpfile.js

@@ -241,6 +241,17 @@ function triggerLiveReload(changedFiles) {
   debouncedLiveReload();
 }
 
+/**
+ * Return the hostname that should be used when generating URLs to the package
+ * content server.
+ *
+ * Customizing this can be useful when testing the client on different devices
+ * than the one the package content server is running on.
+ */
+function packageServerHostname() {
+  return process.env.PACKAGE_SERVER_HOSTNAME || 'localhost';
+}
+
 /**
  * Generates the `build/boot.js` script which serves as the entry point for
  * the Hypothesis client.
@@ -249,12 +260,18 @@ function triggerLiveReload(changedFiles) {
  */
 function generateBootScript(manifest) {
   var { version } = require('./package.json');
-  var defaultAssetRoot = process.env.NODE_ENV === 'production' ?
-    `https://cdn.hypothes.is/hypothesis/${version}/` : `http://localhost:3001/hypothesis@${version}/`;
 
   var defaultSidebarAppUrl = process.env.H_SERVICE_URL ?
     `${process.env.H_SERVICE_URL}/app.html` : 'https://hypothes.is/app.html';
 
+  var defaultAssetRoot;
+
+  if (process.env.NODE_ENV === 'production') {
+    defaultAssetRoot = `https://cdn.hypothes.is/hypothesis/${version}/`;
+  } else {
+    defaultAssetRoot = `http://${packageServerHostname()}:3001/hypothesis@${version}/`;
+  }
+
   gulp.src('build/scripts/boot.bundle.js')
     .pipe(replace('__MANIFEST__', JSON.stringify(manifest)))
     .pipe(replace('__ASSET_ROOT__', defaultAssetRoot))
@@ -299,13 +316,12 @@ gulp.task('watch-manifest', function () {
 gulp.task('serve-live-reload', ['serve-package'], function () {
   var LiveReloadServer = require('./scripts/gulp/live-reload-server');
   liveReloadServer = new LiveReloadServer(3000, {
-    clientUrl: 'http://localhost:3001/hypothesis',
-    serviceUrl: process.env.H_SERVICE_URL,
+    clientUrl: `http://${packageServerHostname()}:3001/hypothesis`,
   });
 });
 
 gulp.task('serve-package', function () {
-  servePackage(3001);
+  servePackage(3001, packageServerHostname());
 });
 
 gulp.task('build',

scripts/gulp/live-reload-server.js

@@ -12,7 +12,6 @@ function changelogText() {
 /**
  * @typedef Config
  * @property {string} clientUrl - The URL of the client's boot script
- * @property {string} serviceUrl - The URL of the Hypothesis service
  */
 
 /**
@@ -48,17 +47,7 @@ function LiveReloadServer(port, config) {
       <pre style="margin: 20px 75px 75px 75px;">${changelogText()}</pre>
       <script>
       var appHost = document.location.hostname;
-
-      // When the server is accessed via a non-localhost IP/domain (eg.  when
-      // testing the client on a mobile device on the same WiFi network), we
-      // need to rewrite references to localhost in the sidebar app and client
-      // boot script URLs.
-      var clientUrl = '${config.clientUrl}'.replace('localhost', appHost);
-      var sidebarAppUrl = '${config.serviceUrl}/app.html'.replace('localhost', appHost);
-
       var config = {
-        assetRoot: clientUrl + '/',
-        sidebarAppUrl,
         liveReloadServer: 'ws://' + appHost + ':${port}',
 
         // Open the sidebar when the page loads
@@ -78,7 +67,7 @@ function LiveReloadServer(port, config) {
       });
 
       var embedScript = document.createElement('script');
-      embedScript.src = clientUrl;
+      embedScript.src = '${config.clientUrl}';
       document.body.appendChild(embedScript);
       </script>
     </body>

scripts/gulp/serve-package.js

@@ -20,7 +20,7 @@ var { version } = require('../../package.json');
  * returned by the service's '/embed.js' route and included in the '/app.html'
  * app.
  */
-function servePackage(port) {
+function servePackage(port, hostname) {
   var app = express();
 
   // Set up redirects which mirror unpkg's behavior
@@ -42,7 +42,7 @@ function servePackage(port) {
   app.use(`/hypothesis@${version}/`, express.static('.'));
 
   app.listen(port, function () {
-    log(`Package served at http://localhost:${port}`);
+    log(`Package served at http://${hostname}:${port}/hypothesis`);
   });
 }