Trying to Tauri on Rust : 2. Hot Reload (^-^

Photo by American Heritage Chocolate on Unsplash

Apply the hot reloadable development server to the small experimental project, I created last time.

Trying to Tauri on Rust : 1. min-min-project (^-^

• I’m trying out a desktop app with Tauri and an unfamiliar WebView2.
• I’m experimenting with a minimal and pure skeleton to clearly see the roles of html, js and Rust.

live-server

I well try the live-server. I think anything that supports hot reloading is fine.

tauri01> yarn add live-server

Edit src-tauri\tauri.conf.json and change "devPath": from "../public" to "http://localhost:5555" etc. Port number 5555 is optional.

"build": {
  :
　"devPath": "http://localhost:5555",
  :

Test with manual server startup

First, start the server manually for verification, then debug and run the application from another terminal to see what happens.

Open another terminal and start the server with the following command:

tauri01> yarn live-server public --port=5555 --no-browser

public is the folder name, --port= is an optional port number (live-server defaults to 8080).
--no-browser prevents the browser from opening automatically at startup.

Leave the terminal that started the server as it is, and execute the following command from another terminal.

tauri01> yarn tauri dev

A window with the same content as before opens, but index.html is displayed via live-server.
As an experiment, in this state, the same content is displayed even if you open http://localhost:5555 in your browser.

Hot reload is already enabled, but before that, set the detail server to autostart. To save time and effort.

Make live-server start automatically

If the terminal window running on the server is open, close it. (By the way, to stop the server, close the window or Ctrl+C)

Edit package.json and add a "scripts" section similar to the following.

  :
  "scripts": {
    "dev": "live-server public --port=5555 --no-browser",
  },
  "devDependencies": {
  :

Edit src-tauri/tauri.conf.json and set "beforeDevCommand" to "yarn dev"etc. according to the above settings.

Run the following command:

tauri01>yarn tauri dev

The app is executed after live-server is started.

Open index.html with an editor, modify it appropriately, and save it.
Then the hot reload will immediately reflect the correction.

Behavior when index.html is edited.

• Editing index.html will automatically reload it.
• Editing main.rs will automatically rebuild it.
• If you close the app window you are debugging, live-server will also end.

Thank you for reading!
If you like it, please follow me.🤩

Next time, I will finally try communication with js and Rust.

Originally published at https://jnsmith.blog.fc2.com.