[Mac] Can not show the UI when exec 'wails dev' #1504

cxt90730 · 2022-06-29T06:43:19Z

Description

Can not show the UI when exec 'wails dev' (just an empty window), but web ui works. Also, the app created by 'wails build' works too.

To Reproduce

wails dev on my Mac(10.15 catalina)

Expected behaviour

the UI when exec 'wails dev' works

Screenshots

Attempted Fixes

No response

System Details

❯ wails doctor
Wails CLI v2.0.0-beta.38


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

System
------
OS:		MacOS
Version: 	10.15.7
ID:		199506
Go Version:	go1.17.6
Platform:	darwin
Architecture:	amd64

Wails
------
Version: 	v2.0.0-beta.38

Dependency			Package Name	Status		Version
----------			------------	------		-------
xcode command line tools 	N/A		Installed	2373
npm 				N/A		Installed	8.0.0
*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 · 2022-06-29T06:54:40Z

Thanks for reporting this issue and using Wails.

Just a couple of questions to hopefully narrow down the problem.

Does it work with a clean Wails template? Like plain wails init -t plain -d test -n test or vanilla wails init -t vanilla -d test -n test
Do you see anything of interest in the "DevTools", could be opened by right clicking into the empty window and clicking "Inspect Element"?
Does the console output of wails dev show anything that is failing?

cxt90730 · 2022-06-29T09:57:45Z

thx, I need your help -_- :

wails init -t plain -d test -n test works. But wails init -t vanilla -d test -n test not, also some mistakes happens: web ui shows myproject ui, whether the testproject ui. (Because of cache?)
Only this:

<html><head></head><body></body></html>
<head></head>
<body></body>
<html><head></head><body></body></html>

no fail output shows :(

stffabi · 2022-06-29T11:43:17Z

Thanks for your answers. Let's stick with the vanilla template case.

Can you please create again a new vanilla template in a new empty folder, just to make sure there's no mixed content. Also please make sure there's no other wails dev or npm running with your myproject UI.

When running wails dev in this new folder, could you please provide or try the following?

A screenshot of the "Network" tab of the dev tools from the Wails window.
A copy of the complete wails dev output.
What do you see when accessing http://localhost:3000 with your normal browser?
What do you see when accessing http://localhost:34115 with your normal browser?

leaanthony · 2022-06-29T12:33:29Z

Did you try this? https://wails.io/docs/guides/troubleshooting#my-application-is-displaying-a-whiteblank-screen

leaanthony · 2022-06-29T12:33:45Z

Sounds like a vite error if plain works

cxt90730 · 2022-06-29T13:19:24Z

@stffabi @leaanthony Actually I used raw template vue. I executed these cmd:

$ mkdir wailstest
$ cd wailstest/
$ wails init -n myproject -t vue
$ cd myproject/
$ wails dev
Wails CLI v2.0.0-beta.38


Executing: go mod tidy -compat=1.17
Executing: wails generate module
Building application for development...
  - Installing frontend dependencies: Done.
  - Compiling frontend: Done.
  - Compiling application: Done.
  - Packaging application: Done.

Running frontend dev watcher command: 'npm run dev'
Watching (sub)/directory: /Users/cuixiaotian/wailstest/myproject
Using DevServer URL: http://localhost:34115
Using Frontend DevServer URL: http://localhost:3000
Using reload debounce setting of 100 milliseconds
INF | Serving assets from frontend DevServer URL: http://localhost:3000

> frontend@0.0.0 dev
> vite

Port 3000 is in use, trying another one...

  vite v2.9.13 dev server running at:

  > Local: http://localhost:3001/
  > Network: use `--host` to expose

  ready in 294ms.

9:13:23 PM [vite] hmr update /src/components/HelloWorld.vue
9:13:23 PM [vite] Internal server error: Failed to resolve import "../../wailsjs/go/main/App" from "src/components/HelloWorld.vue". Does the file exist?
  Plugin: vite:import-analysis
  File: /Users/cuixiaotian/wailstest/myproject/frontend/src/components/HelloWorld.vue
  1  |  import {reactive} from 'vue'
  2  |  import {Greet} from '../../wailsjs/go/main/App'
     |                       ^
  3  |
  4  |
      at formatError (/Users/cuixiaotian/wailstest/myproject/frontend/node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:39055:46)
      at TransformContext.error (/Users/cuixiaotian/wailstest/myproject/frontend/node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:39051:19)
      at normalizeUrl (/Users/cuixiaotian/wailstest/myproject/frontend/node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:58329:26)
      at async TransformContext.transform (/Users/cuixiaotian/wailstest/myproject/frontend/node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:58478:57)
      at async Object.transform (/Users/cuixiaotian/wailstest/myproject/frontend/node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:39292:30)
      at async doTransform (/Users/cuixiaotian/wailstest/myproject/frontend/node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:50012:29)
Added new directory to watcher: /Users/cuixiaotian/wailstest/myproject/frontend/wailsjs/go
DEB | [DevWebServer] Serving DevServer at http://localhost:34115
9:13:23 PM [vite] hmr update /src/components/HelloWorld.vue
DEB | [DevWebServer] Websocket client 0xc0000dcf30 connected

screen is blank
http://localhost:3000 is ok
http://localhost:34115 is my_own_object .... like the assets cached ?

stffabi · 2022-06-29T13:34:31Z

Port 3000 is in use, trying another one...
vite v2.9.13 dev server running at:

Local: http://localhost:3001/

According to this it seems like you are still running something on that port, seems like your my_own_project.

Per default the vue template tries to use http://localhost:3000 to retrieve the content but vite is going to use :3001 to serve the content of the vue template, because :3000 is occupied. So please either stop your other webserver on port 3000 or change the "frontend:dev:serverUrl": http://localhost:3000" property in your wails.json of the newly created template. Then restart wails dev.

Could you please try again the tests above? You should now see the Wails template when browsing to http://localhost:34115 and also in the Wails Window.

stffabi · 2022-06-29T13:48:31Z

I suspect you might also be affected by issue #1358. Could you please also try this #1358 (comment) ?

cxt90730 · 2022-06-30T02:26:06Z

@stffabi emmm, the problem of http://localhost:34115 has been solved, because the process vite did not close (I don't know why...) and it binds port 3000. After kill it, port 34115 seems like ok now.
For your suggestion, I add config in build/darwin/Info.plist, and retry rm -rf build/bin && wails dev according to #1358 , but it also does not work... window still blank...

cxt90730 · 2022-06-30T02:44:47Z

@stffabi @leaanthony

<key>NSAppTransportSecurity</key>
        <dict>
            <key>NSAllowsArbitraryLoads</key>
            <true/>
            <key>NSExceptionDomains</key>
            <dict>
                <key>localhost</key>
                <dict>
                    <key>NSExceptionAllowsInsecureHTTPLoads</key>
                    <true/>
                    <key>NSIncludesSubdomains</key>
                    <true/>
                    <key>NSThirdPartyExceptionRequiresForwardSecrecy</key>
                    <false/>
                </dict>
           </dict>
      </dict>

I add these config in build/darwin/Info.plist, and retry rm -rf build/bin && wails dev, it works now haha

stffabi · 2022-06-30T05:54:49Z

@cxt90730 awesome that it works now for you 👍

We would like to document this in a troubleshooting guide #1508 . It would be great to find the minimal settings needed to get it working, especially Apple has a "AllowLocalNetworking" flag. Would it be possible for you to give the following settings in your Info.plist a try, that would be awesome?

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsLocalNetworking</key>
    <true/>
</dict>

cxt90730 · 2022-06-30T06:50:06Z

@stffabi your settings works~~ 👍
Thank you very much for your patient guidance :)

stffabi · 2022-06-30T07:04:18Z

Awesome, thanks so much for testing the settings. So we could add those to the troubleshooting guide.

csterritt · 2022-07-04T20:44:06Z

I can confirm that the minimal fix above works with Vue3 and Vite. Thanks for the fix!

robbles · 2022-10-05T16:07:13Z

Just ran into this, and the manual plist fix that's documented works!

However, I'm seeing it on macOS 11.4, which is currently only one version behind the latest. Shouldn't wails dev be including these settings by default? I'm guessing a majority of macOS devs trying wails for the first time are immediately running into this.

leaanthony · 2022-10-06T06:31:46Z

Hi @robbles - I think there's an argument for that. How do you think it should work? Perhaps we could generate plist.info and info.dev.plist from the template, then wails dev copies the info.dev.plist version if it exists? This gives the developer to add in other dev related config. The only risk is that a production build would not have some of the fixes as now the developer has 2 files to manage. Thoughts?

robbles · 2022-10-06T21:44:21Z

I have to admit, I'm not familiar enough with how these are generated.

But it seems like a reasonable solution. I think having an info.dev.plist is relatively intuitive and wouldn't be too hard to manage - having separate configs for dev and production is pretty common for other frameworks.

leaanthony · 2022-10-07T19:58:41Z

Thanks for the feedback. Added a proposal in the linked issue

leaanthony · 2022-10-12T11:19:07Z

@robbles - Please try the above PR to see if this fixes your problem. If you are unsure how to do this, please follow this guide. Let us know how you get on 👍

robbles · 2022-10-20T19:05:19Z

Tried it out, and works perfectly! Thanks for fixing this, sorry about the delay in testing it.

leaanthony · 2022-10-20T20:42:00Z

Awesome! Thanks for letting us know. This was a great suggestion. Here's a virtual beer 🍻 👍

cxt90730 added the Bug Something isn't working label Jun 29, 2022

stffabi mentioned this issue Jun 30, 2022

Document subdomain fix #1508

Closed

cxt90730 closed this as completed Jul 6, 2022

leaanthony reopened this Jul 6, 2022

leaanthony closed this as completed Jul 6, 2022

leaanthony mentioned this issue Oct 7, 2022

Support Info.dev.plist on macOS #1943

Closed

leaanthony mentioned this issue Oct 12, 2022

Add support for Info.dev.plist #1960

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Mac] Can not show the UI when exec 'wails dev' #1504

[Mac] Can not show the UI when exec 'wails dev' #1504

cxt90730 commented Jun 29, 2022

stffabi commented Jun 29, 2022

cxt90730 commented Jun 29, 2022

stffabi commented Jun 29, 2022

leaanthony commented Jun 29, 2022

leaanthony commented Jun 29, 2022

cxt90730 commented Jun 29, 2022

stffabi commented Jun 29, 2022

stffabi commented Jun 29, 2022 •

edited

Loading

cxt90730 commented Jun 30, 2022

cxt90730 commented Jun 30, 2022

stffabi commented Jun 30, 2022

cxt90730 commented Jun 30, 2022

stffabi commented Jun 30, 2022

csterritt commented Jul 4, 2022

robbles commented Oct 5, 2022 •

edited

Loading

leaanthony commented Oct 6, 2022

robbles commented Oct 6, 2022

leaanthony commented Oct 7, 2022

leaanthony commented Oct 12, 2022

robbles commented Oct 20, 2022

leaanthony commented Oct 20, 2022

[Mac] Can not show the UI when exec 'wails dev' #1504

[Mac] Can not show the UI when exec 'wails dev' #1504

Comments

cxt90730 commented Jun 29, 2022

Description

To Reproduce

Expected behaviour

Screenshots

Attempted Fixes

System Details

Additional context

stffabi commented Jun 29, 2022

cxt90730 commented Jun 29, 2022

stffabi commented Jun 29, 2022

leaanthony commented Jun 29, 2022

leaanthony commented Jun 29, 2022

cxt90730 commented Jun 29, 2022

stffabi commented Jun 29, 2022

stffabi commented Jun 29, 2022 • edited Loading

cxt90730 commented Jun 30, 2022

cxt90730 commented Jun 30, 2022

stffabi commented Jun 30, 2022

cxt90730 commented Jun 30, 2022

stffabi commented Jun 30, 2022

csterritt commented Jul 4, 2022

robbles commented Oct 5, 2022 • edited Loading

leaanthony commented Oct 6, 2022

robbles commented Oct 6, 2022

leaanthony commented Oct 7, 2022

leaanthony commented Oct 12, 2022

robbles commented Oct 20, 2022

leaanthony commented Oct 20, 2022

stffabi commented Jun 29, 2022 •

edited

Loading

robbles commented Oct 5, 2022 •

edited

Loading