Adding WASM lib to NX monorepo

Based on my old notes from 2020-08-19 — might be outdated.

WHY?

I wanted to run the Rust wasm game-of-life example as a lib in nx monorepo. Here's a hacky way to do it.

Full rust+wasm game of life example with GitHub actions / GitHub pages integrations can be found in my nx-rs repository. I've used this method also in my Advent of Code solutions.

INSTALL DEPENDENCIES

Install all required dependencies:

• wasm-pack - cargo install wasm-pack
• npm install --save-dev @nx/rust

Initialize new rust library in nx monorepo:

nx g @nx/rust:lib my-wasm-lib

CONFIGURE WASM TARGET

Add wasm target to your project's project.json, inside the targets array for the rust library:

{
  "root": "libs/my-wasm-lib",
  "sourceRoot": "libs/my-wasm-lib/src",
  "projectType": "library",
  "targets": {
    "wasm": {
      "executor": "@nx/rust:wasm-pack",
      "options": {
        "name": "my-wasm-lib",
        "target": "web"
      }
    }
  }
}

USE THE LIB IN YOUR APP

Now you can use the lib in your React app:

import init, { greet } from 'my-wasm-lib';

async function main() {
  await init();
  greet('World');
}

main();