Use Trunk to build and deploy the web app (#69)

.github/workflows/pages.yml

@@ -0,0 +1,45 @@
+name: Github Pages
+
+# By default, runs if you push to master. keeps your deployed app in sync with master branch. 
+on:
+  push:
+    branches:
+      - master
+# to only run when you do a new github release, comment out above part and uncomment the below trigger.
+# on: 
+#   release:
+#     types:
+#       - published
+
+permissions:
+  contents: write # for committing to gh-pages branch.
+
+jobs:
+  build-github-pages:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2 # repo checkout
+      - uses: actions-rs/toolchain@v1 # get rust toolchain for wasm
+        with:
+          profile: minimal
+          toolchain: stable
+          target: wasm32-unknown-unknown
+          override: true
+      - name: Rust Cache # cache the rust build artefacts
+        uses: Swatinem/rust-cache@v1
+      - name: Downlaod and Install Trunk binary
+        run: wget -qO- https://github.com/thedodd/trunk/releases/latest/download/trunk-x86_64-unknown-linux-gnu.tar.gz | tar -xzf-
+      - name: Build # build
+        # "${GITHUB_REPOSITORY#*/}" evaluates into the name of the repository
+        # using --public-url something will allow trunk to modify all the href paths like from favicon.ico to repo_name/favicon.ico .
+        # this is necessary for github pages where the site is deployed to username.github.io/repo_name and all files must be requested
+        # relatively as eframe_template/favicon.ico. if we skip public-url option, the href paths will instead request username.github.io/favicon.ico which
+        # will obviously return error 404 not found.
+        run: ./trunk build --release --public-url "${GITHUB_REPOSITORY#*/}" 
+      - name: Deploy
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          folder: dist
+          # this option will not maintain any history of your previous pages deployment
+          # set to false if you want all page build to be committed to your gh-pages branch history
+          single-commit: true

.github/workflows/rust.yml

@@ -33,8 +33,8 @@ jobs:
         with:
           profile: minimal
           toolchain: stable
+          target: wasm32-unknown-unknown
           override: true
-      - run: rustup target add wasm32-unknown-unknown
       - uses: actions-rs/cargo@v1
         with:
           command: check
@@ -66,7 +66,7 @@ jobs:
           profile: minimal
           toolchain: stable
           override: true
-      - run: rustup component add rustfmt
+          components: rustfmt
       - uses: actions-rs/cargo@v1
         with:
           command: fmt
@@ -82,22 +82,24 @@ jobs:
           profile: minimal
           toolchain: stable
           override: true
-      - run: rustup component add clippy
+          components: clippy
       - uses: actions-rs/cargo@v1
         with:
           command: clippy
           args: -- -D warnings
 
-  wasm_bindgen:
-    name: wasm-bindgen
+  trunk:
+    name: trunk
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
       - uses: actions-rs/toolchain@v1
         with:
           profile: minimal
           toolchain: 1.61.0
+          target: wasm32-unknown-unknown
           override: true
-      - run: rustup target add wasm32-unknown-unknown
-      - run: ./setup_web.sh
-      - run: ./wasm_bindgen_check.sh
+      - name: Downlaod and Install Trunk binary
+        run: wget -qO- https://github.com/thedodd/trunk/releases/latest/download/trunk-x86_64-unknown-linux-gnu.tar.gz | tar -xzf-
+      - name: Build 
+        run: ./trunk build  

.gitignore

@@ -1 +1,2 @@
 /target
+/dist

Cargo.toml

@@ -1,20 +1,12 @@
 [package]
 name = "eframe_template"
-default-run = "eframe_template_bin"
 version = "0.1.0"
 authors = ["Emil Ernerfeldt <[email protected]>"]
 edition = "2021"
 rust-version = "1.60"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
-[[bin]]
-name = "eframe_template_bin"
-path = "src/main.rs"
-
-[lib]
-crate-type = ["cdylib", "rlib"]
-
 
 [dependencies]
 egui = "0.18.0"

README.md

@@ -15,20 +15,15 @@ Start by clicking "Use this template" at https://github.com/emilk/eframe_templat
 
 Change the name of the crate: Chose a good name for your project, and change the name to it in:
 * `Cargo.toml`
-    * Change the `package.name` from `eframe_template` to `your_crate`
+    * Change the `package.name` from `eframe_template` to `your_crate`.
     * Change the `package.authors`
-    * Change the `package.default-run` from `eframe_template_bin` to `your_crate_bin` (note the `_bin`!)
-    * Change the `bin.name` from `eframe_template_bin` to `your_crate_bin` (note the `_bin`!)
 * `main.rs`
     * Change `eframe_template::TemplateApp` to `your_crate::TemplateApp`
-* `docs/index.html`
-    * Change the `<title>`
-    * Change the `<script src=…` line from `eframe_template.js` to `your_crate.js`
-    * Change the `wasm_bindgen(…` line from `eframe_template_bg.wasm` to `your_crate_bg.wasm` (note the `_bg`!)
-* `docs/sw.js`
-    * Change the `'./eframe_template.js'` to `./your_crate.js` (in `filesToCache` array)
-    * Change the `'./eframe_template_bg.wasm'` to `./your_crate_bg.wasm` (in `filesToCache` array)
-* Remove the web build of the old name: `rm docs/eframe_template*`
+* `index.html`
+    * Chage the `<title>eframe template</title>` to `<title>your_crate</title>`. optional.
+* `assets/sw.js`
+  * Change the `'./eframe_template.js'` to `./your_crate.js` (in `filesToCache` array)
+  * Change the `'./eframe_template_bg.wasm'` to `./your_crate_bg.wasm` (in `filesToCache` array)
 
 ### Learning about egui
 
@@ -50,38 +45,29 @@ On Fedora Rawhide you need to run:
 
 `dnf install clang clang-devel clang-tools-extra speech-dispatcher-devel libxkbcommon-devel pkg-config openssl-devel libxcb-devel`
 
-For running the `build_web.sh` script you also need to install `jq` and `binaryen` with your packet manager of choice.
+### Web Locally
 
-### Compiling for the web
+You can compile your app to [WASM](https://en.wikipedia.org/wiki/WebAssembly) and publish it as a web page. 
 
-Install [jq](https://stedolan.github.io/jq/download/).
+We use [Trunk](https://trunkrs.dev/) to build for web target.
+1. Install Trunk with `cargo install --locked trunk`. 
+2. run `trunk serve` to build and serve on `http://127.0.0.1:8080`. will rebuild automatically if you edit the project. 
+3. open `http://127.0.0.1:8080/index.html#dev` in a browser. see the warning below.
 
-Make sure you are using the latest version of stable rust by running `rustup update`.
-
-You can compile your app to [WASM](https://en.wikipedia.org/wiki/WebAssembly) and publish it as a web page. For this you need to set up some tools. There are a few simple scripts that help you with this:
-
-```sh
-./setup_web.sh
-./start_server.sh
-./build_web.sh --optimize --open
-```
-
-* `setup_web.sh` installs the tools required to build for web
-* `start_server.sh` starts a local HTTP server so you can test before you publish
-* `build_web.sh` compiles your code to WASM and puts it in the `docs/` folder (see below) and `--open` opens the result in your default browser.
+> `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).
+> appending `#dev` to `index.html` will skip this caching, allowing us to load the latest builds during development.
 
-The finished web app is found in the `docs/` folder (this is so that you can easily share it with [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)). It consists of three files:
-
-* `index.html`: A few lines of HTML, CSS and JS that loads your app. **You need to edit this** (once) to replace `eframe_template` with the name of your crate!
-* `your_crate_bg.wasm`: What the Rust code compiles to.
-* `your_crate.js`: Auto-generated binding between Rust and JS.
+### Web Deploy
+1. Just run `trunk build --release`.
+2. It will generate a `dist` directory as a "static html" website
+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).
+4. we already provide a workflow that auto-deploys our app to github pages if you enable it. 
+> To enable Github Pages, you need to go to Respository -> Settings -> Pages -> Source -> set to `gh-pages` branch and `/` (root). 
+> 
+> If `gh-pages` is not availabe in `Source`, just create and push a branch called `gh-pages` and it should be available. 
 
 You can test the template app at <https://emilk.github.io/eframe_template/>.
 
-### Web testing/development
-
-Open `index.html#dev` to disable caching, which makes development easier.
-
 ## Updating egui
 
 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.

Trunk.toml

@@ -0,0 +1,2 @@
+[build]
+filehash = false

assets/manifest.json

@@ -0,0 +1,28 @@
+{
+  "name": "Egui Template PWA",
+  "short_name": "egui-template-pwa",
+  "icons": [
+    {
+      "src": "./icon-256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "./maskable_icon_x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "./icon-1024.png",
+      "sizes": "1024x1024",
+      "type": "image/png"
+    }
+  ],
+  "lang": "en-US",
+  "id": "/index.html",
+  "start_url": "./index.html",
+  "display": "standalone",
+  "background_color": "white",
+  "theme_color": "white"
+}

docs/sw.js → assets/sw.js

@@ -22,4 +22,4 @@ self.addEventListener('fetch', function (e) {
       return response || fetch(e.request);
     })
   );
-});
+});