Add LiveReload (#663)

admin/testing-changes-on-Docusaurus-itself.md

@@ -47,4 +47,4 @@ Feel free to contribute debug instructions for other IDEs
 
 ### Observing changes
 
-Now that the server is running, you can make changes to the core Docusaurus code and docs to see the effects on the Docusaurus site. Just refresh the local site, usually running at http://localhost:3000
+Now that the server is running, you can make changes to the core Docusaurus code and docs to see the effects on the Docusaurus site. LiveReload will reflect changes to the local site in your browser, usually running at http://localhost:3000

lib/core/Site.js

@@ -7,11 +7,13 @@
 
 const React = require('react');
 const fs = require('fs');
+const classNames = require('classnames');
+
 const HeaderNav = require('./nav/HeaderNav.js');
 const Head = require('./Head.js');
 const Footer = require(process.cwd() + '/core/Footer.js');
 const translation = require('../server/translation.js');
-const classNames = require('classnames');
+const constants = require('./constants');
 
 const CWD = process.cwd();
 
@@ -159,6 +161,13 @@ class Site extends React.Component {
                 }}
               />
             ))}
+          {process.env.NODE_ENV === 'development' && (
+            <script
+              src={`http://localhost:${
+                constants.LIVE_RELOAD_PORT
+              }/livereload.js`}
+            />
+          )}
         </body>
       </html>
     );

lib/core/constants.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+module.exports = {
+  LIVE_RELOAD_PORT: 35729,
+};

lib/server/server.js

@@ -21,6 +21,10 @@ function execute(port) {
   const mkdirp = require('mkdirp');
   const glob = require('glob');
   const chalk = require('chalk');
+  const gaze = require('gaze');
+  const tinylr = require('tiny-lr');
+
+  const constants = require('../core/constants');
   const translate = require('./translate');
   const {renderToStaticMarkupWithDoctype} = require('./renderUtils');
 
@@ -541,6 +545,33 @@ function execute(port) {
     );
   });
 
+  // Start LiveReload server.
+  process.env.NODE_ENV = 'development';
+  const server = tinylr();
+  server.listen(constants.LIVE_RELOAD_PORT, function() {
+    console.log(
+      'LiveReload server started on port %d',
+      constants.LIVE_RELOAD_PORT
+    );
+  });
+
+  // gaze watches some specified dirs and triggers a callback when they change.
+  gaze(
+    [
+      '../docs/**/*', // docs
+      '**/*', // website
+    ],
+    function() {
+      // Listen for all kinds of file changes - modified/added/deleted.
+      this.on('all', function() {
+        // Notify LiveReload clients that there's a change.
+        // Typically, LiveReload will only refresh the changed paths,
+        // so we use / here to force a full-page reload.
+        server.notifyClients(['/']);
+      });
+    }
+  );
+
   app.listen(port);
 }
 

lib/start-server.js

@@ -64,7 +64,7 @@ function checkPort() {
         const server = require('./server/server.js');
         server(port);
         const host = `http://localhost:${port}`;
-        console.log(`Starting Docusaurus server on ${host}`);
+        console.log('Docusaurus server started on port %d', port);
         opn(host);
       }
     })

package.json

@@ -42,6 +42,7 @@
     "express": "^4.15.3",
     "feed": "^1.1.0",
     "fs-extra": "^5.0.0",
+    "gaze": "^1.1.2",
     "glob": "^7.1.2",
     "highlight.js": "^9.12.0",
     "imagemin": "^5.3.1",
@@ -58,7 +59,8 @@
     "shelljs": "^0.7.8",
     "sitemap": "^1.13.0",
     "tcp-port-used": "^0.1.2",
-    "tree-node-cli": "^1.1.1"
+    "tree-node-cli": "^1.1.1",
+    "tiny-lr": "^1.1.1"
   },
   "bin": {
     "docusaurus-start": "./lib/start-server.js",