Spin watch - live reload for Wasm app development
Tim McCallum
spin
wasm
watch
This article shows you how Spin’s watch feature can perform live reloading. Find out how you can speed up your application development and keep your application on the most recently edited source code and application-related files without manual intervention.
Create an Application
Have you ever wondered if your WebAssembly application could respond to file system changes without manual intervention? Wonder no more!
To kick things off, let us go ahead and create a new http-rust application.
If you do not have Spin installed, please go ahead and visit the developer documentation’s installation page.
We start by typing spin new http-rust, as shown below (you can use any language you like because Spin’s watch feature is ubiquitous amongst Spin applications):
$ spin new http-rust
Enter a name for your new application: Spin Watch Application
Description: An application that uses Spin's watch feature.
HTTP base: /
HTTP path: /...
Build and Run Your Application
Now, ordinarily, from this point, we would run the spin build command (to build the Spin application) and then run the spin up command (to start the Spin application). Or instead, combine those two commands in favor of a one-liner i.e. using the --up option of the spin build command to run the application after building. Like this:
$ spin build --up
We will not be using any of those commands, we will instead be using spin watch!
Monitor Using Spin
The command for building and running, becomes even more succinct when using Spin’s watch feature. Spin’s watch feature performs both spin build and spin up (in sequence) out of the gate; and in addition, monitors our application for file system changes:
$ spin watch
Building component spin-watch-application with `cargo build --target wasm32-wasi --release`
// --snip--
Finished building all Spin components
Logging component stdio to ".spin/logs/"
Serving http://127.0.0.1:3000
Available Routes:
spin-watch-application: http://127.0.0.1:3000 (wildcard)
Please note: Running our application via Spin’s watch feature does not detract from any of Spin’s functionality. Spin’s watch feature allows you to pass options through to the spin up command. (See Spin’s CLI Reference for the full list of valid spin up options.)
Spin templates come with sane defaults relating to Spin’s watch feature. For example, the above spin new http-rust command, that we just ran, automatically generated configuration in the application’s spin.toml file. By default the Spin watch feature will:
- monitor the application manifest (the
spin.toml file),
- monitor any files specified in the
component.build.watch sections of the spin.toml file,
- monitor any files specified in the
component.files sections of the spin.toml file,
- monitor any files specified in the
component.source sections of the spin.toml file.
If any of the monitored files encounter a change, Spin will rebuild the application (if necessary), then restart the application using the contents of those newly updated files.
Skip the Build
You can deliberately forgo building/re-building your application by using the --skip-build option:
$ spin watch --skip-build
Logging component stdio to ".spin/logs/"
Serving http://127.0.0.1:3000
Available Routes:
spin-watch-application: http://127.0.0.1:3000 (wildcard)
In the above scenario, the application will only spin up at the outset and then re-deploy using spin up whenever monitored changes occur. A situation where the --skip-build option is desirable is when another product like a third-party Integrated Development Environment (IDE) is already independently taking care of your builds and/or rebuilds.
The --skip-build option is also desirable when serving static content. For example, the component.files configuration below will usher in a restart of the application whenever the image-of-the-day.jpg and/or datestamp-file.txt files are updated:
[[component]]
// --snip--
files = ["daily-images/image-of-the-day.jpg", "daily-documents/datestamp-file.txt"]
// --snip--
Note: Any changes to the configuration (updates to the items) of the component.files array in the spin.toml file will require a manual restart of the spin watch command; for these configuration changes to take effect.
Monitor Source Code
Spin’s watch feature monitors only the source code that you tell it to monitor. So be sure to add any globs to the component.build.watch section if you would like your application to rebuild and re-deploy when that specific source code is changed. For example, the following configuration makes the Spin watch feature monitor any Rust source file inside the src directory and also monitor the Cargo.toml files:
[component.build]
watch = ["src/**/*.rs", "Cargo.toml"]
Any changes will usher in a rebuild and a restart of your application. However, keep in mind that if the build step fails (i.e. source code does not successfully compile) Spin’s watch feature will not run the server.
Note: Any changes to the configuration (updates to the items) of the component.build.watch array in the spin.toml file will require a manual restart of the spin watch command; for these configuration changes to take effect.
Reaction Time
By default, the Spin application will respond to changes in 100 millisecond intervals. This is just an arbitrary interval to ensure that the Spin framework is not overly reactive. The -d or --debounce option can be used to customize the timeout between detected change and re-execution, in milliseconds. For example, if you would prefer a faster reaction time you could use spin watch --debounce 50 which will reduce the interval from 100 milliseconds down to 50 milliseconds. Do whatever is best for your application’s functionality.
To Clear or not to clear
Another noteworthy option of Spin’s watch feature is --clear. Spin watch will never clear the screen (keeping all previous warnings and error messages intact) unless you pass --clear. If you pass the --clear option it will clear the screen anytime Spin re-triggers a build or restarts the server.
Seeing it in Action
Want to see it working? Check it out.
In closing, just a quick mention of what Spin’s watch will not monitor. The watch feature will not monitor changes to any files ending in .swp and does not respond to file metadata (write/execution permissions or system information about when the file was last changed).
If you need any further documentation, please refer to monitoring applications for change section in the developer documentation. For additional information about Spin, Fermyon Cloud, or other Fermyon projects, please join the chat in the Fermyon Discord server and follow us on Twitter @fermyontech and @spinframework!