Reload button (#224)

* Button added to the debugger

* Reload endpoint

* Add reload command to CLI, updated snapshots

src/__tests__/__snapshots__/cliEntry.test.js.snap

@@ -28,6 +28,7 @@ Commands:
   init       Generates necessary configuration files
   start      Starts a new webpack server
   bundle     Builds the app bundle for packaging
+  reload     Sends reload request to all devices that enabled live reload
 
 Run haul COMMAND --help for more information on specific commands
 "

src/cliEntry.js

@@ -24,6 +24,7 @@ const COMMANDS: Array<Command> = [
   require('./commands/init'),
   require('./commands/start'),
   require('./commands/bundle'),
+  require('./commands/reload'),
 ];
 
 const NOT_SUPPORTED_COMMANDS = [

src/commands/reload.js

@@ -0,0 +1,48 @@
+/**
+ * Copyright 2017-present, Callstack.
+ * All rights reserved.
+ *
+ * @flow
+ */
+
+const clear = require('clear');
+const logger = require('../logger');
+const http = require('http');
+
+/**
+ * Send reload request to devices
+ */
+
+async function reload() {
+  const requestOptions = {
+    hostname: 'localhost',
+    port: 8081,
+    path: '/reloadapp',
+    method: 'HEAD',
+  };
+
+  const req = http.request(requestOptions, () => {
+    clear();
+    logger.done('Sent reload request');
+    req.end();
+  });
+
+  req.on('error', e => {
+    clear();
+    const error = e.toString();
+    if (error.includes('connect ECONNREFUSED')) {
+      logger.error(`Reload request failed. Make sure Haul is up.`);
+    } else {
+      logger.error(e);
+    }
+  });
+
+  req.end();
+}
+
+module.exports = {
+  name: 'reload',
+  description: 'Sends reload request to all devices that enabled live reload',
+  action: reload,
+  options: [],
+};

src/server/assets/debugger.html

@@ -23,6 +23,10 @@
         document.getElementById('devtools-info').innerHTML = 'Press <span class="shortcut">' +
           refresh_shortcut +
           '</span> in simulator to reload and connect.';
+
+        document.getElementById('reloadButton').addEventListener('click', function() {
+          fetch('http://' + window.location.host + '/reloadapp', { method: 'HEAD' });
+        })
       };
       var INITIAL_MESSAGE = '<span class="circle circle-green"></span> Waiting';
       function connectToDebuggerProxy() {
@@ -154,6 +158,33 @@
       text-align: center;
     }
 
+    .features {
+      text-align: center;
+    }
+
+    #reloadButton {
+      background-color:#b8e356;
+      border-radius:6px;
+      border:1px solid #83c41a;
+      display:inline-block;
+      color:#ffffff;
+      font-family:Arial;
+      font-size:15px;
+      cursor: pointer;
+      font-weight:bold;
+      padding:6px 24px;
+      text-decoration:none;
+      text-shadow:0px 1px 0px #86ae47;
+      outline: none;
+    }
+    #reloadButton:hover {
+      background-color:#a5cc52;
+    }
+    #reloadButton:active {
+      position:relative;
+      top:1px;
+    }
+
     img {
       width: 100%;
     }
@@ -179,6 +210,10 @@
       <p>Press <kbd id='dev_tools_shortcut' class="shortcut">⌘⌥J</kbd> to open Developer Tools.</p>
       <p id='devtools-info'></p>
     </div>
+
+    <div class="features">
+      <button title="Make sure 'Live Reload' is enabled on the device" id="reloadButton">Reload App</button>
+    </div>
   </main>
 </body>
 

src/server/middleware/liveReloadMiddleware.js

@@ -8,6 +8,18 @@
  */
 function liveReloadMiddleware(compiler) {
   let watchers = [];
+  const headers = {
+    'Content-Type': 'application/json; charset=UTF-8',
+  };
+
+  function notifyAllWatchers() {
+    watchers.forEach(watcher => {
+      watcher.res.writeHead(205, headers);
+      watcher.res.end(JSON.stringify({ changed: true }));
+    });
+
+    watchers = [];
+  }
 
   return (req, res, next) => {
     /**
@@ -26,20 +38,17 @@ function liveReloadMiddleware(compiler) {
       return;
     }
 
+    if (req.path === '/reloadapp') {
+      notifyAllWatchers();
+      res.end();
+      return;
+    }
+
     /**
      * On new `build`, notify all registered watchers to reload
      */
     compiler.plugin('done', () => {
-      const headers = {
-        'Content-Type': 'application/json; charset=UTF-8',
-      };
-
-      watchers.forEach(watcher => {
-        watcher.res.writeHead(205, headers);
-        watcher.res.end(JSON.stringify({ changed: true }));
-      });
-
-      watchers = [];
+      notifyAllWatchers();
     });
 
     next();