This project aims to provide a quick way to get started with WebAssembly.
- automated and reproducible build for wasm binaries using
- 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).
How it works
Building the wasm binary and loader
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.
activate-emsdk npm run build-wasm
Makefile build produces the following artifacts:
- a WebAseembly binary in
public/(made available as a regular file for the dev server or production build)
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.
Loading the emsdk environment
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"