Integrating Rust code via WebAssembly in a Vue-based Web-Application.

If you are a Rust developer or interested in learning and using Rust, sooner or later you must ask yourself how to distribute your code and integrate it with other parts of an application.

This story considers a very specific scenario but one that probably will affect the majority among us.

Rust is known to be super fast and efficient. It is one of the next-generation languages to solve combinatorial and numerical tasks in production.

Ok, so far so good. But as we know, compiled Rust code is always targeted to run in some operating system like Linux, Windows, … . In order to achieve this, one typically hosts the code inside a Rust server and handles requests through a REST-API (or other messaging systems). But in case we want to run the code in a PWA, that is, a web-application this is able to operate offline, or just inside a web-app without back-end, we must come up with an alternative.

One solution is to compile Rust to WebAssembly and then let the browser run the code inside a WebWorker. The WebWorker is not a requirement here, but in many cases longer taking tasks are not desired to run in the browser’s main execution context and hence blocking any user interactions.

Web-App:

Our setup is a Vue application that uses TypeScript and Vite as build system.

It might sound harder than it is to get such a web-application. Ensure to have installed Node.js on your machine and then in a terminal just do

> npm init vue@latest

Only ensure to give it a name and to say ‘Yes’ when it asks you if you want to use TypeScript. Although TypeScript is no requirement as well, I thing must of you will appreciate its use.

Now, you can cd into the folder named after how you titled your project and run

> npm i

This fetches all dependencies and you may run the project by typing

> npm run dev

Then point you browser to http://127.0.0.1:5173/ and you will see the application’s default welcome page.

Rust Code: