This project aims to provide a quick way to get started with WebAssembly.
- clean separation between WebAssembly and JavaScript code, with easy interop
- automated and reproducible build for wasm binaries using
Make
andemsdk
- Webpack/ES6 support out of the box with no configuration
It was bootstrapped using the amazing Create React App. This means all the boilerplate is pushed to its dependencies (think webpack config, babel etc.), it comes with sensible defaults and everything just works™.
Please fork and happy hacking!
To see a more complex project built on the same skeleton take a look at color-automata (a colourful cellular automaton implemented with WebAssembly).
You need to have emsdk installed in order to build the wasm modules. The project uses the JS module output from emscripten in order to load and run the wasm code.
Since emsdk is (still) dependent on node v4, that causes problems for CRA/yarn/ES6 projects as it's missing features so you won't be able to build the wasm module and the JS bundle in the same shell.
To build the WebAssembly module and JavaScript wrapper, run:
activate-emsdk
npm run build-wasm
The Makefile
build produces the following artifacts:
- a WebAseembly binary in
public/
(made available as a regular file for the dev server or production build) - a JavaScript module in
src/
which contains logic to load the binary so its code can be invoked from JS
Since eslint runs by default on all JS sources, the module needs a disabling comment prepended to it - also taken care of by the Makefile.
The dev server does not use the correct mime type for the wasm binary so you will see a warning logged to the console ('Incorrect response MIME type. Expected 'application/wasm'). This does not affect functionality in any way.
If you have the Webpack dev server running when you build the wasm JavaScript wrapper you will need to restart the server. The build command deletes then re-creates the JS file and the dev server doesn't like that very much.
The emsdk distribution comes with a useful shell script that sets up everything you need in order to build wasm binaries and JS modules in the terminal. You can create an alias to make this step easier:
alias activate-emsdk="source ~/code/emsdk/emsdk_env.sh"