# Rust + Vite/React is an insanely slick combination I love writing UIs in React, but I hate writing business logic in javascript/typescript. I need Rust's lack of footguns to be productive writing any tricky logic, and I like being closer to the metal because I feel more confident that my code will actually run fast. I have a [vector database](https://github.com/not-pizza/victor) and some [AI inference code](https://github.com/wafer-inc/catboost) that I use quite often on the web, and it would be a nightmare to write that stuff in Typescript. Also, `wasm-bindgen` is awesome at generating Typescript annotations for your rust code, and great at keeping your bundle size small by removing everything you don't use. But for writing UIs, React is just perfect, especially since there's such a mature ecosystem of components available online. Unfortunately, there's a ton of wrong information online on how to start working with this stack, so I realized I should probably share some details on how this works. First, you need to [install wasm-pack](https://rustwasm.github.io/wasm-pack/installer/). Then, create your rust project with `wasm-pack new my-rust-package` . Naturally, you [then follow the standard instructions for creating a new vite project](https://vite.dev/guide/) (I did this in an adjacent directory). In your vite project, you'll need to make sure you have `vite-plugin-wasm` and `vite-plugin-top-level-await` enabled to make use of your wasm code: ``` // in file: vite.config.ts import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import wasm from "vite-plugin-wasm"; import topLevelAwait from "vite-plugin-top-level-await"; export default defineConfig({ plugins: [react(), wasm(), topLevelAwait()], }) ``` Once you've done that, you can just point at your rust package in your `package.json`, and add the `vite-plugin-top-level-await` and `vite-plugin-wasm` packages in your dev dependencies: ``` // package.json // [...] "dependencies": { "my-rust-package": "file:../my-rust-package/pkg", // add this } "devDependencies": { "vite-plugin-top-level-await": "^1.5.0", // add this "vite-plugin-wasm": "^3.4.1" // add this } // [...] ``` The pkg folder will be automatically created when you run `wasm-pack build` inside `my-rust-package`, which is all you need to do to build it. (For release builds, you should run `wasm-pack build --release`.) You don't need to pass any other flags to `wasm-pack build`. There's a ton of wrong information about this online lol. Unfortunately, hot module reloading doesn't quite seem to work with wasm modules, so right now I'm manually reloading the project every time I change the Rust code. Still, it works pretty great and makes me super productive.