Linux: Compile C++ to WebAssembly and JavaScript using Emscripten and CMake

Download and Install Emscripten

• My preferred installation location is /home/user
• Get the latest sdk: git clone https://github.com/emscripten-core/emsdk.git
• Enter the cloned directory: cd emsdk
• Checkout main: git checkout main
• Install the lastest sdk tools: ./emsdk install latest
• Activate the latest sdk tools: ./emsdk activate latest
• Activate path variables: source ./emsdk_env.sh
• Configure emsdk in your bash profile by running: echo 'source "/home/user/emsdk/emsdk_env.sh"' >> $HOME/.bash_profile

Your project structure

build/  
include/  
src/  
public/  
CMakeLists.txt  

• Build directory starts empty, place header (.h) files inside /include and source (.cpp) files inside /src.

• The public folder is where the output files will go, also keep the index.html, images and css here too.

• CMakeLists.txt stays the root directory.

• In the root directory, set the CMAKE Toolchain file by running: CMAKE_TOOLCHAIN_FILE=/home/user/emsdk/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake Ensure you update your path with the location of your emsdk installation location

Compile to WASM (default)

cd build  
emcmake cmake ..  
make

Compile to JS

cd build  
emcmake cmake .. -DJS_ONLY=ON  
make

After Editing Files

make

After Adding/Removing Files

emcmake cmake ..  
make

If the emsdk directory is moved

• From the project root directory run: CMAKE_TOOLCHAIN_FILE=[/path/to]/emsdk/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake

• Then from the /build directory, run: emcmake cmake ..

• Output .js, .wasm.js and wasm.wasm files will appear in the public directory.

• Make sure you web server serves from /public.

• The index.html will load a.js if WebAssembly isn't supported by the client browser.

If the error: fatal error: emscripten.h: No such file or directory or The program 'emcmake' is currently not installed or The program 'emconfigure' is currently not installed is seen, check that your CMAKE_TOOLCHAIN_FILE path is correct as this is often the cause. You could also try re-installing by removing the /build directory, and run through emscripten installation again, making sure you run: source ./emsdk_env.sh at end. Then recreate the /build directory and run emcmake cmake .. and make again.