DEV Community

Cover image for WebAssembly + Rust + TypeScript project setup
Krzysztof Kaczyński
Krzysztof Kaczyński

Posted on • Updated on

WebAssembly + Rust + TypeScript project setup

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 (7)

Collapse
piperunner profile image
Pipe Runner

This not only is very hacky, but the official rustwasm.github.io site has better ways of doing this.

Collapse
krzysztofkaczy9 profile image
Krzysztof Kaczyński Author • Edited on

Can you explain to me why it is 'very hacky' in your opinion and why my solution for linking TS + Rust + WebComponents is worse?

Collapse
piperunner profile image
Pipe Runner

If you go through the trouble of adding webpack then why wouldn't you use the wasm-pack-plugin? In the approach that you have mentioned, you will have to compile your code manually everytime you make changes in your rust code. I mean no disrespect but the steps I am mentioning are mentioned in the wasm-pack document itself. Hope this answers your question. :)

Thread Thread
rileyseaburg profile image
Riley Seaburg

There are better ways to provide improvement suggestions on such an edge case.

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 on

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?

Collapse
piperunner profile image
Pipe Runner

Planning to write react code in Rust?? A really strange question.