Tagged Base64 Converter is a simple web app for encoding and decoding information in Tagged Base64 format. It is intended to be practical, but also to be a simple example of a web interface to a Rust library.
Here is a mockup of the web interface.
For development, tools for building and packaging Rust, wasm, and JavaScript are needed. After the wasm assets are built, only a web server is needed.
- Install or update Rust
- Install Node.js
- update npm
cargo install wasm-packwasm-pack build(cd www && npm install)
The following commands are needed after source changes
wasm-pack build(cd www && npm install)(cd www && NODE_OPTIONS=--openssl-legacy-provider)
When you change the Rust code, you need to use wasm-pack build to recreate tb64_wasm_shim_bg.wasm and the wrappers in the pkg directory. Node finds these files via www/package.json.
pkg directory and the www directory contain a package.json. The one in the pkg directory describes the wasm-related assets. The one in the www directory describes the web app.
wasm-pack build
Before you can run the web server, you need to install the required Node modules as described in www/package.json. Any time you update www/package.json, you'll need to run npm install again.
(cd www && npm install)
When you modify the JavaScript or HTML, assets usually reload automatically. Otherwise, kill and rerun npm run start and reload the browser window.
See npm install.
(cd www && NODE_OPTIONS=--openssl-legacy-provider npm run start)
NODE_OPTIONS must include --openssl-legacy-provider because wasm-pack inherits an issue from webpack. OpenSSL deprecated a hash function. Webpack is planning to migrate to a different hash function for webpack 6.
www/package.json tells NPM where to find things including the Wasm bytecodes and the JavaScript wrappers.
- pkg - WASM and associated JavaScript and TypeScript wrappers generated by
wasm-pack buildand referenced bywww/package.json - src - Rust sources
- tests - Rust tests
- www - Web app
If you want to create your own project without copying this one, you can use wasm-pack-template. To use instantiate the template you'll need cargo-generate. Cargo-generate instantiates the author and project name in a few places.
cargo install cargo-generate
cargo generate --git https://github.com/rustwasm/wasm-pack-template
Setup an NPM package directory in www
[npm init wasm-app www](https://github.com/rustwasm/create-wasm-app)
- This creates the following files
- bootstrap.js
- index.html
- index.js
- LICENSE-APACHE
- LICENSE-MIT
- package.json
- package-lock.json
- README.md
- webpack.config.js
Licensed under either of
at your option.
Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in the work by you, as defined in the Apache-2.0 license, shall be dual licensed as above, without any additional terms or conditions.