System migration...Sage theme no longer working

Hi all. I’m a bit over my head at this point, but I’m trying to get it all squared away. I would certainly appreciate any assistance you can give.

Background: Built a small-ish site for my company using Sage. I knew it would be an uphill battle as I had very little experience with Gulp, Bower, Node, etc. In the end, I am happy that I chose Sage and the site is working well. I built the site on my local Apache environment on my Ubuntu machine. I am not fluent in Git/Version Control software.

Current Issue: I suspect that I will be needing to hand control of the site over to someone else in the near future, and I’m struggling with how to do that in a reasonable way. I can’t just hand them my Ubuntu box, so my first thought was to move the site to a Virtualbox machine running an Ubuntu flavor, and just hand the new webmaster the virtual machine and be done.

HOWEVER, I am having a heck of a time getting things working in the new environment.

Here’s what I’ve done:

  1. Set up Apache and Wordpress = All good!
  2. Copied Sage theme directory from other box into this box. = All good!
  3. Installed NPM, Bower, Gulp, etc. = All good (I think, there was some problems but I think I got through them).

Issues:

  1. Gulp Build - Throws errors.

    Starting ‘styles’…
    Cannot find module ‘autoprefixer-core/node_modules/browserlist’

Doesn’t actually build the CSS for the site.

  1. Gulp Watch - Not actually opening up the site in a browser like it used to. No auto-updating when files are changed and saved.

Edited to add:

Node v4.3.1
NPM v3.7.3
Gulp v3.9.1

Any ideas?

You need to rebuild your node modules folder on the new server:
npm cache clear && rm -rf node_modules && npm install

Also a general tip, don’t run any npm / bower commands in sudo otherwise you’ll have permissions problems.

Thanks for the suggestion. Running that line was partially what got me to where I am now…there were many more issues previously. However, even after running those commands I’m still having the same issue.

Here’s are the results from running those commands.

npm WARN deprecated graceful-fs@3.0.8: graceful-fs version 3 and before will fail on newer node releases. Please update to graceful-fs@^4.0.0 as soon as possible.
npm WARN deprecated lodash@1.0.2: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0.
npm WARN deprecated graceful-fs@1.2.3: graceful-fs version 3 and before will fail on newer node releases. Please update to graceful-fs@^4.0.0 as soon as possible.
npm WARN deprecated npmconf@2.1.2: this package has been reintegrated into npm and is now out of date with respect to npm
npm WARN deprecated graceful-fs@2.0.3: graceful-fs version 3 and before will fail on newer node releases. Please update to graceful-fs@^4.0.0 as soon as possible.
npm WARN deprecated lodash@2.4.0: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0.
npm WARN prefer global jshint@2.9.1 should be installed with -g
npm WARN prefer global node-gyp@3.3.0 should be installed with -g

> bufferutil@1.2.1 install /var/www/html/weymca/wp-content/themes/weymca2015v7/node_modules/bufferutil
> node-gyp rebuild

gyp ERR! build error 
gyp ERR! stack Error: not found: make
gyp ERR! stack     at F (/home/ymca/.npm-global/lib/node_modules/npm/node_modules/which/which.js:63:19)
gyp ERR! stack     at E (/home/ymca/.npm-global/lib/node_modules/npm/node_modules/which/which.js:72:29)
gyp ERR! stack     at /home/ymca/.npm-global/lib/node_modules/npm/node_modules/which/which.js:81:16
gyp ERR! stack     at /home/ymca/.npm-global/lib/node_modules/npm/node_modules/which/node_modules/isexe/index.js:44:5
gyp ERR! stack     at /home/ymca/.npm-global/lib/node_modules/npm/node_modules/which/node_modules/isexe/access.js:8:5
gyp ERR! stack     at FSReqWrap.oncomplete (fs.js:82:15)
gyp ERR! System Linux 4.2.0-30-generic
gyp ERR! command "/usr/bin/nodejs" "/home/ymca/.npm-global/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /var/www/html/weymca/wp-content/themes/weymca2015v7/node_modules/bufferutil
gyp ERR! node -v v4.3.1
gyp ERR! node-gyp -v v3.2.1
gyp ERR! not ok 
npm WARN install:bufferutil@1.2.1 bufferutil@1.2.1 install: `node-gyp rebuild`
npm WARN install:bufferutil@1.2.1 Exit status 1

> utf-8-validate@1.2.1 install /var/www/html/weymca/wp-content/themes/weymca2015v7/node_modules/utf-8-validate
> node-gyp rebuild

gyp ERR! build error 
gyp ERR! stack Error: not found: make
gyp ERR! stack     at F (/home/ymca/.npm-global/lib/node_modules/npm/node_modules/which/which.js:63:19)
gyp ERR! stack     at E (/home/ymca/.npm-global/lib/node_modules/npm/node_modules/which/which.js:72:29)
gyp ERR! stack     at /home/ymca/.npm-global/lib/node_modules/npm/node_modules/which/which.js:81:16
gyp ERR! stack     at /home/ymca/.npm-global/lib/node_modules/npm/node_modules/which/node_modules/isexe/index.js:44:5
gyp ERR! stack     at /home/ymca/.npm-global/lib/node_modules/npm/node_modules/which/node_modules/isexe/access.js:8:5
gyp ERR! stack     at FSReqWrap.oncomplete (fs.js:82:15)
gyp ERR! System Linux 4.2.0-30-generic
gyp ERR! command "/usr/bin/nodejs" "/home/ymca/.npm-global/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /var/www/html/weymca/wp-content/themes/weymca2015v7/node_modules/utf-8-validate
gyp ERR! node -v v4.3.1
gyp ERR! node-gyp -v v3.2.1
gyp ERR! not ok 
npm WARN install:utf-8-validate@1.2.1 utf-8-validate@1.2.1 install: `node-gyp rebuild`
npm WARN install:utf-8-validate@1.2.1 Exit status 1

> node-sass@2.0.1 install /var/www/html/weymca/wp-content/themes/weymca2015v7/node_modules/node-sass
> node scripts/install.js

Can not download file from https://raw.githubusercontent.com/sass/node-sass-binaries/v2.0.1/linux-x64-node-4.3/binding.node

> node-sass@3.4.2 install /var/www/html/weymca/wp-content/themes/weymca2015v7/node_modules/gulp-sass/node_modules/node-sass
> node scripts/install.js

Binary downloaded and installed at /var/www/html/weymca/wp-content/themes/weymca2015v7/node_modules/gulp-sass/node_modules/node-sass/vendor/linux-x64-46/binding.node

> spawn-sync@1.0.15 postinstall /var/www/html/weymca/wp-content/themes/weymca2015v7/node_modules/spawn-sync
> node postinstall


> node-sass@2.0.1 postinstall /var/www/html/weymca/wp-content/themes/weymca2015v7/node_modules/node-sass
> node scripts/build.js

module.js:327
    throw err;
    ^

Error: Cannot find module '/var/www/html/weymca/wp-content/themes/weymca2015v7/node_modules/node-sass/node_modules/pangyp/bin/node-gyp'
    at Function.Module._resolveFilename (module.js:325:15)
    at Function.Module._load (module.js:276:25)
    at Function.Module.runMain (module.js:441:10)
    at startup (node.js:134:18)
    at node.js:962:3
Build failed

> node-sass@3.4.2 postinstall /var/www/html/weymca/wp-content/themes/weymca2015v7/node_modules/gulp-sass/node_modules/node-sass
> node scripts/build.js

` /var/www/html/weymca/wp-content/themes/weymca2015v7/node_modules/gulp-sass/node_modules/node-sass/vendor/linux-x64-46/binding.node ` exists. 
 testing binary.
Binary is fine; exiting.

> pngcrush-bin@3.0.0 postinstall /var/www/html/weymca/wp-content/themes/weymca2015v7/node_modules/pngcrush-bin
> node lib/install.js

  ✔ pngcrush pre-build test passed successfully

> optipng-bin@3.1.0 postinstall /var/www/html/weymca/wp-content/themes/weymca2015v7/node_modules/optipng-bin
> node lib/install.js

  ✔ optipng pre-build test passed successfully

> jpegtran-bin@3.0.6 postinstall /var/www/html/weymca/wp-content/themes/weymca2015v7/node_modules/jpegtran-bin
> node lib/install.js

  ✔ jpegtran pre-build test passed successfully

> gifsicle@3.0.3 postinstall /var/www/html/weymca/wp-content/themes/weymca2015v7/node_modules/gifsicle
> node lib/install.js

  ✔ gifsicle pre-build test passed successfully
sage@8.1.0 /var/www/html/weymca/wp-content/themes/weymca2015v7

(long tree deleted, everything in tree is uniform color)

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.8

That last error seemed to be a common problem in NPM 3.5.0: npm@3.5.0 should not be trying to install modules that arch/os say are incompatible · Issue #10768 · npm/npm · GitHub
Not sure if this affects your NPM v3.7.3 install though

Well, that’s interesting. I’m not using NVM…so it’s a little trickier for me to roll back to try an older version.

Looking at it a bit more, it’s listed as an optional dependency. I don’t suspect that it would be causing the failure to generate the CSS from LESS as I’m experiencing.

@questionable your error log seems to ring a few bells, I recall encountering this issue a long time ago…

You can generally ignore WARN messages, but it appears here you are having more serious problems than that.

If I recall correctly the problem is to do with the node-sass module in NPM. This section of the log indicates this:

> node-sass@2.0.1 postinstall /var/www/html/weymca/wp-content/themes/weymca2015v7/node_modules/node-sass
> node scripts/build.js

module.js:327
    throw err;
    ^

Can you try running npm rebuild node-sass? Or failing that npm install node-sass.

Having another look, it also looks like you’re missing node-gyp:

gyp ERR! build error 
gyp ERR! stack Error: not found: make
gyp ERR! stack     at F (/home/ymca/.npm-global/lib/node_modules/npm/node_modules/which/which.js:63:19)

Error: Cannot find module '/var/www/html/weymca/wp-content/themes/weymca2015v7/node_modules/node-sass/node_modules/pangyp/bin/node-gyp'

so also try running npm install node-gyp.

If you get more missing module errors, its likely you’ve got some more broken modules somewhere and you might end up playing a game of whack-a-mole … so you might just have to reinstall Node / NPM / Sass etc. from scratch to annihilate the problem.

Good suggestions…but still no dice. Whack-a-mole is a good description!!!

I will try to totally remove Node/NPM/Sass…etc and see where that gets me. I guess I might even just completely nuke my virtualbox and start from scratch.

Yep and while you’re at it, install NVM, it will make life so much easier…

I’ve been through too many server rebuilds to count so I ended up writing myself a Gist to document the process - this procedure seems to work every time I do it. You might find something in here that helps:

Specifically the bullet points about Ruby, NPM, NVM, Node, Bower, Gulp, etc.

1 Like

That is very helpful, thanks. I’ve got a similar document that I use…but obviously mine is introducing some sort of issue…I’ll give yours a shot!!

Well, tried spinning up a whole new server…still no dice. Used @drawcardau 's handy cheat sheets and ended up at the same issues. I didn’t think it would have anything to do with it, but I’ve been using the Lubuntu distro, I’m going to try Xubuntu to see if i get any further…not sure why it would make any difference though.

Okay, I’ve now gone through the whole process on Xubuntu as well…same issue.

> node-sass@2.0.1 install /var/www/html/wp-content/themes/weymca2015v7/node_modules/node-sass
> node scripts/install.js

Can not download file from https://raw.githubusercontent.com/sass/node-sass-binaries/v2.0.1/linux-x64-node-5.7/binding.node

> node-sass@2.0.1 postinstall /var/www/html/wp-content/themes/weymca2015v7/node_modules/node-sass
> node scripts/build.js

module.js:341
    throw err;
    ^

Error: Cannot find module '/var/www/html/wp-content/themes/weymca2015v7/node_modules/node-sass/node_modules/pangyp/bin/node-gyp'
    at Function.Module._resolveFilename (module.js:339:15)
    at Function.Module._load (module.js:290:25)
    at Function.Module.runMain (module.js:447:10)
    at startup (node.js:141:18)
    at node.js:933:3
Build failed

This is a part of the text that is displayed when I run the commands listed in the “Debugging NPM” thread. It seems pretty clear that it’s failing at the node-sass@2.0.1 install and showing that it is unable to download it from the github repository. Unfortunately, when I install node-sass after that, it doesn’t seem to fix the problems.

Any ideas?

Sorry to see you’re still having trouble.

If you look above the thrown error it says

Can not download file from https://raw.githubusercontent.com/sass/node-sass-binaries/v2.0.1/linux-x64-node-5.7/binding.node

It looks like node is trying to build the module but there’s nothing downloaded to start with. Are you having network issues with the VM you’re using? Can it connect to the internet through the host machine?

Also if you aren’t tied down to a specific environment, to save time and tearing hair out, download a preconfigured Vagrant box with LAMP / network connectivity set up and ready to go. My personal preference is https://box.scotch.io/ but Trellis is another option. Then you can install Node / NPM / etc as I’ve documented it, and test it out. If it compiles fine, then something’s up with your original environment.

No connectivity issues that I can see…that’s a good thought, though. It’s hanging up on that Node-sass download each time, so that asset must not be available through the url that it’s trying to use. What’s odd is that even when I manually install Node-sass, the process still doesn’t work.

It looks like I may have to go down the path of using Vagrant. I may have made a mistake initially using Sage, although it was a great learning experience for me. Knowing that I have to hand this project off in the nearish future, I’m trying to minimize the number of new technologies that the incoming person is going to have to learn to work on this site.

Just before you throw in the towel, take a look through the issues on node-sass’ github page - and raise the issue there if there isn’t a matching thread. It might a bug somewhere that’s outside of your control :slight_smile:

A few questions about setting things up within Vagrant:

I’ve got the Scotch box running, wordpress is working, ssh into the machine is working fine. My understanding is that normal procedures would have me working directly on the files in the shared “Public” folder on my box rather than working in the vagrant box itself.

However, when I do that, I would be using the Gulp, NPM, etc that I have set up on my local box rather the installs that are provided on the Scotch box, right?

If I ssh into the box and dig around to the /var/www/html… I can edit those files directly, of course, but then I’m using the Scotch Box versions of Node and everything…but those aren’t working right and the dependencies needs to be updated…which involves installing those things as root (or digging around and screwing with the permissions inside of the vagrant box). It seems like the whole point of the Scotch Box/Vagrant setup is to avoid having to mess around with the internals, right?

Which direction would you recommend going with this?