Wasm-pack: yew framework: I think i want to run `wasm-pack` from `build.rs`

[Bernd-L]

I think i want to run web-pack from build.rs.
I have a workspace of multiple crates. The WebAssembly generating crate is just one of them.
I'd like to have one command to build everything, ideally cargo build.

Any advice on how to call wasm-pack build --target web in the one crate from the workspace's cargo build?

_Originally posted by @kud1ing in https://github.com/rustwasm/wasm-pack/issues/251#issuecomment-520207166_

Using Yew

I'm using the yew framework, and I'm working inside of a Rust workspace. Since the backend/ folder contains a bin crate for the backend server, and the frontend/ folder contains a yew project (which needs wasm-pack build --target web --out-name wasm --out-dir ../target/static or something like that to be run to compile to webassembly), I'd like to be able to do so in an automated fashion (ideally using cargo build in the root of the repo).

How should this be achieved?
If possible, integration with VS Code tasks is also desired.

Thanks for reading :hugs:

[TheNeikos]

Heya! So I was thinking about this issue and got it working with this simple setup:

use std::env;
use std::path::Path;
use std::process::Command;

fn main() {
    println!("cargo:rerun-if-changed=client/");
    let out_dir = env::var_os("OUT_DIR").unwrap();
    let dest_path = Path::new(&out_dir).join("web-client");
    let output = Command::new("wasm-pack")
        .args(&[
            "build",
            "--target",
            "web",
            "--out-name",
            "client",
            "--out-dir",
        ])
        .arg(&dest_path)
        .arg("./client/")
        .output()
        .expect("To build wasm files successfully");

    if !output.status.success() {
        panic!(
            "Error while compiling:\n{}",
            String::from_utf8_lossy(&output.stdout)
        );
    }

    let js_file = dest_path.join("client.js");
    let wasm_file = dest_path.join("client_bg.wasm");

    for file in &[&js_file, &wasm_file] {
        let file = std::fs::metadata(file).expect("file to exist");
        assert!(file.is_file());
    }

    println!("cargo:rustc-env=PROJECT_NAME_JS={}", js_file.display());
    println!(
        "cargo:rustc-env=PROJECT_NAME_WASM={}",
        wasm_file.display()
    );
}

This puts the filepaths into those env variables, which can then be used in an include! or whatever you wish to do with them.

I do think this is just a temporary and somewhat hacky way to do it

[cecton]

Hey o/ I just found this issue and I might have a good news for you.

I'm building a tooling library that is more or less like wasm-pack but more customizable and instead of being an external binary it replaces cargo run (cargo build cannot be tweaked). More details on this tweet.

I'm not entirely sure but I think it would be useful for you. Let me know if you have any suggestion/question.

[cecton]

Finally released something! \o/ Give it a look and let me know if it covers/help your use case :) Otherwise I would be interested to know more to see if I can help. Check the "backend-and-frontend" example.

https://github.com/IMI-eRnD-Be/wasm-run

(More detail when I announced it here)