# Quickstart Our first example is a counter that can be incremented or decremented. The complete code is found [here](https://github.com/ivanceras/sauron/tree/master/examples/counter) I assume you already installed rust and cargo binaries already. If not, then you can install by issuing the following command from your terminal. ```sh curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh ``` To create a rust project with sub code in it. Issue the command: ```sh cargo new --lib counter ``` This will create a library crate with `counter` as the package name. Edit the `Cargo.toml` file to set the library crate-type to `cdylib`[^0]. ```toml [package] name = "counter" version = "0.1.0" authors = ["Your name "] edition = "2018" [lib] crate-type = ["cdylib"] [dependencies] sauron = "0.32" ``` We also need to add `sauron` as a dependecy of the project. Add this code to `src/lib.rs` `src/lib.rs` ```rust use sauron::html::text; use sauron::prelude::*; use sauron::{node, Cmd, Component, Node, Program}; #[derive(Debug)] pub enum Msg { Increment, Decrement, } pub struct App { count: i32, } impl App { pub fn new() -> Self { App { count: 0 } } } impl Component for App { fn view(&self) -> Node { node! {
{text(self.count)}
} } fn update(&mut self, msg: Msg) -> Cmd { match msg { Msg::Increment => self.count += 1, Msg::Decrement => self.count -= 1, } Cmd::none() } } #[wasm_bindgen(start)] pub fn main() { Program::mount_to_body(App::new()); } ``` And finally our `index.html` file ```html Counter ``` This is the minimal set of files in order to compile and run our project as a web application. Next, we need to install [`wasm-pack`](https://crates.io/crates/wasm-pack), to simplify our workflow of our project to compile to webassembly. ```sh cargo install wasm-pack ``` Invoking the command: ```sh wasm-pack build --release --target=web ``` `wasm-pack` adds arguments to the rust compiler to compile our code into webassembly and link it to a javascript module. All of this is abstracted with `wasm-pack`, so we don't have to think about it. We only care about our js file `./pkg/counter.js` that is generated in `pkg` directory in our project folder. Next, we need to statically serve the `index.html` such that the browser can run the `.wasm`[^wasm] binary in the browser [^0]: use `cdylib` for crate-type if you want to build it as wasm entry point crate. If you also want this crate as a reusable component from your other crate, then you can add `rlib` as crate-type. ```toml [lib] crate-type = ["cdylib", "rlib"] ``` [^wasm]: `wasm` files can not be executed in the browser unless serve from the same domain as the `index.html` which reference it.