Rebuild native dependencies

[adlk]

Description

If you ever had to deal with native dependencies, you might know (and hate) this error messsage quite well.

…/wp-desktop/node_modules/electron/dist/Electron.app/Contents/Resources/electro…:158 Error: The module '…/wp-desktop/node_modules/@paulcbetts/spellchecker/build/Release/spellchecker.node'
was compiled against a different Node.js version using
NODE_MODULE_VERSION 64. This version of Node.js requires
NODE_MODULE_VERSION 54. Please try re-compiling or re-installing
the module (for instance, using `npm rebuild` or`npm install`).
    at process.module.(anonymous function) [as dlopen] (ELECTRON_ASAR.js:173:20)
    at Object.Module._extensions..node (module.js:598:18)
    at Object.module.(anonymous function) [as .node] (ELECTRON_ASAR.js:173:20)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (…/wp-desktop/node_modules/@paulcbetts/spellchecker/lib/spellchecker.js:3:16)
    at Object.<anonymous> (…/wp-desktop/node_modules/@paulcbetts/spellchecker/lib/spellchecker.js:116:3)

It is a common problem with electron to have ABI mismatch issues when using native dependencies. It however can be solved easily with electron-builder install-app-deps or electron-rebuild

This PR adds electron-rebuild via a make target make rebuild-deps to do a fast re-build/install of the native dependencies. It is made available via make rebuild-deps.

make rebuild-deps is added as a postinstall script and as a dependency of make start to ensure that you always have the native dependencies built against the nodejs version of electron.

Motivation and Context

• p1533572783000370-slack-wordpress-desktop

How to test

• Run make distclean
• Run npm install
• Follow the development guide to start the dev server & app
• You should see ✔ Rebuild Complete in console and be able to run the app without the error message from above.

Why not using electron-builder install-app-deps instead?

Running npx electron-builder install-app-deps works great but is time intensive as it always does a complete rebuild even though some dependencies might already be built against the correct node version.
electron-builder checks if the native dependency is already using the correct ABI version. This allows us to add the make target rebuild-deps to make start as a dependency and always ensure that we are using the correct builds without wasting much time.

Final note

This PR is based on #485 as the CONFIG_ENV fix is required to successfully run the app.

[sirreal]

Rebased now that #485 has been merged.

[sirreal]

When I try to boot the app following dev instructions, I get a flash of content followed by a crash notice:

[adlk]

@sirreal can you please open the dev tools and share your console logs?

[sirreal]

$ make dev

/Applications/Xcode.app/Contents/Developer/usr/bin/make start NODE_ENV=development DEBUG=desktop:*
✔ Rebuild Complete
Starting app...
  desktop:boot ======================================================================================================== +0ms
  desktop:boot undefined v3.3.0 +3ms
  desktop:boot Path: …/wp-desktop +0ms
  desktop:boot Server: http://calypso.localhost:3000 +1ms
  desktop:boot Settings: { 'notification-badge': true,
  'notification-bounce': false,
  'release-channel': 'stable',
  'proxy-type': '',
  'proxy-url': 'socks5://localhost',
  'proxy-port': '8080',
  'proxy-pac': '',
  'spellcheck-enabled': false,
  wpDragAndDropDisabled: true,
  'last-location': '…/wp-desktop/public_desktop/failed-to-start.html',
  window: { x: 0, y: 22, width: 1680, height: 1028 } } +0ms
  desktop:settings Get setting for proxy-type =  +0ms
  desktop:boot Proxy: none +3ms
  desktop:boot ======================================================================================================== +0ms
  desktop:index Starting app handlers +0ms
  desktop:index Waiting for app window to load +5ms
  desktop:runapp Checking for other instances +0ms
  desktop:runapp Skipping server initialization in dev mode +5ms
  desktop:runapp No other instances, waiting for app ready +0ms
  desktop:settings Get setting for last-location = …/wp-desktop/public_desktop/failed-to-start.html +0ms
  desktop:runapp Loading app (http://calypso.localhost:3000…/wp-desktop/public_desktop/failed-to-start.html) in mainWindow +176ms
  desktop:settings Get settings for window = x,y,width,height +0ms
  desktop:index Starting window handlers +359ms
  desktop:settings Get settings for debug = undefined +0ms
  desktop:settings Get setting for spellcheck-enabled = false +0ms
  desktop:system System details:  { pinned: true,
  platform: 'darwin',
  installed: false,
  firstRun: false } +0ms
  desktop:settings Get setting for spellcheck-enabled = false +0ms
  desktop:runapp Redirecting http request http://stats.wp.com/w.js?56 to https://stats.wp.com/w.js?56 +12s
  desktop:browser desktop:browser Received app configuration, starting in browser +2s +0ms
  desktop:browser desktop:browser Calypso loaded, starting +1ms
  desktop:notifications Notification count received: 0 +0ms
  desktop:settings Get setting for notification-badge = true +0ms
  desktop:settings Get setting for notification-bounce = false +0ms
  desktop:notifications Updating notification badge - badge enabled=true bounce enabled=false +0ms
  desktop:menu Enabling logged in menu items +0ms
  desktop:failed-to-load Failed to load from server, showing fallback page: code=-109 ERR_ADDRESS_UNREACHABLE +0ms
  desktop:failed-to-load Failed to load from server, showing fallback page: code=-109 ERR_ADDRESS_UNREACHABLE +7ms
  desktop:runapp Redirecting http request http://edge.quantserve.com/quant.js to https://edge.quantserve.com/quant.js +2s
  desktop:settings Get setting for spellcheck-enabled = false +0ms
  desktop:system System details:  { pinned: true,
  platform: 'darwin',
  installed: false,
  firstRun: false } +8s
2018-08-10 07:50:29.716 Electron Helper[75771:3410835] Couldn't set selectedTextBackgroundColor from default ()

I've redacted a few bits of my system paths as …

[adlk]

@sirreal thanks, can you please provide the logs from the apps dev tools console (render process) as well? To open up dev tools press Cmd+Alt+i

[sirreal]

This seems to work nicely. Uncovered issue #493 while testing.