Getting Yew to work with Rust on ‘Bash on Ubuntu on Windows’ in Windows 10

“Sun rays shining through trees in a foggy forest.” by Filip Varga on Unsplash

Purpose

Yew is a new web framework written in Rust that takes concepts from React JS and Elm. It takes the two web libraries I love and combines them with the new language I love — Rust. I wrote this article because I haven’t found a lot of documentation online on how to get the Yew examples running, and I’m sure there will be people that will run into the same problems I did. I wrote this in hopes that it helps someone out there.

Here is the big kicker. Make sure you have the Ubuntu 16.04 LTS installed! You can check by opening Bash on Ubuntu on Windows and typing:

lsb_release -a

You should see:

No LSB modules are available.
Distributor ID: Ubuntu
Description: Ubuntu 16.04.2 LTS
Release: 16.04
Codename: xenial

If you don’t have Ubuntu 16.04 installed, then open a Windows command prompt and type:

lxrun /uninstall
lxrun /install

This will uninstall whatever version you currently have, and will download and install Ubuntu 16.04 LTS. Hooray!

Now re-open Bash on Ubuntu on Windows and then install Rustup and Rust:

curl https://sh.rustup.rs -sSf | sh
source $HOME/.cargo/env
rustup target add wasm32-unknown-emscripten

Install Oracle Java 8 and clang:

sudo add-apt-repository ppa:webupd8team/java
sudo apt-get update
sudo apt-get install oracle-java8-installer clang

Install Emscripten (taken from Emscripten’s official site):

# Get the emsdk repo
git clone https://github.com/juj/emsdk.git

# Enter that directory
cd emsdk
# Fetch the latest registry of available tools.
./emsdk update

# Download and install the latest SDK tools.
./emsdk install latest

# Make the "latest" SDK "active" for the current user. (writes ~/.emscripten file)
./emsdk activate latest

# Activate PATH and other environment variables in the current terminal
source ./emsdk_env.sh

Verify your Emscripten installation:

$ emcc -v
WARNING:root:(Emscripten: system change: 1.37.36|/mnt/d/apps/emsdk/clang/e1.37.36_64bit|5.0 vs 1.37.27|/mnt/d/apps/emsdk/clang/e1.37.36_64bit|5.0, clearing cache)
INFO:root:(Emscripten: Running sanity checks)
emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 1.37.36
clang version 5.0.0 (emscripten 1.37.36 : 1.37.36)
Target: x86_64-unknown-linux-gnu
Thread model: posix
InstalledDir: /mnt/d/apps/emsdk/clang/e1.37.36_64bit
Found candidate GCC installation: /usr/lib/gcc/x86_64-linux-gnu/5
Found candidate GCC installation: /usr/lib/gcc/x86_64-linux-gnu/5.4.0
Found candidate GCC installation: /usr/lib/gcc/x86_64-linux-gnu/6
Found candidate GCC installation: /usr/lib/gcc/x86_64-linux-gnu/6.0.0
INFO:root:(Emscripten: Running sanity checks)

Install cargo web:

$ cargo install cargo-web --force

Clone the Yew repo from the good ol’ Github:

git clone git@github.com:DenisKolodin/yew.git

Navigate to one of the examples you’d like to run, and then execute:

$ cargo build --target=wasm32-unknown-emscripten

If anyone has issues with these instructions, I can try to help, but I don’t want to turn this into a “Stack Overflow”-overflow…