feat: enable live reload

* in container running in windows host

Author: weaponsforge

docker-compose.dev.yml

@@ -12,4 +12,7 @@ services:
     ports:
       - "3000:3000"
       - "9229:9229"
-
+    # Enable USE_POLLING if working in Windows WSL2 to enable hot reload
+    environment:
+      - IS_DOCKER=true
+      # - USE_POLLING=true

docker-compose.prod.yml

@@ -8,5 +8,6 @@ services:
       target: production
     volumes:
       - .:/opt/app
+      - /opt/app/node_modules
     ports:
       - "3000:3000"

gulpfile.js

@@ -1,24 +1,38 @@
-const gulp = require('gulp')
-const browserSync = require('browser-sync').create()
-const root = './public'
-const PORT = process.env.PORT || 3000
-
-// browsersync local static server
-const server = function () {
-  browserSync.init({
-    server: root,
-    port: PORT
-  })
-}
-
-// Files to watch for changes then reload browser
-const watch = function () {
-  gulp.watch(`${root}/*.html`).on('change', browserSync.reload)
-  gulp.watch(`${root}/*.css`).on('change', browserSync.reload)
-  gulp.watch(`${root}/*.js`).on('change', browserSync.reload)
-}
-
-// Gulp tasks
-gulp.task('browserSync', server)
-gulp.task('watch', watch)
-gulp.task('dev', gulp.series(gulp.parallel('browserSync', 'watch')))
+const gulp = require('gulp')
+const browserSync = require('browser-sync').create()
+const root = 'public'
+const PORT = process.env.PORT || 3000
+
+// browsersync local static server
+const server = function () {
+  browserSync.init({
+    server: root,
+    port: PORT,
+    ...(process.env.IS_DOCKER && { open: false })
+  })
+}
+
+// Files to watch for changes then reload browser
+const watch = function () {
+  const html = `${root}/**/*.html`
+  const css = `${root}/**/*.css`
+  const js = `${root}/**/*.js`
+
+  // Use gulp internal and polling if working in Windows WSL2 to enable hot reload
+  gulp.watch(html,
+    (process.env.USE_POLLING && { interval: 1000, usePolling: true })
+  ).on('change', browserSync.reload)
+
+  gulp.watch(css,
+    (process.env.USE_POLLING && { interval: 1000, usePolling: true })
+  ).on('change', browserSync.reload)
+
+  gulp.watch(js,
+    (process.env.USE_POLLING && { interval: 1000, usePolling: true })
+  ).on('change', browserSync.reload)
+}
+
+// Gulp tasks
+gulp.task('browserSync', server)
+gulp.task('watch', watch)
+gulp.task('dev', gulp.series(gulp.parallel('browserSync', 'watch')))