Build a WebAssembly App with Rust – InApps 2022

In this tutorial, we’re going to combine the power of WebAssembly and the flexibility of Rust programming language to build a very simple “Hello, World!” app.

One of the reasons why we’re going to use Rust is because the developers have an outstanding job of adding WebAssembly support to the language. And because Rust is slowly becoming the go-to language for web application developers, it makes perfect sense to combine these two into a power-house combination.

This time around, what we’re going to do is create a very simple web application using Rust and serve it up with the help of WebAssembly and Python. I’ll be demonstrating on Ubuntu Desktop 20.04, so if you use a different platform for your development needs, you’ll have to alter the process (specifically the installation steps) in order to make it work.

With that said, let’s get on with the howto!

Install Necessary Dependencies

There are several dependencies we’re going to have to install to make this magic happen.

The first thing to do is install the necessary compilers and other build tools with the command:

sudo apt-get install build-essential -y

Once that installation completes, install Python:

sudo apt-get install python3 -y

Our next task is to install Rust, which can be done with the rustup script like so:

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

Once Rust is installed, source the environment variables with the command:

source $HOME/.cargo/env

Next, we need to install the wasm-pack tool (used for assembling and packaging Rust crates for WebAssembly). This is done with the command:

curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

Creating your first WASM/Rust package

Now that we have everything up and ready to go, we can build our first package. Let’s call this package hello-newstack and create it with:

wasm-pack new hello-newstack

When this successfully completes, you should see printed out:

Generated new project at /hello-newstack

Change into the newly created directory with the command:

cd hello-newstack

We’ll now build the web target with:

wasm-pack build --target web

You should see output like:

Now we’re going to create an index HTML page, create this new file with:

nano index.html

In that file, paste the following:

Save and close the new file.

Now we need to run the Python HTTP server to serve up our new web application. Since we’re using Python3, that command is:

python3 -m http.server 8000

With the Python server up and running open a web browser on that same machine and point it to http://localhost:8000. You could also point any web browser on your network to http://HOST:8000 (Where HOST is the IP address of the hosting machine).

You should see a popup that says, “Hello, hello-newstack!” (Figure 1).

Click OK to close the app.

Using Cargo with WebAssembly

Let’s try a different approach, this time with Cargo. First, make sure to follow the installation steps above and then install libssl-dev with:

sudo apt-get install libssl-dev -y

With that dependency out of the way, install cargo-generate with:

cargo install cargo-generate

The above command will take some time to complete. Once it does, generate your first project with:

cargo generate --git https://github.com/rustwasm/wasm-pack-template

You’ll be prompted for a project name, at which point just type “hello.”

Now, run the command:

wasm-pack build

This will build everything for our web application, so we can now generate the web app with:

npm init wasm-app www

Change into the www directory with the command:

cd www

Open the package.json file with:

nano package.json

In the devDependencies section, add the following:

"hello-newstack": "file:../pkg"

One thing to note is that you’ll need to add a comma at the end of the line above “hello-newstack”: “file:../pkg”. Save the file and install all the necessary dependencies with:

npm install

After that completes, open the index.js file with:

nano index.js

Change the contents of that file to:

Run the app with:

npm run start

You can now point a browser to http://localhost:8080 to view the newly deployed web app.

Congratulations, you’ve just deployed your first WebAssembly app with Rust and cargo. Although this is quite basic, it should help to get you started on your WebAssembly journey.