add polling to ensure hot reloading

magento · Mar 12, 2019 · 840b87d · 840b87d
1 parent 8fe1c2a
commit 840b87d
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 5 deletions.
diff --git a/docker/.env.docker b/docker/.env.docker
@@ -7,6 +7,7 @@
 PWA_STUDIO_PUBLIC_PATH=pwa-docker.localhost
 PWA_STUDIO_PORTS_DEVELOPMENT=8080
 ENABLE_SERVICE_WORKER_DEBUGGING=0
+PWA_STUDIO_HOT_RELOAD_WITH_POLLING=0
 MAGENTO_BACKEND_URL=https://release-dev-rxvv2iq-zddsyhrdimyra.us-4.magentosite.cloud/
 MAGENTO_BUILDPACK_PROVIDE_SECURE_HOST=0
 UPWARD_JS_UPWARD_PATH=venia-upward.yml

diff --git a/docker/README.md b/docker/README.md
@@ -33,3 +33,7 @@ If service workers are enabled during development, then service worker caching w
 In order to avoid manual page refreshing and have hot reloading work as expected with service workers enabled, it is recommended for developers to click the `Update on reload` checkbox in the `Service Workers` panel in Chrome developer tools. This feature in Chrome is helpful when developing with service workers because it ensures that the service worker is updated on every page reload and you will see changes immediately, avoiding the service worker cache.
 
 For more details check out the [dev tools docs](https://bit.ly/2tTGWc0).
+
+### Hot Reloading is not working
+
+If you find that hot reloading is not working for you the webpack docs recommend using [polling](https://webpack.js.org/configuration/watch/#watchoptionspoll) as watching does not work with network file systems and machines in VirtualBox. To enable polling, set `PWA_STUDIO_HOT_RELOAD_WITH_POLLING=1` in `.env.docker`.
diff --git a/docker/makeHostAndCert.js b/docker/makeHostAndCert.js
@@ -2,14 +2,14 @@ const devcert = require('devcert');
 const domain = process.argv[2];
 const fs = require('fs');
 
-let makeFile = (name, content) => {
+const makeFile = (name, content) => {
     fs.writeFile(name, content, err => {
         if (err) throw err;
         console.log(`${name} CREATED SUCCESSFULLY`);
     });
 };
-let ssl = async function (domain) {
-    let s = await devcert.certificateFor(domain);
+const ssl = async function (domain) {
+    const s = await devcert.certificateFor(domain);
     makeFile(`./docker/certs/${domain}.crt`, s.cert);
     makeFile(`./docker/certs/${domain}.key`, s.key);
 };

diff --git a/docker/run-docker b/docker/run-docker
@@ -15,7 +15,7 @@ while getopts ":e" opt; do
         CONFIG_ENV_FILE="$2"
         echo "Configuration using environment variables from: $2"
       else
-        echo -e "The env file you provided does not exist at this path: $2\nPlease enter the correct path to your environment file."
+        echo -e "The env file you provided does not exist at this path: $2\nPlease provide the relative path to your environment file.\nExample: $CONFIG_ENV_FILE"
         exit 1
       fi
       ;;
@@ -39,7 +39,7 @@ env_setup () {
   ENVFILE=./.env
   message "Adding env vars from $CONFIG_ENV_FILE to $ENVFILE for docker setup."
   cp $CONFIG_ENV_FILE $ENVFILE
-  echo "ENVFILEPATH=./$CONFIG_ENV_FILE" >> $ENVFILE
+  echo "ENVFILEPATH=$CONFIG_ENV_FILE" >> $ENVFILE
   cat $ENVFILE
   . $ENVFILE
   DOMAIN=$PWA_STUDIO_PUBLIC_PATH

diff --git a/packages/pwa-buildpack/src/WebpackTools/PWADevServer.js b/packages/pwa-buildpack/src/WebpackTools/PWADevServer.js
@@ -47,6 +47,13 @@ const PWADevServer = {
             contentBase: false, // UpwardPlugin serves static files
             compress: true,
             hot: true,
+            watchOptions: {
+                // polling is CPU intensive - provide the option to turn it on if needed
+                poll:
+                    !!parseInt(
+                        process.env.PWA_STUDIO_HOT_RELOAD_WITH_POLLING
+                    ) || false
+            },
             host: '0.0.0.0',
             port:
                 process.env.PWA_STUDIO_PORTS_DEVELOPMENT ||

diff --git a/pwa-devdocs/_drafts/docker-setup.md b/pwa-devdocs/_drafts/docker-setup.md
@@ -5,6 +5,7 @@
     ```
     git clone https://github.com/magento-research/pwa-studio
     ```
+    *Note*: Windows users will want to ensure that [shared drives](https://docs.docker.com/docker-for-windows/#shared-drives) are enabled.
 3. In the root of the repository, run 
     ```
     docker/run-docker
@@ -30,3 +31,7 @@ If service workers are enabled during development, then service worker caching w
 In order to avoid manual page refreshing and have hot reloading work as expected with service workers enabled, it is recommended for developers to click the `Update on reload` checkbox in the `Service Workers` panel in Chrome developer tools. This feature in Chrome is helpful when developing with service workers because it ensures that the service worker is updated on every page reload and you will see changes immediately, avoiding the service worker cache.
 
 For more details check out the [dev tools docs](https://bit.ly/2tTGWc0).
+
+### Hot Reloading is not working
+
+If you find that hot reloading is not working for you the webpack docs recommend using [polling](https://webpack.js.org/configuration/watch/#watchoptionspoll) as watching does not work with network file systems and machines in VirtualBox. To enable polling, set `PWA_STUDIO_HOT_RELOAD_WITH_POLLING=1` in `.env.docker`.