DEV Community

loading...
Cover image for WebAssembly + Rust + TypeScript project setup

WebAssembly + Rust + TypeScript project setup

krzysztofkaczy9 profile image Krzysztof Kaczyński Updated on ・2 min read

I created a repository with example project which you can find here: web-assembly-rust-typescript-template

What you will need:

How to set up project

Set-up

Web - TypeScript part

  1. Initialize npm project

       npm init -y
    
  2. Install the following dependencies

       npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin ts-loader typescript
    
  3. Create index.js file and export your App (this will be an entry point of your application)

       export { App } from './App';
    
  4. Create bootstrap.ts file in which you will import your index.js asynchronously. We have to load the app asynchronously because .wasm files have to be loaded asynchronously

       import('./index').catch(e => console.error('Error importing **index.ts**:', e));
    
  5. Create webpack.config.js. Here we have to use experimetns: syncWebAssembly to load our .wasm files

       experiments: {
             syncWebAssembly: true
           }
    
  6. Add serve and build script to your package.json

       "scripts": {
             "serve": "webpack serve",
             "build": "webpack"
           }
    

WebAssembly - Rust part

  1. In root of your project create wasm project using wasm-pack

       wasm-pack new name-of-package
    
  2. Go to package directory

    cd ./name-of-package
    
  3. Run wasm-pack build to build your wasm package

Link wasm-package with TypeScript code

  1. Install your wasm package (if you publish your wasm package then you can install it via npm)

       npm install wasm-package-name/pkg
    
  2. Make sure that you can find this dependecy in your package.json

       "dependencies": {
         "wasm-package-name": "file:./wasm-package-name/pkg"
       }
    
  3. Make sure you have "moduleResolution": "node" in your tsconfig.json

Summary

If you followed all those steps you should have all typing hints from your wasm-package in your typescript project

Discussion (2)

pic
Editor guide
Collapse
ender_minyard profile image
ender minyard

Can you explain why you would need both Typescript and Rust for a WebAssembly project? Either AssemblyScript or Rust can compile to WebAssembly, I would just choose one.

Collapse
krzysztofkaczy9 profile image
Krzysztof Kaczyński Author • Edited

I am not sure did I understand your question, but I will try to answer. Why:

  • You want to create a wasm package in Rust but the rest of the project is created in TypeScript + WebComponents / React (maybe you want to learn a new language and try it in the web)
  • You need a language which is very very safe
  • You want to create a functionality which will be available to compute by user (at frontend) but can be also run on a clod (server side) and you need high-performance

This post is not about: "Use Rust and WebAssembly over Vanilla JS in any case to boost your app performance" because it doesn't work like that. I just wanted to show how to combine these technologies so that they are pleasant to work with.
Have I answered your question?