[Sage 9] npm start won't recompile watched SCSS / JS / PHP files

sage
1

I’ve been trying to figure this out for a few hrs now but it’s got me beat. I have a fresh copy of Sage 9 in a Vagrant Scotchbox environment and I am trying to get Browsersync reloading the CSS. I can run npm start fine and I see Browsersync load up as follows:

[BS] Proxying: http://192.168.33.10
[BS] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.33.10:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.33.10:3001
 --------------------------------------
[BS] Watching files...

and the asset files compile correctly. But if I make a change to the SCSS files subsequently (also to PHP / JS files), webpack does nothing, stopping at the line

webpack: bundle is now VALID.

My config.json looks like this:

{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "watch": [
      "assets/scripts/**/*.js",
      "assets/styles/**/*.scss",
      "templates/**/*.php",
      "src/**/*.php"
    ],
  "publicPath": "/wp-content/themes/dc-theme",
  "devUrl": "http://192.168.33.10",
  "proxyUrl": "http://192.168.33.10:3000",
  "cacheBusting": "[name]_[hash:8]"
}

I’ve tried all sorts of combos for the publicPath / devURL / proxyURL but I’m getting nowhere. I think it has something to do with “localhost” being forced onto Browsersync, but I can’t access Vagrant’s localhost outside of the box (ie. in my web browser).

Here’s my full terminal output running npm start:

vagrant@scotchbox:/var … /wp-content/themes/dc-theme] master(+26/-24,1) ± npm start

> sage@9.0.0-alpha.3 start /var/www/public/clients/sunrise/www/wp-content/themes/dc-theme
> npm run build -s -- --watch

clean-webpack-plugin: /var/www/public/clients/sunrise/www/wp-content/themes/dc-theme/dist has been removed.
 10% building modules 3/3 modules 0 active                 
Webpack is watching the files…

 10% building modules 5/10 modules 5 active ...ode_modules/style-loader/addStyles.jsThe react/require-extension rule is deprecated. Please use the import/extensions rule from eslint-plugin-import instead.
 12% building modules 23/29 modules 6 active ...s/html-entities/lib/html5-entities.js[BABEL] Note: The code generator has deoptimised the styling of "/var/www/public/clients/sunrise/www/wp-content/themes/dc-theme/node_modules/bootstrap/dist/js/bootstrap.js" as it exceeds the max of "100KB".
Hash: 9f8b130d6b1d4ca26a4f                                                           
Version: webpack 2.1.0-beta.22
Time: 23349ms
                                    Asset       Size  Chunks             Chunk Names
                          scripts/main.js     849 kB       0  [emitted]  main
  vendor/fontawesome-webfont_25a32416.eot    76.5 kB          [emitted]  
  vendor/fontawesome-webfont_1dc35d25.ttf     153 kB          [emitted]  
vendor/fontawesome-webfont_e6cf7c6e.woff2    71.9 kB          [emitted]  
 vendor/fontawesome-webfont_c8ddf1e5.woff    90.4 kB          [emitted]  
  vendor/fontawesome-webfont_d7c63908.svg     392 kB          [emitted]  
                    scripts/customizer.js    71.8 kB       1  [emitted]  customizer
                         scripts/files.js    66.3 kB       2  [emitted]  files
                      scripts/main.js.map  447 bytes       0  [emitted]  main
                scripts/customizer.js.map  299 bytes       1  [emitted]  customizer
                     scripts/files.js.map  267 bytes       2  [emitted]  files
    + 38 hidden modules
Hash: 9f8b130d6b1d4ca26a4f
Version: webpack 2.1.0-beta.22
Time: 23349ms
                                    Asset       Size  Chunks             Chunk Names
                          scripts/main.js     849 kB       0  [emitted]  main
  vendor/fontawesome-webfont_25a32416.eot    76.5 kB          [emitted]  
  vendor/fontawesome-webfont_1dc35d25.ttf     153 kB          [emitted]  
vendor/fontawesome-webfont_e6cf7c6e.woff2    71.9 kB          [emitted]  
 vendor/fontawesome-webfont_c8ddf1e5.woff    90.4 kB          [emitted]  
  vendor/fontawesome-webfont_d7c63908.svg     392 kB          [emitted]  
                    scripts/customizer.js    71.8 kB       1  [emitted]  customizer
                         scripts/files.js    66.3 kB       2  [emitted]  files
                      scripts/main.js.map  447 bytes       0  [emitted]  main
                scripts/customizer.js.map  299 bytes       1  [emitted]  customizer
                     scripts/files.js.map  267 bytes       2  [emitted]  files
chunk    {0} scripts/main.js, scripts/main.js.map (main) 948 kB [entry] [rendered]
    [0] ./assets/build/public-path.js 4.55 kB {0} {1} [built]
    [] multi main 100 bytes
    [1] ./~/html-entities/lib/html5-entities.js 49 kB {0} {1} {2} [built]
    [2] (webpack)-hot-middleware/client.js?timeout=20000&reload=false 4.49 kB {0} {1} {2} [built]
    [3] ./~/ansi-html/index.js 4.02 kB {0} {1} {2} [built]
    [4] ./~/ansi-regex/index.js 135 bytes {0} {1} {2} [built]
    [5] ./~/html-entities/index.js 231 bytes {0} {1} {2} [built]
    [6] ./~/html-entities/lib/html4-entities.js 6.57 kB {0} {1} {2} [built]
    [7] ./~/html-entities/lib/xml-entities.js 2.98 kB {0} {1} {2} [built]
    [8] ./~/querystring-es3/decode.js 2.51 kB {0} {1} {2} [built]
    [9] ./~/querystring-es3/encode.js 2.54 kB {0} {1} {2} [built]
   [10] ./~/querystring-es3/index.js 127 bytes {0} {1} {2} [built]
   [11] ./~/strip-ansi/index.js 161 bytes {0} {1} {2} [built]
   [12] (webpack)-hot-middleware/client-overlay.js 1.74 kB {0} {1} {2} [built]
   [13] (webpack)-hot-middleware/process-update.js 3.88 kB {0} {1} {2} [built]
   [14] (webpack)/buildin/module.js 548 bytes {0} {1} {2} [built]
   [15] external "jQuery" 42 bytes {0} {1} [not cacheable]
   [16] ./assets/styles/main.scss 1.43 kB {0} [built]
   [18] ./assets/scripts/main.js 4.95 kB {0} [built]
   [19] ./~/css-loader?+sourceMap!./~/postcss-loader!./~/resolve-url-loader?+sourceMap!./~/sass-loader?+sourceMap!./assets/styles/main.scss 687 kB {0} [built]
   [20] ./~/tether/dist/js/tether.js 56.2 kB {0} [built]
   [21] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
   [22] ./~/font-awesome/fonts/fontawesome-webfont.eot 85 bytes {0} [built]
   [23] ./~/font-awesome/fonts/fontawesome-webfont.eot?v=4.6.3 85 bytes {0} [built]
   [24] ./~/font-awesome/fonts/fontawesome-webfont.svg?v=4.6.3 85 bytes {0} [built]
   [25] ./~/font-awesome/fonts/fontawesome-webfont.ttf?v=4.6.3 85 bytes {0} [built]
   [26] ./~/font-awesome/fonts/fontawesome-webfont.woff2?v=4.6.3 87 bytes {0} [built]
   [27] ./~/font-awesome/fonts/fontawesome-webfont.woff?v=4.6.3 86 bytes {0} [built]
   [28] ./~/bootstrap/dist/js/bootstrap.js 80.3 kB {0} [built]
   [29] ./assets/scripts/routes/About.js 4.35 kB {0} [built]
   [30] ./assets/scripts/routes/Common.js 4.46 kB {0} [built]
   [31] ./assets/scripts/routes/Home.js 4.45 kB {0} [built]
   [32] ./assets/scripts/util/camelCase.js 4.54 kB {0} [built]
   [33] ./assets/scripts/util/router.js 6.6 kB {0} [built]
   [34] ./~/style-loader/addStyles.js 7.15 kB {0} [built]
chunk    {1} scripts/customizer.js, scripts/customizer.js.map (customizer) 88 kB [entry] [rendered]
    [0] ./assets/build/public-path.js 4.55 kB {0} {1} [built]
    [] multi customizer 76 bytes
    [1] ./~/html-entities/lib/html5-entities.js 49 kB {0} {1} {2} [built]
    [2] (webpack)-hot-middleware/client.js?timeout=20000&reload=false 4.49 kB {0} {1} {2} [built]
    [3] ./~/ansi-html/index.js 4.02 kB {0} {1} {2} [built]
    [4] ./~/ansi-regex/index.js 135 bytes {0} {1} {2} [built]
    [5] ./~/html-entities/index.js 231 bytes {0} {1} {2} [built]
    [6] ./~/html-entities/lib/html4-entities.js 6.57 kB {0} {1} {2} [built]
    [7] ./~/html-entities/lib/xml-entities.js 2.98 kB {0} {1} {2} [built]
    [8] ./~/querystring-es3/decode.js 2.51 kB {0} {1} {2} [built]
    [9] ./~/querystring-es3/encode.js 2.54 kB {0} {1} {2} [built]
   [10] ./~/querystring-es3/index.js 127 bytes {0} {1} {2} [built]
   [11] ./~/strip-ansi/index.js 161 bytes {0} {1} {2} [built]
   [12] (webpack)-hot-middleware/client-overlay.js 1.74 kB {0} {1} {2} [built]
   [13] (webpack)-hot-middleware/process-update.js 3.88 kB {0} {1} {2} [built]
   [14] (webpack)/buildin/module.js 548 bytes {0} {1} {2} [built]
   [15] external "jQuery" 42 bytes {0} {1} [not cacheable]
   [17] ./assets/scripts/customizer.js 4.39 kB {1} [built]
chunk    {2} scripts/files.js, scripts/files.js.map (files) 78.9 kB [entry] [rendered]
    [] multi files 28 bytes
    [1] ./~/html-entities/lib/html5-entities.js 49 kB {0} {1} {2} [built]
    [2] (webpack)-hot-middleware/client.js?timeout=20000&reload=false 4.49 kB {0} {1} {2} [built]
    [3] ./~/ansi-html/index.js 4.02 kB {0} {1} {2} [built]
    [4] ./~/ansi-regex/index.js 135 bytes {0} {1} {2} [built]
    [5] ./~/html-entities/index.js 231 bytes {0} {1} {2} [built]
    [6] ./~/html-entities/lib/html4-entities.js 6.57 kB {0} {1} {2} [built]
    [7] ./~/html-entities/lib/xml-entities.js 2.98 kB {0} {1} {2} [built]
    [8] ./~/querystring-es3/decode.js 2.51 kB {0} {1} {2} [built]
    [9] ./~/querystring-es3/encode.js 2.54 kB {0} {1} {2} [built]
   [10] ./~/querystring-es3/index.js 127 bytes {0} {1} {2} [built]
   [11] ./~/strip-ansi/index.js 161 bytes {0} {1} {2} [built]
   [12] (webpack)-hot-middleware/client-overlay.js 1.74 kB {0} {1} {2} [built]
   [13] (webpack)-hot-middleware/process-update.js 3.88 kB {0} {1} {2} [built]
   [14] (webpack)/buildin/module.js 548 bytes {0} {1} {2} [built]
webpack: bundle is now VALID.
[BS] Proxying: http://192.168.33.10
[BS] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.33.10:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.33.10:3001
 --------------------------------------
[BS] Watching files...
Hash: 9f8b130d6b1d4ca26a4f                                                           
Version: webpack 2.1.0-beta.22
Time: 8909ms
                                    Asset       Size  Chunks             Chunk Names
                          scripts/main.js     849 kB       0             main
  vendor/fontawesome-webfont_25a32416.eot    76.5 kB          [emitted]  
  vendor/fontawesome-webfont_1dc35d25.ttf     153 kB          [emitted]  
vendor/fontawesome-webfont_e6cf7c6e.woff2    71.9 kB          [emitted]  
 vendor/fontawesome-webfont_c8ddf1e5.woff    90.4 kB          [emitted]  
  vendor/fontawesome-webfont_d7c63908.svg     392 kB          [emitted]  
                    scripts/customizer.js    71.8 kB       1             customizer
                         scripts/files.js    66.3 kB       2             files
                      scripts/main.js.map  447 bytes       0             main
                scripts/customizer.js.map  299 bytes       1             customizer
                     scripts/files.js.map  267 bytes       2             files
chunk    {0} scripts/main.js, scripts/main.js.map (main) 948 kB [entry]
    [0] ./assets/build/public-path.js 4.55 kB {0} {1} [built]
    [1] ./~/html-entities/lib/html5-entities.js 49 kB {0} {1} {2} [built]
    [2] (webpack)-hot-middleware/client.js?timeout=20000&reload=false 4.49 kB {0} {1} {2} [built]
    [3] ./~/ansi-html/index.js 4.02 kB {0} {1} {2} [built]
    [4] ./~/ansi-regex/index.js 135 bytes {0} {1} {2} [built]
    [5] ./~/html-entities/index.js 231 bytes {0} {1} {2} [built]
    [6] ./~/html-entities/lib/html4-entities.js 6.57 kB {0} {1} {2} [built]
    [7] ./~/html-entities/lib/xml-entities.js 2.98 kB {0} {1} {2} [built]
    [8] ./~/querystring-es3/decode.js 2.51 kB {0} {1} {2} [built]
    [9] ./~/querystring-es3/encode.js 2.54 kB {0} {1} {2} [built]
   [10] ./~/querystring-es3/index.js 127 bytes {0} {1} {2} [built]
   [11] ./~/strip-ansi/index.js 161 bytes {0} {1} {2} [built]
   [12] (webpack)-hot-middleware/client-overlay.js 1.74 kB {0} {1} {2} [built]
   [13] (webpack)-hot-middleware/process-update.js 3.88 kB {0} {1} {2} [built]
   [14] (webpack)/buildin/module.js 548 bytes {0} {1} {2} [built]
   [15] external "jQuery" 42 bytes {0} {1} [not cacheable]
   [16] ./assets/styles/main.scss 1.43 kB {0} [built]
   [18] ./assets/scripts/main.js 4.95 kB {0} [built]
   [19] ./~/css-loader?+sourceMap!./~/postcss-loader!./~/resolve-url-loader?+sourceMap!./~/sass-loader?+sourceMap!./assets/styles/main.scss 687 kB {0} [built]
   [20] ./~/tether/dist/js/tether.js 56.2 kB {0} [built]
   [21] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
   [22] ./~/font-awesome/fonts/fontawesome-webfont.eot 85 bytes {0} [built]
   [23] ./~/font-awesome/fonts/fontawesome-webfont.eot?v=4.6.3 85 bytes {0} [built]
   [24] ./~/font-awesome/fonts/fontawesome-webfont.svg?v=4.6.3 85 bytes {0} [built]
   [25] ./~/font-awesome/fonts/fontawesome-webfont.ttf?v=4.6.3 85 bytes {0} [built]
   [26] ./~/font-awesome/fonts/fontawesome-webfont.woff2?v=4.6.3 87 bytes {0} [built]
   [27] ./~/font-awesome/fonts/fontawesome-webfont.woff?v=4.6.3 86 bytes {0} [built]
   [28] ./~/bootstrap/dist/js/bootstrap.js 80.3 kB {0} [built]
   [29] ./assets/scripts/routes/About.js 4.35 kB {0} [built]
   [30] ./assets/scripts/routes/Common.js 4.46 kB {0} [built]
   [31] ./assets/scripts/routes/Home.js 4.45 kB {0} [built]
   [32] ./assets/scripts/util/camelCase.js 4.54 kB {0} [built]
   [33] ./assets/scripts/util/router.js 6.6 kB {0} [built]
   [34] ./~/style-loader/addStyles.js 7.15 kB {0} [built]
   [37] multi main 100 bytes {0}
chunk    {1} scripts/customizer.js, scripts/customizer.js.map (customizer) 88 kB [entry]
    [0] ./assets/build/public-path.js 4.55 kB {0} {1} [built]
    [1] ./~/html-entities/lib/html5-entities.js 49 kB {0} {1} {2} [built]
    [2] (webpack)-hot-middleware/client.js?timeout=20000&reload=false 4.49 kB {0} {1} {2} [built]
    [3] ./~/ansi-html/index.js 4.02 kB {0} {1} {2} [built]
    [4] ./~/ansi-regex/index.js 135 bytes {0} {1} {2} [built]
    [5] ./~/html-entities/index.js 231 bytes {0} {1} {2} [built]
    [6] ./~/html-entities/lib/html4-entities.js 6.57 kB {0} {1} {2} [built]
    [7] ./~/html-entities/lib/xml-entities.js 2.98 kB {0} {1} {2} [built]
    [8] ./~/querystring-es3/decode.js 2.51 kB {0} {1} {2} [built]
    [9] ./~/querystring-es3/encode.js 2.54 kB {0} {1} {2} [built]
   [10] ./~/querystring-es3/index.js 127 bytes {0} {1} {2} [built]
   [11] ./~/strip-ansi/index.js 161 bytes {0} {1} {2} [built]
   [12] (webpack)-hot-middleware/client-overlay.js 1.74 kB {0} {1} {2} [built]
   [13] (webpack)-hot-middleware/process-update.js 3.88 kB {0} {1} {2} [built]
   [14] (webpack)/buildin/module.js 548 bytes {0} {1} {2} [built]
   [15] external "jQuery" 42 bytes {0} {1} [not cacheable]
   [17] ./assets/scripts/customizer.js 4.39 kB {1} [built]
   [35] multi customizer 76 bytes {1}
chunk    {2} scripts/files.js, scripts/files.js.map (files) 78.9 kB [entry]
    [1] ./~/html-entities/lib/html5-entities.js 49 kB {0} {1} {2} [built]
    [2] (webpack)-hot-middleware/client.js?timeout=20000&reload=false 4.49 kB {0} {1} {2} [built]
    [3] ./~/ansi-html/index.js 4.02 kB {0} {1} {2} [built]
    [4] ./~/ansi-regex/index.js 135 bytes {0} {1} {2} [built]
    [5] ./~/html-entities/index.js 231 bytes {0} {1} {2} [built]
    [6] ./~/html-entities/lib/html4-entities.js 6.57 kB {0} {1} {2} [built]
    [7] ./~/html-entities/lib/xml-entities.js 2.98 kB {0} {1} {2} [built]
    [8] ./~/querystring-es3/decode.js 2.51 kB {0} {1} {2} [built]
    [9] ./~/querystring-es3/encode.js 2.54 kB {0} {1} {2} [built]
   [10] ./~/querystring-es3/index.js 127 bytes {0} {1} {2} [built]
   [11] ./~/strip-ansi/index.js 161 bytes {0} {1} {2} [built]
   [12] (webpack)-hot-middleware/client-overlay.js 1.74 kB {0} {1} {2} [built]
   [13] (webpack)-hot-middleware/process-update.js 3.88 kB {0} {1} {2} [built]
   [14] (webpack)/buildin/module.js 548 bytes {0} {1} {2} [built]
   [36] multi files 28 bytes {2}
webpack: bundle is now VALID.

Any help would be greatly appreciated…

2

If you recently ran npm run build:production then you may need to run npm run build (like the old gulp setup).

3

Gave it a shot… still not getting anywhere - after running those commands then npm start I get a “BrowserSync Connected” message in my browser, but no refreshing after making SCSS edits (eg editing the $brand-primary: style in _variables.scss doesn’t trigger any BSync refresh, or recompile on the server).

I have a feeling it’s something to do with the Virtualbox / Vagrant setup and that localhost is not accessible outside of the box. Just so my thinking is straight about that, does this sound correct:

Vagrant Scotchbox sends all traffic to 192.168.33.10 like so:

# Vagrantfile
 config.vm.network "private_network", ip: "192.168.33.10"

publicPath - should be set to the theme URL relative to the Wordpress directory (in my case, that’s /wp-content/themes/dc-theme/)
I’ve also tried the absolute path relative to my server but that didn’t work.

devURL - should be set to the URL of my WP installation (not just the IP address) eg. http://192.168.33.10/clients/foobar/www
Also tried just the IP address, didn’t get any results.

proxyURL - should be set to the IP address + port 3000, eg. http://192.168.33.10:3000

BrowserSync still reports:

[BS] Proxying: http://192.168.33.10
[BS] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.33.10:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.33.10:3001
 --------------------------------------
[BS] Watching files...

Which seems to indicate to me that BrowserSync is live on localhost, but I should be able to access the external URL (as specified in proxyURL) to see BS in action anyhow.

So perhaps something is up with regard to the Vagrant network interface to my host machine.

If there’s something not logical or incorrect about that setup please let me know!

4

As an experiment I went back to a fresh Sage 8.x theme, running on the same Vagrant setup.

manifest.json:

    "devUrl": "http://192.168.33.10/"

Browsersync:

$ gulp build ; gulp watch --fast

[BS] Proxying: http://192.168.33.10
[BS] Access URLs:
 ----------------------------------
       Local: http://localhost:3000
    External: http://10.0.2.15:3000
 ----------------------------------
          UI: http://localhost:3001
 UI External: http://10.0.2.15:3001
 ----------------------------------
[BS] Watching files...
[00:46:25] Starting 'wiredep'...
[00:46:25] Finished 'wiredep' after 917 ms
[00:46:25] Starting 'styles'...
[BS] 1 file changed (main.css)
[00:46:30] Finished 'styles' after 4.95 s

Browsersync works flawlessly on http://192.168.33.10:3000/foobar/www/

So it seems for Sage 9, maybe something’s up with Webpack / HMR / BS and Vagrant…

EDIT: Turns out that it was Vagrant running out of memory. I’ve worked out that it’s better to run the build tools directly in my Mac OS system, rather than inside the VM, where it won’t choke up.