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 worldto 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:
$ npm install -g parcel
- 1.Change into some development directory$ cd <some_development_directory>
- 2.Create and then change into a new project directory, then run
npm init$ mkdir wasmer-js-hello-world$ cd wasmer-js-hello-word$ npm initAfter answering all the questions from
npm init, you will have a configured
- 3.For the purposes of testing, we need to install both the
parcel-plugin-static-files-copypackages.These packages allow
parcelto serve our Wasm files as static assets:npm install --save-dev parcel-bundler parcel-plugin-static-files-copyThis command both installs the required packages and updates the
devDependenciessection of your
- 4.Create a bare-bones
- 5.Create the file
index.jsand add the following single line of code:console.log('I am working')
- 6.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
"I am working", which means everything is working!
- 7.Now that the basic file structure of our project has been set up correctly, we must next declare the use of packages
@wasmer/wasmfs.To install these packages as runtime dependencies to our project, run the following command:$ npm install --save @wasmer/wasi @wasmer/wasmfs
- 8.Create a new directory called
static$ mkdir static
- 10.Now we need to change the contents of
index.jsto implement the required functionality.Code SampleSeeing 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
- 11.As long as
parcelis 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.