React Typescript With Rust WASM

Boilerplate of a React TypeScript project that uses Rust WASM as a library.

More information can be found at:

wasm-pack | Create React App

About this boilerplate

This is a React Typescript template that uses a Rust library to run web assembly. By building the Rust project you will be able to display an alert on the browser.

Steps To Running This Project

• Build WASM.

cd lib && wasm-pack build

• Modify the src/types/my-wasm.ts file such that it exports your functions and properties.
• Run the project with npm.

npm start

• Start hacking!

(Below part is taken from the create-react-app README)

Available Scripts For React

Open http://localhost:3000 to view the running project in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

Available Scripts For Rust WASM

The Rust library was created using cargo generate. It is located under the lib folder. You have to re-build the project whenever you make a change to the code.

(Below part is taken from the generated projects README)

📚 Read this template tutorial! 📚

This template is designed for compiling Rust libraries into WebAssembly and publishing the resulting package to NPM.

Be sure to check out other wasm-pack tutorials online for other templates and usages of wasm-pack.

🛠️ Build with wasm-pack build

cd lib && wasm-pack build

🔬 Test in Headless Browsers with wasm-pack test

wasm-pack test --headless --firefox

🎁 Publish to NPM with wasm-pack publish

wasm-pack publish

🔋 Batteries Included

• wasm-bindgen for communicating between WebAssembly and JavaScript.
• console_error_panic_hook for logging panic messages to the developer console.
• wee_alloc, an allocator optimized for small code size.

Learn More

Learn more about cargo generate here.

Rustlings is a great source to learn Rust.

Create React App documentation.

To learn React, check out the React documentation.