wailsapp / wails

Create beautiful applications using Go
https://wails.io
MIT License
25.34k stars 1.22k forks source link

The dev watcher mode cannot use bound go methods in the console. #1374

Closed misitebao closed 2 years ago

misitebao commented 2 years ago

Description

With dev watcher mode, bound go methods cannot be used in the console.

To Reproduce

  1. go install github.com/wailsapp/wails@v2.0.0-beta.36
  2. wails init -n Wails-Vue -t vue
  3. cd Wails-Vue
  4. Run wails dev
  5. Visit localhost:3000 in the browser
  6. Unable to access bound go method in console

Expected behaviour

Binding Go methods can be accessed in the browser console.

Screenshots

No response

Attempted Fixes

No response

System Details

$ wails doctor
Wails CLI v2.0.0-beta.36

Scanning system - Please wait (this may take a long time)...Done.

System
------
OS:             Windows 10 Pro
Version:        2009 (Build: 19044)
ID:             21H2
Go Version:     go1.18
Platform:       windows
Architecture:   amd64

Wails
------
Version:        v2.0.0-beta.36
Revision:       531d7cfb629e403084ca122912c096c3fd2f5c34
Modified:       true

Dependency      Package Name    Status          Version
----------      ------------    ------          -------
WebView2        N/A             Installed       101.0.1210.32
npm             N/A             Installed       8.3.1
*upx            N/A             Available
*nsis           N/A             Available

* - Optional Dependency

Diagnosis
---------
Your system is ready for Wails development!
Optional package(s) installation details:
  - upx : Available at https://upx.github.io/
  - nsis : Available at https://nsis.sourceforge.io/Download

Additional context

No response

stffabi commented 2 years ago

Hi @misitebao thanks for this report, seems to me like a duplicate of #1357.

Connecting directly to Vite will never work, wails can't inject the runtime/bindings there. If you want to develop in a browser, please open the Wails DevServer which is per default on localhost:34115

misitebao commented 2 years ago

@stffabi @leaanthony If so, what's the point of frontend:dev:serverUrl? And visit localhost:34115, when the front-end code is updated, the UI will not be automatically updated.😢

stffabi commented 2 years ago

Since the introduction of frontend:dev:serverUrl Wails now fully supports external devserver and will reverse proxy to the external dev server. So by specifying the frontend:dev:serverUrl you can use wails dev and you get a fully automatically reloading dev experience by using e.g. vite. You can also browse to localhost:34115 which will also do auto reloads.

stffabi commented 2 years ago

Just use one of the vite powered templates and you have a fully auto reload dev experience. You can either use wails directly and see auto reloads there, or you can browse with your browser to localhost:34115 and see auto reloads there as soon as the frontend code gets changed and vite has triggered the reload.

misitebao commented 2 years ago

@stffabi When running wails dev, the front end will start the development server and generate resources in the virtual directory. It stands to reason that files should not be generated in the dist directory, but the wails dev command seems to also execute the command in frontend:build , and resource files are generated in the dist directory.

stffabi commented 2 years ago

That's not a problem since wails dev will use the vite dev server to show the frontend.

misitebao commented 2 years ago

I think building frontend assets to dist directory in vite dev mode is redundant step and should only be done when executing vite build command in frontend:dev:watcher or frontend:dev will generate the frontend to the dist directory, what do you think?

misitebao commented 2 years ago

@stffabi There are three scenarios in my understanding of wails dev:

  1. Just specify frontend:dev, e.g. "frontend:dev":"npm run build -mode development"
  2. Just specify frontend:dev:watcher, e.g. "frontend:dev:watcher":"npm run build --watch -mode development"
  3. Only specify frontend:dev:watcher and frontend:dev:serverUrl, e.g. "frontend:dev:watcher":"npm run dev" and "frontend:dev:serverUrl": "http://localhost:3000"

Is it right?👀

stffabi commented 2 years ago

I personally see no problem with those two redundant calls.

Edit: Having an empty frontend:dev will always fallback to frontend:build.

misitebao commented 2 years ago

It seems that this step is not required in wails dev mode?

stffabi commented 2 years ago

Could be but that might be a breaking change. I would suggest to open a new issue if you see a problem with that, since we got quite off-topic of this issue.

misitebao commented 2 years ago

For discussion of the issues mentioned above, please move to https://github.com/wailsapp/wails/discussions/1384