🦀 leptrun

My personal CSR Website template leveraging Leptos, Trunk and Tailwind.

Setup

Compiling to WebAssembly

To be able to compile the code for WebAssembly, run:

rustup target add wasm32-unknown-unknown

Trunk

Install Trunk using cargo:

cargo install trunk

Tailwind (standalone CLI)

Get the latest release and give it executable permissions:

curl -LO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64
chmod +x tailwindcss-linux-x64
mv tailwindcss-linux-x64 tailwindcss

The tailwind.config.js file can be generated by running:

./tailwindcss init

Update it to include Rust files, like this:

  content: { 
    files: ["*.html", "./src/**/*.rs"],
  },

Assets

Create new public directory for storing favicon.ico

mkdir public

Note: to store any additional public files, besides the ones included in the index.html head, you can use the public/aux directory.

Makefile

Install cargo-make:

sudo pacman -S cargo-make

VS Code

Add the following to settings.json file:

  "emmet.includeLanguages": {
    "rust": "html",
    "*.rs": "html"
  },
  "tailwindCSS.includeLanguages": {
      "rust": "html",
      "*.rs": "html"
  },
  "files.associations": {
      "*.rs": "rust"
  },
  "editor.quickSuggestions": {
    "other": "on",
    "comments": "on",
    "strings": true
  },
  "css.validate": false,

Project Name

Make sure to update all files to match the new project name. This includes:

Cargo.toml package name

[package]
name = "leptrun"

Makefile.toml build-release task

[tasks.build-release]
command = "trunk"
args = ["build", "--config", "Release.toml", "--public-url", "/leptrun/"]

index.html title element

<title>leptrun</title>

Usage

Simply leverage the tasks available in the Makefile.toml.

Development

cargo make run-dev

Release

cargo make run-release

Updating gh-pages branch

cargo make update-pages