fork of https://github.com/rustwasm/wasm-pack for the needs of NextGraph.org
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
2.7 KiB
85 lines
2.7 KiB
# 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.
|
|
|
|
[Webpack]: https://webpack.js.org/
|
|
|
|
## Scaffold a JavaScript Project
|
|
|
|
To generate a new Rust Webpack project, we've used the [`rust-webpack`] npm template.
|
|
|
|
[`rust-webpack`]: https://github.com/rustwasm/rust-webpack-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`: ignores `node_modules`
|
|
- `LICENSE-APACHE` and `LICENSE-MIT`: most Rust projects are licensed this way, so these are included for you
|
|
- `README.md`: the file you are reading now!
|
|
- `index.html`: a bare bones html document that includes the webpack bundle
|
|
- `js/index.js`: example JS file with a comment showing how to import and use a wasm pkg
|
|
- `package.json` and `package-lock.json`:
|
|
- pulls in devDependencies for using webpack:
|
|
- [`webpack`](https://www.npmjs.com/package/webpack)
|
|
- [`webpack-cli`](https://www.npmjs.com/package/webpack-cli)
|
|
- [`webpack-dev-server`](https://www.npmjs.com/package/webpack-dev-server)
|
|
- defines a `start` script to run `webpack-dev-server`
|
|
- `webpack.config.js`: configuration file for bundling your JS with webpack
|
|
- `crate/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:
|
|
```rust
|
|
// 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.
|
|
|
|
```js
|
|
import("../crate/pkg").then(module => {
|
|
module.run();
|
|
});
|
|
```
|
|
|
|
## Run The Project
|
|
|
|
To generate our Rust-compiled to wasm code, in the root directory we run:
|
|
```bash
|
|
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:
|
|
|
|
```bash
|
|
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!
|
|
|