Skip to content
Elm JavaScript Rust HTML
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Initial commit Mar 23, 2020
tests Initial commit Mar 23, 2020
www
.appveyor.yml
.cargo-ok Initial commit Mar 23, 2020
.gitignore Initial commit Mar 23, 2020
.travis.yml Initial commit Mar 23, 2020
Cargo.toml Initial commit Mar 23, 2020
LICENSE_APACHE Initial commit Mar 23, 2020
LICENSE_MIT Initial commit Mar 23, 2020
README.md Initial commit Mar 23, 2020

README.md

elm-rust-template

A convenient template for combining Elm and Rust in the front end.

Set up

The Rust Toolchain

You will need the standard Rust toolchain, including rustup, rustc, and cargo.

Follow these instructions to install the Rust toolchain.

wasm-pack

wasm-pack is your one-stop shop for building, testing, and publishing Rust-generated WebAssembly.

Get wasm-pack here!

cargo-generate

cargo-generate helps you get up and running quickly with a new Rust project by leveraging a pre-existing git repository as a template.

Install cargo-generate with this command:

cargo install cargo-generate

cargo-watch

cargo-watch allows you to watch for code changes in Rust.

Install cargo-watch with this command:

cargo install cargo-watch

npm

npm is a package manager for JavaScript. We will use it to install and run a JavaScript bundler and development server. At the end of the tutorial, we will publish our compiled .wasm to the npm registry.

Follow these instructions to install npm.

If you already have npm installed, make sure it is up to date with this command:

npm install npm@latest -g

Usage

Clone this template

cargo generate --git https://github.com/AlienKevin/elm-rust-template

This should prompt you for the new project's name.

Build Rust into WebAssembly

In the project root:

cargo watch -i .gitignore -i "pkg/*" -s "wasm-pack build"

This should continuously watch for Rust code changes and compile the new version into WebAssembly.

Install web dependencies

Open another terminal and navigate to the www directory:

cd www

Then install all npm dependencies:

npm install

Serve locally for development

In the www directory.

Watch for Elm file changes:

npm run watch

Open another terminal, navigate to www

cd www

and spin up a dev server using webpack:

npm run start

Navigate your Web browser to http://localhost:8080/ and you should see the default page.

All new changes will be automatically reflected on http://localhost:8080/.

Deploy for a new release

In the root directory.

Create an optimized release build from Rust to WebAssembly.

wasm-pack build --release

In the www directory.

Bundle, optimize, and minimize all JavaScript and Elm for smaller asset size and faster speed.

npm run build

Now you should see a dist folder within www similar to this:

www
├── ...
├── dist
    ├── 0.bootstrap.js
    ├── 1.bootstrap.js
    ├── 27911fde1b082c3d4.module.wasm
    ├── bootstrap.js
    ├── index.html
├── ...

Publish to Github Pages

Follow all the previous steps outlined in deployment instructions. Then push the www/dist folder to the gh-pages branch on GitHub.

git subtree push --prefix www/dist origin gh-pages

Examples using elm-rust-template

Hack Assembler: An assembler for the Hack assembly language

Credits

Template and README adapted from The Rust and Wasm Book. Github Pages deployment instruction from gh-pages-deploy

License

MIT

You can’t perform that action at this time.