Simple development environment for Rust-WASM-npm packages

stereobooster - Sep 16 '18 - - Dev Community

Photo by Paola Aguilar on Unsplash

There is only one prerequisite for this tutorial - installed Docker. Well, also you will need a good internet connection because of rust image which weights 1.7Gb

docker run -v "$PWD":/usr/src/myapp -w /usr/src/myapp --rm --interactive --tty stereobooster/rust-wasm
USER=stereobooster cargo generate --git https://github.com/rustwasm/wasm-pack-template
cd wasm-nanoid
wasm-pack init
Enter fullscreen mode Exit fullscreen mode

Use your GitHub handle instead of mine (USER=stereobooster). Use your name of the project instead of mine (wasm-nanoid).

This is it. Your development environment ready. Keep reading to know how to write and test package.

Develop

Edit Cargo.toml:

description = "nanoid implemented in wasm"
repository = "https://github.com/stereobooster/wasm-nanoid"
license = "MIT"
Enter fullscreen mode Exit fullscreen mode

Edit README.md. Add to .gitignore:

*.log
pkg/*
Enter fullscreen mode Exit fullscreen mode

Commit (you may want to do this in an OS shell because git inside Docker is not configured).

git add .
git commit -m "initial commit"
Enter fullscreen mode Exit fullscreen mode

I want to build the simple thing, so I will reuse the existing Nano ID package (crate).

Add dependency to Cargo.toml:

js-sys = "0.2.6"
nanoid = "0.2.0"
Enter fullscreen mode Exit fullscreen mode

Edit src/lib.rs:

extern crate cfg_if;
extern crate wasm_bindgen;
extern crate js_sys;
// import nanoid module
extern crate nanoid;

// for [wasm_bindgen] instruction
use wasm_bindgen::prelude::*;

// the function itself
#[wasm_bindgen]
pub fn simpleNanoid() -> js_sys::JsString {
    // generate nanoid and convert value (str) to JsString
    js_sys::JsString::from(nanoid::simple())
}
Enter fullscreen mode Exit fullscreen mode

To build run in docker shell:

wasm-pack init
Enter fullscreen mode Exit fullscreen mode

Setup testing environment

Run in OS shell:

npm init wasm-app example
Enter fullscreen mode Exit fullscreen mode

create package.json in the root of the project:

{
  "private": true,
  "workspaces": ["*"]
}
Enter fullscreen mode Exit fullscreen mode

Edit .gitignore (add):

node_modules
Enter fullscreen mode Exit fullscreen mode

Edit example/package.json:

"devDependencies": {
  "wasm-nanoid": "^0.1.0",
  ...
}
Enter fullscreen mode Exit fullscreen mode

Now run the example:

cd example
yarn
yarn start
Enter fullscreen mode Exit fullscreen mode

Publish

If you want to publish run in OS shell, where your npm credentials are configured:

cd pkg
npm publish
Enter fullscreen mode Exit fullscreen mode

Result

In my case I got (in example apps console):

Error importing `index.js`: RuntimeError: unreachable
    at __rust_start_panic (wasm-function[79]:1)
Enter fullscreen mode Exit fullscreen mode

and wasm_nanoid_bg.wasm is 50Kb but at least it was easy to create, test and publish my first (not working) WASM npm package. Will get back to tutorial.

Code from this post published here.


Follow me on twitter and github.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .