The workflow for deployment work like this:
- Building the frontend using
trunk build --release
- Compressing assets using
gzip
andbrotli
- Adding a
_redirects
file to configure it as a single-page application
Building is done using Trunk. It uses Cargo under the hood to compile
the code for wasm32-unknown-unknown
, adds some glue code to launch it in the
browser and links the assets. Running this includes:
- Running
tailwindcss
to generate the Tailwind CSS styles. - Using wasm-bindgen to generate bindings for the WebAssembly binary for the browser.
- Using wasm-opt to optimize the resulting WebAssembly binary.
- Including the assets and hashing them for Sub-Resource Integrity and cache busting
- Minifying the assets
Deployment is done using GitLab CI. The
configuration runs Trunk, and uses gzip
and brotli
to
pre-compress the files. Using compression makes the resulting WebAssembly blob
and assets significantly smaller, at the time of writing, it makes it go from
3MB to 1MB. This step consists of:
Hosting of the project is provided by GitLab Pages. The
resulting files of the building and compression are statically hosted by it.
GitLab Pages will serve the precompressed files if the request indicates that
the client supports it. A _redirects
file is used to tell it to serve the
index.html
file for every route, to make it work as a single-page
application.