Hey guys, have you ever worked on Web Assembly? Now is a good time, first because its already supported by your browser from Chromium based (e.g. Edge, Brave, Google Chrome) to Firefox and its enabled by default since 2019. Plus you can use your favorite language (technically not all) to develop web assembly.
In this quick tutorial we will be using Rust, not the game though.
Ferris saying hello 👋.
Come on, let’s jump in! 💪
First of all, you must have a Cloudflare account. Second, the Rust tool chain installed in your computer and I also assumed you are currently running Windows 10 or a Linux distro with proper environment set.
If you don’t have Rust, go to this link in order to install it. And for the Cloudflare account, basically just use the free tier which gives you 100,000 worker calls per day and a free Key-Value (KV) storage.
So where do we start?
The first thing we need to do, is to install wrangler which is a command-line tool specifically developed by Cloudflare to complement the deployment and development of Workers. Install the wrangler tool using the cargo command utility.
The command above will first fetch the source from crates.io and compile it as binary. The command will also automatically install it on your ~/.cargo/bin directory.
💡: Cloudflare Worker is similar to AWS Lambda and Azure Cloud Function. They're both under the serverless computing category.
After the installation of wrangler, you need to authenticate using your Cloudflare account API key, on which you can get on the user settings panel.
If all works well, the next thing we need to do is to generate the cargo project using the wrangler command line. Execute the code below to generate a cargo project using the Rust WASM worker template:
After that, go inside the folder named
worker_fetch_demo to edit the file
cargo.toml . Add the following crate dependencies.
You’ll be able to get to know what the other package are for, if you’ve already read the Rust Programming Language Book.
After adding those crate dependencies it will automatically be fetched on build or upon call to
cargo update .
Next thing we modify is the file
worker > worker.js . This file serves as the main entry-point of our program that will call our compiled wasm files. We need to add minor modification to it, specifically capturing request and serving the wasm response as JSON.
We move on now to the rust files. 🦀
On the file
console.log ) if the
console_log dependency is present.
Next, we add a function that will hook to
js_sys to return the ServiceWorkerGlobalScope.
After adding our
worker_global_scope , we proceed with editing the
greet function. First, rename it to
run then add our first instruction to hook rust panic to
console_error . Then call
init_log to initialize basic logging functionality.
Then we initialize our request with the method GET, you could also use other HTTP methods (e.g. POST, PUT, DELETE, …). The method depends on your application needs and endpoints you want to call.
Next, will be creating the request payload that we will submit to our custom fetch. The instruction will contain the endpoint and request options.
On the returned response, unwrap it and return its JSON value.
Here is our full wasm function that will be called on our
worker.js that we defined earlier above.
Now, we need to test it, to see if everything’s okay. Spin up a local server using the following command below.
Test everything and try to call the URL returned by
wrangler dev using Postman or Insomnia HTTP client. If everything is working fine, its now time to deploy the worker to live server.
After running the command above, it will return a live worker URL which you can now access everywhere.
That’s all guys!
You can found the complete repository here.
fetch (kindly look at Cloudflare example files). If you have any questions kindly leave a comment or DM me 😉.
Follow me for similar article, tips, and tricks ❤.