Template of React + TypeScript + WASM environment. You can see calculation time of Fibonacci number using JavaScript and WASM.
If you use Visual Studio Code and have Visual Studio Code Remote Container extension, run the Reopen in Container command.
cd wasm-react-typescript
cargo install wasm-pack
cargo build
The following command compiles a WebAssembly module from Rust code to wasm-react-typescript/pkg
directory.
wasm-pack build
cd react-typescript
npm install
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/
.
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
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