hkford / react-typescript-wasm-template

React + TypeScript + WASM template

Template of React + TypeScript + WASM environment. You can see calculation time of Fibonacci number using JavaScript and WASM.

Gettings started

Open this directory in Docker container

If you use Visual Studio Code and have Visual Studio Code Remote Container extension, run the Reopen in Container command.

Install dependencies (Rust)

cd wasm-react-typescript
cargo install wasm-pack
cargo build

Compile Rust code

The following command compiles a WebAssembly module from Rust code to wasm-react-typescript/pkg directory.

wasm-pack build

Install dependencies (Node.js)

cd react-typescript
npm install

Start webpack server

In webpack.config.js you can comment out WasmPackPlugin, otherwise wasm-pack compiles src/lib.rs every time.

npm run start

Open the browser and you can see th react application in http://127.0.0.1:8080/.

How this environment is created

Rust

Create a new Cargo package.

# specify --lib option (otherwise this command creates a package with a binary target)
cargo new --lib wasm-react-typescript
cd wasm-react-typescript
cargo install wasm-pack

React+TypeScript

mkdir react-typescript
npm init wasm-app react-typescript
cd react-typescript
# typescript
npm install -D typescript ts-loader tslint
# webpack (install version >=5)
npm install -D webpack@latest webpack-cli html-webpack-plugin @webpack-cli/serve
# plugin to use compiled wasm from webpack
npm install -D @wasm-tool/wasm-pack-plugin
# webpack dev server
npm install -D webpack-dev-server
# react
npm install -S react react-dom @types/react @types/react-dom

References

• Call wasm from App.tsx
• Setting up React+TypeScript environment
• Setting up React+TypeScript environment