Random Hat

A web application written in rust to pick the next speaker for FASLIP.

Rust Frontend

Build a simple Rust frontend web application using Yew.

Tutorial https://www.youtube.com/watch?v=MddGbXgIt2E

Organisation

This repository contains these directories.

.
├── docs
├── src
├── Cargo.toml
├── index.html
├── LICENSE
├── README.md
├── styles.css
└── Trunk.toml

• docs contains the production build of the website.
• srcs contains the source files for the website.
• Cargo.toml contains the dependencies for the website.
• index.html loads the rust wasm file.
• LICENSE biolerplate MIT license.
• README.md this file.
• styles.css contains the css for the website.
• Trunk.toml contains config for the trunk utility.

Installation

Trunk is a crate that helps us build and package web applications.

$ cargo install trunk

Add web assembly as a compilation target to rust.

$ rustup target add wasm32-unknown-unknown

Create a package

$ cargo new my-app

Change directory

$ cd my-app

Serve

Run trunk serve to run the application on your local machine.

$ trunk serve

Note: the Trunk.toml file contains the configuration for the trunk utility.

Build

To quickly do all the stuff required to make a production build of the website, simply run:

make

Alternatively, you can build the application using trunk build and specify the --release tag. This generates the deployment ready files in the docs directory.

$ trunk build

Github Pages - 404 Error

This trick handles the 404 error for using Browser Routing when deploying to Github Pages.

Create React App docs:

You can use a trick to teach GitHub Pages to handle 404s by redirecting to your index.html page with a custom redirect parameter. You would need to add a 404.html file with the redirection code to the build folder before deploying your project, and you’ll need to add code handling the redirect parameter to index.html. You can find a detailed explanation of this technique in this guide.