Svelte WASI in Browser Example
This example demonstrates running Web Assembly (wasm) on WASI (the Web Assembly System Interface) in the browser using WasmerJS.
It uses the wasm-terminal package from WasmerJS so you can type "cowsay something something" into a terminal window in the browser, and it will run the cowsay wasm app.
The project is based on svelte-wasm-template and so also includes some Rust/wasm code, but that is compiled for WASM (using wasm-pack) and not WASI at the moment.
Prereqs
- Node.js
- Rust
Get Started
git clone https://github.com/happybeing/svelte-wasm-terminal-test
cd svelte-wasm-terminal-test
yarn && yarn devNavigate to localhost:5000 and you should see the app running.
The main code is in src/App.svelte.
The non-WASI Rust/WASM component is in src/greeting/src, save it, restart the dev server to recompile the WASM, and then reload your page to see your changes. NOTE: this is not compiled to WASI, but compiled using wasm-pack to WASM (using target wasm32-unknown-unknown).
If you're using VSCode, we recommend installing the offical Svelte extension as well as the offical Rust extension. If you are using other editors, your may need to install a plugin in order to get syntax highlighting and intellisense for both Svelte and Rust.
Building and running in production mode
To create an optimized version of the app:
yarn buildYou can run the newly built app with yarn start. This uses sirv, which is included in your package.json's dependencies so that the app will work with you deploy to platforms like Heroku.
Single-page app mode
By default, sirv will only respond to requests that match files in public. This is to maximize compatibility with static file servers, allowing you to deploy your app almost anywhere.
If you're building a single-page application (SPA) with multiple routes, sirv needs to be able to respond to requests for ANY path. You can make it so by editing the start command in package.json:
"start": "sirv public --single"