More information can be found at:
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.
- 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)
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.
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
.
cd lib && wasm-pack build
wasm-pack test --headless --firefox
wasm-pack publish
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 about cargo generate
here.
Rustlings is a great source to learn Rust.
Create React App documentation.
To learn React, check out the React documentation.