Skip to content

Instantly share code, notes, and snippets.

@corwin-of-amber

corwin-of-amber/Building NW.js on macOS.md

Last active June 10, 2022 14:05
Show Gist options
  • Save corwin-of-amber/8f478779d3a5d8c631c9e3dd1110e3c5 to your computer and use it in GitHub Desktop.
Save corwin-of-amber/8f478779d3a5d8c631c9e3dd1110e3c5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Building NW.js on macOS.md

Building NW.js on macOS (for Mere Mortals) {: .doctitle}

This is an annotated version of Building NW.js from the official NW.js developer documentation. It includes my experience from building NW.js binaries for macOS, both Intel (x86-64) and M1 (arm64). The latter can be easily discerned since they are block-quoted and appear in red1.

<style>.notes { color: #f44; }</style>

Prerequisites

NW.js use same build tools and similar steps as Chromium. Read the instructions according to your platform to install depot_tools and other prerequistes:

!!! note "Windows" As suggested by Chromium document, you need to run set DEPOT_TOOLS_WIN_TOOLCHAIN=0 or set the variable in your global environment.

TL;DR for Mac: Install Xcode (full, not command-line tools, unfortunately), then

git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git
export PATH="$PATH:$PWD/depot_tools"

Get the Code

Step 1. Create a folder for holding NW.js source code, like $HOME/nwjs, and run following command in the folder to generate .gclient file:

mkdir -p $HOME/nwjs
cd $HOME/nwjs
gclient config --name=src https://github.com/nwjs/chromium.src.git@origin/nw57

Generally if you are not interested in running Chromium tests, you don't have to sync the test cases and reference builds, which saves you lot of time. Open the .gclient file you just created and replace custom_deps section with followings:

"custom_deps" : {
    "src/third_party/WebKit/LayoutTests": None,
    "src/chrome_frame/tools/test/reference_build/chrome": None,
    "src/chrome_frame/tools/test/reference_build/chrome_win": None,
    "src/chrome/tools/test/reference_build/chrome": None,
    "src/chrome/tools/test/reference_build/chrome_linux": None,
    "src/chrome/tools/test/reference_build/chrome_mac": None,
    "src/chrome/tools/test/reference_build/chrome_win": None,
}

Manually clone and checkout correct branches for following repositories:

path repo
src/content/nw https://github.com/nwjs/nw.js
src/third_party/node-nw https://github.com/nwjs/node
src/v8 https://github.com/nwjs/v8

For a quick copy-paste (replace nw57 with the version branch you want to build):

B=nw57
git clone -b $B https://github.com/nwjs/nw.js src/content/nw
git clone -b $B https://github.com/nwjs/node src/third_party/node-nw
git clone -b $B https://github.com/nwjs/v8 src/v8

Step 2. Run following command in your terminal:

gclient sync --with_branch_heads

This usually downloads 20G+ from GitHub and Google's Git repos. Make sure you have a good network provider and be patient 😛

When finished, you will see a src folder created in the same folder as .gclient.

!!! note "First Build on Linux" If you are building on Linux for the first time, you need to run gclient sync --with_branch_heads --nohooks and then run ./build/install-build-deps.sh to install dependencies on Ubuntu. See Chromium document for detailed instructions of getting the source code.

Generate ninja build files with GN for Chromium

cd src
gn gen out/nw  # (changing the 'nw' part of the path is not supported. You'd better not change the 'out' part if you're new to this)

Use flags like our official build:

is_debug=false
is_component_ffmpeg=true
target_cpu="x64"

We support component build: is_component_build = true for faster development cycle. It should be used when you are trying to build debug version.

(In case you are not a Ninja) Arguments can be set either by editing out/nw/args.gn or via the --args command-line flag. Here is the full command line used by the official Mac build (taken from http://buildbot-master.nwjs.io:8010/builders/nw57_sdk_mac64/builds/10/steps/gn/logs/stdio):

gn gen out/nw '--args=is_debug=false is_component_ffmpeg=true target_cpu="x64" symbol_level=1 enable_nacl=true proprietary_codecs=true ffmpeg_branding="Chromium" enable_stripping=true enable_dsyms=true enable_precompiled_headers=false'

For M1, set target_cpu="arm64" and remove enable_nacl=true.

(Why is NaCl even enabled in buildbot? It is a deprecated framework.)

See the upstream documentation for the mapping between GN and GYP flags: https://chromium.googlesource.com/chromium/src/+/master/tools/gn/docs/cookbook.md#Variable-mappings

Generate ninja build files with GYP for Node

cd src
GYP_CHROMIUM_NO_ACTION=0 ./build/gyp_chromium -I \
third_party/node-nw/common.gypi -D building_nw=1 \
-D clang=1 third_party/node-nw/node.gyp

or use the following if you're doing a component build:

./build/gyp_chromium -D component=shared_library -I \
third_party/node-nw/common.gypi -D building_nw=1 \
-D clang=1 third_party/node-nw/node.gyp

Requires Python 2; since you probably have Python 3 and it is the default, make the following changes.

  1. Install Python 2.7. Apple removed the python2 binary in Monterey. So get yours here: https://www.python.org/downloads/release/python-2718/
  2. patch third_party/node-nw/common.gypi, replacing
python -c "import sys; print sys.byteorder"

with

python2 -c "import sys; print sys.byteorder"
  1. patch src/tools/gyp/pylib/gyp/mac_tool.py, replacing
#!/usr/bin/env python

with (you guessed it)

#!/usr/bin/env python2
  1. prefix the command with python2, e.g.
GYP_CHROMIUM_NO_ACTION=0 python2 ./build/gyp_chromium -I \
third_party/node-nw/common.gypi -D building_nw=1 \
-D clang=1 third_party/node-nw/node.gyp

To change the build configuration for Node, you need to setup the GYP_DEFINES environment variable:

32-bit/64-bit Build

  • Windows
    • 32-bit: is the default build target
    • 64-bit: set GYP_DEFINES="target_arch=x64" and rebuild in out/Debug_x64 or out/Release_x64 folder
  • Linux
    • 32-bit: TODO: chroot
    • 64-bit: is the default build target
  • Mac
    • 32-bit: export GYP_DEFINES="host_arch=ia32 target_arch=ia32" and rebuild in out/Debug or out/Release folder
    • 64-bit: is the default build target

For Mac, the default does not work for some reason. Use export GYP_DEFINES="target_arch=x64" for x86-64, or export GYP_DEFINES="target_arch=arm64" for M1.

Here is the full definition from buildbot (x86-64):

export GYP_DEFINES="target_arch=x64 building_nw=1 nwjs_sdk=1 disable_nacl=0 mac_breakpad=1 buildtype=Official"

Build nwjs

ninja build files are generated in out/nw folder after you run GN. Run following command in your terminal will generate the Debug build of standard NW.js binaries in out/nw folder:

cd src
ninja -C out/nw nwjs

For Mac: with the minimal set of parameters, the Ninja action nw/dump will fail due to unmet dependencies. This can be skipped by editing content/nw/BUILD.gn, removing the block that starts with if (is_mac && !is_component_build).

!!! tip "Build Time" Generally a full build takes hours of time depending on the performance of your machine. Recommended configuration is to build on a PC with multicore CPU (>=8 cores), SSD and large memory (>= 8G). And you can read Build Faster section below for some tips to speed up the build.

To build 32-bit/64-bit binaries or non-standard build flavors, you need to edit out/nw/args.gn file And then re-run the commands above to generate binaries.

Build Node

cd src
ninja -C out/Release node

After building Node, the final step is to copy the build Node library to the nwjs binary folder:

cd src
ninja -C out/nw copy_node

Build Flavors

  • Standard: nwjs_sdk=false
  • SDK: enable_nacl=true

On M1, NaCl does not build. Just drop it. (See earlier note.)

See [Build Flavors](../For Users/Advanced/Build Flavors.md) for the differences of all supported build flavors.

Enable Proprietary Codecs

Due to the license issue, the prebuilt binaries of NW.js doesn't support proprietary codecs, like H.264. So you can't play MP3/MP4 with <audio> and <video> tags with prebuilt NW.js. To enable those medias, you have to build NW.js from source code by following the document of [Enable Proprietary Codecs](Enable Proprietary Codecs.md).

Build Faster

From Google's website, there are a few tips to speed up your build. Open the links below to see the tips for your platform:

Footnotes

  1. Not on GitHub though; they aggressively sanitize HTML in Markdown. Block quotes still work 😬 ↩

@corwin-of-amber
Copy link
Author

Links to M1 binaries (which are currently not available from the official NW.js releases):
https://github.com/corwin-of-amber/nw.js/releases

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment