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 dev
Navigate 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 build
You 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"