Yew: Beginner-level guide for using Yew with `wasm-pack` and `webpack`.

Created on 26 Apr 2020 · 5Comments · Source: yewstack/yew

Is your feature request related to a problem? Please describe.
The problem is that someone (like me) unfamiliar with web front-end tooling can't easily get started with Yew, especially while trying to follow the preferred way (webpack + wasm-pack instead of cargo-web).

Describe the solution you'd like
It would be nice to have a beginner-level guide, describing basics of Yew-only (I.e. for project starting with Yew from day 0) minimal set-up with webpack and wasm-pack, one stylesheet and one resource (Like image or favicon). It also would be nice to have minimal instructions for where and how to get webpack and how to use it. This may seem like it's out of scope of Yew documentation, but otherwise users like me will have to learn how webpack works (With JS and stuff) and then bridge this knowledge with knowledge of how to use Yew. This might be a long process, what is not good in my opinion.

Describe alternatives you've considered
Learn how to use webpack with JS? Don't mean to be rude, but no, thanks.

Additional context
None.

documentation

Source

L117

🎉1 👍1

Most helpful comment

Hey @L117 thanks for the issue! This is what we intend for https://github.com/yewstack/yew-wasm-pack-template but ultimately the yew docs should explain this very clearly.

jstarry on 26 Apr 2020

👍2 ❤1

All 5 comments

Hey @L117 thanks for the issue! This is what we intend for https://github.com/yewstack/yew-wasm-pack-template but ultimately the yew docs should explain this very clearly.

jstarry on 26 Apr 2020

👍2 ❤1

@jstarry I finally figured out what happens in that example. Actually it helped a lot to strip it down. Most confusing parts were (As Q/A for future viewers):

What is Netlify and is it required?
- No, it is not. The netlify directory can be safely removed.
How module structure is different from ordinary bin/lib crate?
- It's exactly the same as in any other lib crate, app.rs is just a sub-module.
What is yarn?
- It's a cargo (a dependency and build system) of JS folks.
Where do I get yarn?
- From repository of your distribution (For Linux).
Do I need npm as well?
- No, you don't. At least you don't have to install it manually, or interact with it in any manner.
What is webpack?
- It's a resource manager. It's job is to transform (or just copy) one resources into another (E.g. rust -> wasm, scss -> css)
Where do I get webpack?
- You don't need to, it's in the project's yarn dev dependencies and will be installed into project-local node_modules on build.
How does webpack work?
- Flawlessly so far (:
- Actually, I have no idea, and do not care much at this point.
Where do I put resources?
- static directory is the web root in that example, just drop some files there.

L117 on 26 Apr 2020

👍2

I also spent an entire day figuring out how to make Yew work with web-sys and wasm-pack.
The parts that were most confusing to me as a beginner (feel free to reuse them in a documentation):

there has to be a function in lib.rs that looks like:

#[wasm_bindgen(start)]
pub fn run_app() {
    yew::start_app::<Model>();
}

especially to make the examples work, I understand that they have to be able to compile with the stdweb too, so this cannot be in the sources, but at least some comment or a BIG note in docs should exist

wasm-pack build command needs --target web argument to generate a usable .js file

and the index.html needs to look like this:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Yew example</title>
        <script type="module">
            import init from "./wasm.js"
            init()
        </script>
    </head>
    <body></body>
</html>

Where the wasm.js should be replaced with whatever the name of the .js file in the pkg directory created by wasm-pack build is.

tommket on 27 Apr 2020

https://github.com/yewstack/yew/issues/1139#issuecomment-619594999 - This list is also very Documentation FAQ worthy.

tommket on 27 Apr 2020

Some more Q/A:

Is it possible to convert HTML &str into [VNode] (Aka [Html])? (Or anything else, what would render as normal HTML).
- Yes, it is! There is no single universal function to do this, though. [CRM Example] has more info, but this snippet is enough to get started:
  
```rust

use web_sys;

use web_sys::Node;

use yew::prelude::*;

use yew::virtual_dom::VNode;

/* Inside render function */
let div = {
    let div = web_sys::window()
        .unwrap()
        .document()
        .unwrap()
        .create_element("div") // It is not required to be "div".
        .unwrap();
    div.set_inner_html(&self.html_data);
    div
};
let node = Node::from(div);
let v_node = VNode::VRef(node);
v_node
```

Is it required for my components to own [ComponentLink<Self>][ComponentLink] with name link, [Callback]s, [services], etc?
- [ComponentLink<Self>][ComponentLink] is required. Anything else seems to obey ownership rules (E.g. if timer service gets dropped, it won't call bound callback anymore. If you won't mind such behavior - go ahead). But this will likely change soon.
I have cloned boilerplate repo, but RLS is not working, VSCode highlights Cargo.toml with error like Custom build command failed. What should I do?
- Upgrade yew to latest release. This did the trick for me.