yew-scaffold - skeleton project for building web assembly applications in rust, using the Yew framework.
This template integrates the following rust projects:
wasmbl- wasm build tool that extends wasm builds with bundled assets, custom build specs, etc..ybc- a implementation of bulma components for yewwarp- web server framework
click the 'use this template' button or clone the repository
git clone https://github.com/justenb/yew-wasmbl-bulma-scaffoldinstall cargo-make
cargo install --force cargo-makeproject structure
.
├── frontend # Yew components
├── backend # Warp server and wasm bundler
├── common # Workspace shared libs
├── run # Custom CLI commands
├── Dockerfile # Compile targets in a container
├── index.html #
├── Makefile.toml # Build tasks
Starting the dev server
cargo make serve
#( will reload if any changes are made to the frontend )
# default listener is 4000
# use cargo make --env DOCKER_ID="${your_docker_id}" serve
# change default bind port.root component - frontend/src/app.rs
// frontend/src/containers/base.rs
fn view(&self) -> Html {
html! {
<>
{ BaseContainer::view_nav() }
{self.props.children.clone()}
{ BaseContainer::view_footer() }
</>
}
}containers - parent components that will persist route changes
// frontend/src/containers/base.rs
fn view(&self) -> Html {
html! {
<>
{ BaseContainer::view_nav() }
{self.props.children.clone()}
{ BaseContainer::view_footer() }
</>
}
}pages - yew router targets
// frontend/src/app.rs
match switch {
AppRouter::RootPath => html!{
<pages::home::HomePage/>
},
...
}mounting the app
#[wasm_bindgen(start)]
pub fn start_app() {
let div = document().query_selector("#app").unwrap().unwrap();
App::<app::App>::new().mount(div);
}<!DOCTYPE html>
<html lang="en">
<head>
<base href="{{ base_url }}">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{{ stylesheet | safe }}
<title>Yew + Bulma Scaffold</title>
</head>
<body>
<div id="app"></div>
{{ javascript | safe }}
</body>
</html>compile for local target
cargo make buildbuild project as a docker image
cargo make --env SERVE_PORT="${expose_port}" publish-docker
# SERVE_PORT defaults to 4000-
compiles the project in a build container
-
copies the target/release/{build-bin, build/} files from the build to an a alpine container, the current template's final container artifact is < 12MB
cargo make --env DOCKER_ID="${your_docker_id}" publish-dockerrelease and push your build as a docker image to your configured container registry ( this task assumes docker is installed and a valid docker config is set )
- add more router templates
- add examples of integrating component state
- add callback examples
- suggestions?
I am learning rust and wasm as I go, so please share and contribute! 🎉
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent