 |
VOOZH | about |
|
VOOZH | about |
We’re so glad you’re here. You can expect all the best TNS content to arrive Monday through Friday to keep you on top of the news and at the top of your game.
Check your inbox for a confirmation email where you can adjust your preferences and even join additional groups.
Follow TNS on your favorite social media networks.
Become a TNS follower on LinkedIn.
Check out the latest featured and trending stories while you wait for your first TNS newsletter.
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!
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
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:
Compiling proc-macro2 v1.0.28 Compiling unicode-xid v0.2.2 Compiling syn v1.0.75 Compiling log v0.4.14 Compiling wasm-bindgen-shared v0.2.76 Compiling cfg-if v1.0.0 Compiling lazy_static v1.4.0 Compiling bumpalo v3.7.0 Compiling wasm-bindgen v0.2.76 Compiling cfg-if v0.1.10 Compiling quote v1.0.9 Compiling wasm-bindgen-backend v0.2.76 Compiling wasm-bindgen-macro-support v0.2.76 Compiling wasm-bindgen-macro v0.2.76 Compiling console_error_panic_hook v0.1.6 Compiling hello-newstack v0.1.0 (/home/jack/hello-newstack)
Now we’re going to create an index HTML page, create this new file with:
nano index.html
In that file, paste the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>New Stack Wasm Test Project</title>
</head>
<body>
<script type="module">
import { default as wasm, greet } from "./pkg/hello_newstack.js";
wasm().then((module) => {
greet();
});
</script>
</body>
</html>
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.
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:
import * as wasm from "hello-newstack"; wasm.greet();
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.
