1 # eframe template 2 3 [![dependency status](https://deps.rs/repo/github/emilk/eframe_template/status.svg)](https://deps.rs/repo/github/emilk/eframe_template) 4 [![Build Status](https://github.com/emilk/eframe_template/workflows/CI/badge.svg)](https://github.com/emilk/eframe_template/actions?workflow=CI) 5 6 This is a template repo for [eframe](https://github.com/emilk/egui/tree/master/crates/eframe), a framework for writing apps using [egui](https://github.com/emilk/egui/). 7 8 The goal is for this to be the simplest way to get started writing a GUI app in Rust. 9 10 You can compile your app natively or for the web, and share it using Github Pages. 11 12 ## Getting started 13 14 Start by clicking "Use this template" at https://github.com/emilk/eframe_template/ or follow [these instructions](https://docs.github.com/en/free-pro-team@latest/github/creating-cloning-and-archiving-repositories/creating-a-repository-from-a-template). 15 16 Change the name of the crate: Chose a good name for your project, and change the name to it in: 17 * `Cargo.toml` 18 * Change the `package.name` from `eframe_template` to `your_crate`. 19 * Change the `package.authors` 20 * `main.rs` 21 * Change `eframe_template::TemplateApp` to `your_crate::TemplateApp` 22 * `index.html` 23 * Change the `<title>eframe template</title>` to `<title>your_crate</title>`. optional. 24 * `assets/sw.js` 25 * Change the `'./eframe_template.js'` to `./your_crate.js` (in `filesToCache` array) 26 * Change the `'./eframe_template_bg.wasm'` to `./your_crate_bg.wasm` (in `filesToCache` array) 27 28 ### Learning about egui 29 30 `src/app.rs` contains a simple example app. This is just to give some inspiration - most of it can be removed if you like. 31 32 The official egui docs are at <https://docs.rs/egui>. If you prefer watching a video introduction, check out <https://www.youtube.com/watch?v=NtUkr_z7l84>. For inspiration, check out the [the egui web demo](https://emilk.github.io/egui/index.html) and follow the links in it to its source code. 33 34 ### Testing locally 35 36 Make sure you are using the latest version of stable rust by running `rustup update`. 37 38 `cargo run --release` 39 40 On Linux you need to first run: 41 42 `sudo apt-get install libxcb-render0-dev libxcb-shape0-dev libxcb-xfixes0-dev libspeechd-dev libxkbcommon-dev libssl-dev` 43 44 On Fedora Rawhide you need to run: 45 46 `dnf install clang clang-devel clang-tools-extra speech-dispatcher-devel libxkbcommon-devel pkg-config openssl-devel libxcb-devel fontconfig-devel` 47 48 ### Web Locally 49 50 You can compile your app to [WASM](https://en.wikipedia.org/wiki/WebAssembly) and publish it as a web page. 51 52 We use [Trunk](https://trunkrs.dev/) to build for web target. 53 1. Install Trunk with `cargo install --locked trunk`. 54 2. Run `trunk serve` to build and serve on `http://127.0.0.1:8080`. Trunk will rebuild automatically if you edit the project. 55 3. Open `http://127.0.0.1:8080/index.html#dev` in a browser. See the warning below. 56 57 > `assets/sw.js` script will try to cache our app, and loads the cached version when it cannot connect to server allowing your app to work offline (like PWA). 58 > appending `#dev` to `index.html` will skip this caching, allowing us to load the latest builds during development. 59 60 ### Web Deploy 61 1. Just run `trunk build --release`. 62 2. It will generate a `dist` directory as a "static html" website 63 3. Upload the `dist` directory to any of the numerous free hosting websites including [GitHub Pages](https://docs.github.com/en/free-pro-team@latest/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site). 64 4. we already provide a workflow that auto-deploys our app to GitHub pages if you enable it. 65 > To enable Github Pages, you need to go to Repository -> Settings -> Pages -> Source -> set to `gh-pages` branch and `/` (root). 66 > 67 > If `gh-pages` is not available in `Source`, just create and push a branch called `gh-pages` and it should be available. 68 69 You can test the template app at <https://emilk.github.io/eframe_template/>. 70 71 ## Updating egui 72 73 As of 2022, egui is in active development with frequent releases with breaking changes. [eframe_template](https://github.com/emilk/eframe_template/) will be updated in lock-step to always use the latest version of egui. 74 75 When updating `egui` and `eframe` it is recommended you do so one version at the time, and read about the changes in [the egui changelog](https://github.com/emilk/egui/blob/master/CHANGELOG.md) and [eframe changelog](https://github.com/emilk/egui/blob/master/crates/eframe/CHANGELOG.md).