Create a New Rust/Webpack Project using the rust-webpack Template

Share this video with your friends

Published 6 years ago

Updated 6 years ago

Previous to this lesson, we set up our own Rust/wasm project from scratch.

The Rust/wasm team ships a template for you to get started right away. In this lesson, you'll see how to initialize the template (assumes you have wasm-pack installed) and see how this template gives you additional custom Rust features in addition to the WasmPackPlugin that will build your library on every file change.

View code on GitHub

Instructor: [00:00] While we set up our own webpack project, for the sake of going through it step-by-step, the Rust WebAssembly team also ships a template. We start by creating a new directory, myApp. Inside it, we run npm init rust -webpack.

[00:18] This will copy the template into the current directory. Once that's done, we can run npm install to install our JavaScript dependencies. Be aware that this template relies on you having wasm-pack installed. In case you haven't done this, just run cargo install wasm-pack.

[00:37] Now, we've got everything set up, and start using npm start. If you visit localhost:8080, we can see hello from Rust, WebAssembly, and webpack.

[00:49] How is this different from our webpack setup? For once, in our Cargo.toml, this setup defines custom Rust features, console.error, panic hook, and we add log. In our entry file, these features also need to be configured.

[01:09] In addition, this setup ships with the wasm-pack webpack plugin that builds our library with wasm-pack on every file change. Let's change the greeting to verify that this works. As expected, you can see the updated output.

[01:28] In general, I recommend you do start off with this template, since it will always contain the recommended structure and features by the Rust WASM team.

Attila Szeremi

~ 6 years ago

When running npm start, I unfortunately get this:

wasm-pack error: Compiling your crate to WebAssembly
Caused by: Process exited with exit code: 101: `cargo build` did not exit successfully.

stdout:

stderr:

 Downloading crates ...
  Downloaded proc-macro2 v0.4.9
  Downloaded quote v0.6.4
  Downloaded version_check v0.1.4
  Downloaded log v0.4.3
  Downloaded syn v0.15.1
  Downloaded serde_derive v1.0.70
  Downloaded serde v1.0.70
  Downloaded serde_json v1.0.24
  Downloaded syn v0.14.5
  Downloaded itoa v0.4.2
   Compiling unicode-xid v0.1.0
   Compiling version_check v0.1.4
   Compiling serde v1.0.70
   Compiling wasm-bindgen-shared v0.2.25
   Compiling dtoa v0.4.3
   Compiling itoa v0.4.2
   Compiling cfg-if v0.1.5
   Compiling wasm-bindgen v0.2.25
   Compiling log v0.4.3
   Compiling proc-macro2 v0.4.9
   Compiling lazy_static v1.1.0
   Compiling quote v0.6.4
   Compiling syn v0.14.5
   Compiling syn v0.15.1
   Compiling serde_derive v1.0.70
   Compiling serde_json v1.0.24
   Compiling wasm-bindgen-backend v0.2.25
   Compiling wasm-bindgen-macro-support v0.2.25
error[E0277]: the trait bound `&mut syn::Field: quote::ToTokens` is not satisfied
   --> C:\Users\attila\.cargo\registry\src\github.com-1ecc6299db9ec823\wasm-bindgen-macro-support-0.2.25\src\parser.rs:376:44
    |
376 |                 assert_not_variadic(&opts, &field)?;
    |                                            -^^^^^
    |                                            |
    |                                            the trait `quote::ToTokens` is not implemented for `&mut syn::Field`
    |                                            help: consider removing 1 leading `&`-references
    |
    = help: the following implementations were found:
              <syn::Field as quote::ToTokens>
    = note: required for the cast to the object type `dyn quote::ToTokens`

error: aborting due to previous error

For more information about this error, try `rustc --explain E0277`.
error: Could not compile `wasm-bindgen-macro-support`.

To learn more, run the command again with --verbose.

I've created a Github issue for the rust webpack template in case the problem is on their end: https://github.com/rustwasm/rust-webpack-template/issues/57

Rodrigo Silva

~ 6 years ago

same here, Attilla

Attila Szeremi

~ 6 years ago

Alright, issue solved.

I suppose this is a risk of nightly Rust. In the Github issue they said:

rustup update nightly
cargo update
# cd into the `crate/` directory within the project
wasm-pack build

Then cd'ing back into the project directory and doing npm start now works :)

sundaycrafts

~ 6 years ago

Fixed it! Thank you!!

cbrevik

~ 6 years ago

npm init rust-webpack does nothing for me but initiate an "empty" project. I have wasm-pack installed, not really sure what I'm doing wrong.

cbrevik

~ 6 years ago

Of course, a silly mistake by me, the installed npm version did not support init templates. Had to update npm.

Nik Grafinstructor

~ 6 years ago

Glad you figured it out @cbrevik

~ 5 years ago

For anyone else getting an error on npm init rust-webpack, it may be this issue: https://github.com/rustwasm/rust-webpack-template/issues/148. I had to upgrade git, then it worked just fine.

Andrey Kolybelnikov

~ 5 years ago

The new version "@wasm-tool/wasm-pack-plugin": "^0.4.2" generate a different project structure with different code. This course needs either an update or a pointer to the fixed version of the template generator. Otherwise it's not possible to follow.

Markdown supported.

Become a member to join the discussionEnroll Today

Using WebAssembly with Rust

Create a New Rust/Webpack Project using the rust-webpack Template

Social Share Links