Reloading on change

[amlwwalker]

Hi @AlienRecall
I spoke with Lea Anthony on the slack group who said you were quite active around the wails community.

I wondered if you ever had any luck getting the template working with reloading - I cant tell what about a template decides whether or not it will reload on frontend change however the other react template out there claims it does work reload on file change, however I can't seem to get that template running - yours seems more stable, except this feature.

If you are familiar with how reloading/templates work, do you know what would cause that to work in the other react template? https://github.com/flin7/wails-react-template

Looking through it, the frontend has a webpack watcher which I wonder if that is what you are missing here: https://github.com/flin7/wails-react-template/blob/main/frontend/package.tmpl.json
and a webpack config: https://github.com/flin7/wails-react-template/blob/main/frontend/webpack.config.js
although I am not that familiar with webpack the "dev": "webpack --mode development --watch", line seems to 'watch'....
I wonder if you might be able to get this template live updating with changes?
Would be awesome if this template worked with reload to make the dev process here a dream 😄

thanks!

[bearsh]

I also faced the same problem but found a solution. While create react application supports reloading, it does not support writing the generated files to a directory. Fortunately the underlying webpack supports this and there's a npm packages which enables this feature: cra-build-watch. So what to do:

1. install cra-build-watch: yarn add --dev cra-build-watch
2. add a script to package.json:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "watch": "cra-build-watch"
  },

3. enable it in wails.json:

{
  ...
  "assetdir": "frontend/build",
  "frontend:build": "yarn build",
  "frontend:install": "yarn install",
  "frontend:dev": "cat",
  "frontend:dev:watcher": "yarn watch",
  ...
}

the cat in frontend:dev make it a dummy command. just removing it will cause wails to call yarn build.

After calling cra-build-watch, it will clear the build directory and rebuild the js code. in the meantime wails wants to access the generated files which cause an error in wails and the dev server is not started. simply wait a short while and change a line in one go file, hit save and let wails rebuild the application. now it should work.

Hope this helps...

Once I have some time left, I'll create a pull request and report the behavior to the wails devs...