In this introductory example, we will develop a Browser-based application that uses the following call chain.
Native "OS" function
In this case, we will invoke the a simple WASI module that does nothing more than writing
hello world to standard out.
However, interaction with file descriptors such as "standard in" and "standard out" is not normally possible for a WebAssembly module, since this type of functionality belongs to the underlying "OS". Therefore, we must make use of the following two packages:
Provide access to a sand-boxed filesystem with which
This example will be bundled and served by Parcel and run in the browser.
Make sure Parcel has been installed and is available from the command line
$ npm install -g parcel
Before the installation of Parcel will work on a Mac, you must first install the Xcode Command Line Tools
Change into some development directory
$ cd <some_development_directory>
Create and then change into a new project directory, then run
$ mkdir wasmer-js-hello-world$ cd wasmer-js-hello-word$ npm init
After answering all the questions from
npm init, you will have a configured
For the purposes of testing, we need to install both the
These packages allow
parcel to serve our Wasm files as static assets:
npm install --save-dev parcel-bundler parcel-plugin-static-files-copy
This command both installs the required packages and updates the
devDependencies section of your
Create a bare-bones
Create the file
index.js and add the following single line of code:
console.log('I am working')
Let's test that the basic file structure of our project is correct:
$ parcel index.htmlServer running at http://localhost:1234✨ Built in 1.15s.
Point your browser to
http://localhost:1234 and you should see a blank page.
"I am working", which means everything is working!
Now that the basic file structure of our project has been set up correctly, we must next declare the use of packages
To install these packages as runtime dependencies to our project, run the following command:
$ npm install --save @wasmer/wasi @wasmer/wasmfs
Create a new directory called
$ mkdir static
Download the WebAssembly module
helloworld.wasm and store it in this directory
Now we need to change the contents of
index.js to implement the required functionality.
Seeing as this is demo code, it uses meaningful variable names and contains additional explanatory comments — features that are often sadly missing from production code...
Please take some time to read and understand these comments as they explain how the functionality has been constructed.
Also, please read the comment explaining the use of
@wasmer/wasm-transformer; we will cover this very important detail in a later example.
As long as
parcel is still running, after saving
index.js, your browser should automatically refresh and you should see
Next, let's take a look at transforming WASI modules that require transformations.