Run The Code
The Rust Webpack template is designed for creating monorepo-style Web applications with Rust-generated WebAssembly and Webpack without publishing your wasm to NPM. This portion of the tutorial will explain how to build a Webpack JavaScript project that will run your WebAssembly code in the browser.
Scaffold a JavaScript Project
To generate a new Rust Webpack project, we've used the rust-webpack
npm template.
npm init rust-webpack your-package-name
A new project folder will be created with the name you supply.
If we look in the project, we'll see the following:
.gitignore
: ignoresnode_modules
LICENSE-APACHE
andLICENSE-MIT
: most Rust projects are licensed this way, so these are included for youREADME.md
: the file you are reading now!index.html
: a bare bones html document that includes the webpack bundlejs/index.js
: example JS file with a comment showing how to import and use a wasm pkgpackage.json
andpackage-lock.json
:- pulls in devDependencies for using webpack:
- defines a
start
script to runwebpack-dev-server
webpack.config.js
: configuration file for bundling your JS with webpackcrate/src/lib.rs
: your Rust crate code!
Your Rust Crate
The scaffolded project includes an example Rust WebAssembly webpack crate.
Inside the crate/src/lib.rs
file we see a run
function that's callable from our JS file:
# #![allow(unused_variables)] #fn main() { // Called by our JS entry point to run the example. #[wasm_bindgen] pub fn run() -> Result<(), JsValue> { set_panic_hook(); // ... let p: web_sys::Node = document.create_element("p")?.into(); p.set_text_content(Some("Hello from Rust, WebAssembly, and Webpack!")); // ... Ok(()) } #}
Now, open up the js/index.js
file. We see our Rust-generated wasm run
function being
called inside our JS file.
import("../crate/pkg").then(module => {
module.run();
});
Run The Project
To generate our Rust-compiled to wasm code, in the root directory we run:
npm run build
This will create our bundled JavaScript module in a new directory dist
.
We should be ready to run our project now! In the root directory, we'll run:
npm start
Then in a web browser navigate to http://localhost:8080
and you should be greeted
with text in the body of the page that says "Hello from Rust, WebAssembly, and Webpack!"
If you did congrats! You've successfully used the rust-webpack template!