Kickstart your Yew, Yew-Router, WebAssembly, and Parcel project!
This template comes pre-configured with all the boilerplate for compiling Yew framework and Yew Router to WebAssembly and hooking into a Parcel build pipeline.
npm start
-- Serve the project locally for
development at http://localhost:1234
by default.
npm run build
-- Serve the project in production mode (gzip compression and high level wasm optimization)
cargo install wasm-pack
npm init yew-parcel my-app
npm install
You will want to change the name of your crate however also you need to change the import js file name that generate the wasm pack in the index.html with the new name of your crate
<script type="module">
import init, { run } from './name_of_your_crate.js';
const start = async() => {
await init('./name_of_your_crate_bg.wasm');
run();
};
start();
</script>
You maybe want that parcel watch more than everything call by index.html
, and the src
and Cargo.toml
of the crate, you need to add the path in the watcher of wasm-builder
:
chokidar.watch(['./crate/src', './crate/Cargo.toml', './crate/your_new_path_to_watch']).on('change', async (event, path) => {
console.log(`there are new changes in '${path}'. Start to rebuild rustwasm sources`);
bundler.bundle();
bundler.hmr.broadcast({
type: 'reload'
});
});
You can also change the address of the parcel server adding a .env file with the next setting:
SERVER_ADDRESS=[YOUR_ADDRESS]:[YOUR_PORT]
In case that you want to customize the wasm-pack build you will find it in wasm_pack_cmd
sh. For powerShell you will need to write your own script
and change the name of execution file in wasm-builder.js
:
bundler.on('buildStart', () => {
const prevtBuildFile = Path.join(__dirname, './your_script.ps1');
console.log(`running: ${prevtBuildFile}`);
execSync(`${prevtBuildFile} ${buildType === 'production' ? '' : '--dev'}`, {stdio: 'inherit'});
});
For static files you need to include in the package.json
:
"staticFiles": {
"staticPath": ["./crate/pkg", "./crate/your_static_folder"],
"watcherGlob": false
}
The static directory has to be included in some subfolder, not in the root path or it will be ignored. The bundle move the content of the directory
into the dist
not the directory itself
If the server is closed while pages are still serving and after it is running again, the browser will not synchronize again with the server until you refresh the pages manually.
If you like Yew Parcel Template, help us supporting the project:
web_sys
, change the feature of yew
and yew_router
to std_web
in cargo.toml file and remove in your cargo config file:[build]
target="wasm32-unknown-unknown"
Yew Parcel Template is MIT licensed. See license