Webpack server support. Vue-CLI serve

Issues - Platform and API
#1

Is there any support while in development instead of files to provide a url the the live server?
For example in vue.js when i run the code locally for development (not build it) i can access each window via localhost:8080/window_name in chrome and when i build it it generates a window_name.js for each window. The question is if i can in some way in manifest.json map the windows to localhost:8080/window_name instead to window_name.js for development purposes in order for the to test together with the window.overwolf api.

Best regards,
Avner

1 Like
#2

+1 for allowing url as window directly

I think a pattern similar to Microsoft’s Office Add-in structure could be awesome:

that way, the developer can choose any file/web address and you could inject the overwolf API on manifest installation

#3

Thanks @avner-solomon. I will escalate it to our R&D team.

#5

hey @avner-solomon,
Is this what you’re looking for?

#6

Hi, It’s not exactly explained how debug url works. Does it load the window code from there instead of the provided file? From personal tests I had no success.

#7

@avner-solomon yes, that should load your app code in the window where you set the debug_url flag.

In general, the workflow is:

For this example, I will assume that your app has two windows: a background controller called “main” and an app window called “popup”.

  1. Run your React app locally (for example on localhost:3000).
  2. In your OW app’s manifest, under the “popup”, set the debug_url flag to localhost:3000.
    for example:
    “popup”: {
    “file”: “popup.html”,
    “debug_url”: “http://localhost:3000”,
    …
    }
  3. Load your OW as an unpacked extension.
  4. Open the CEF remote debugging URL in chrome (http://localhost:54284/).
  5. Find the “main” app window on the list, and open it. The dev console will open for this window.
  6. Open the “popup” window:

overwolf.windows.obtainDeclaredWindow(‘popup’, console.log)
overwolf.windows.restore(‘popup’, console.log)

The popup window will be opened, and your react app will be loaded in it.
Now every change that you’ll do in the react code will be reflected in the OW window.

I tested the above, and this concept is working.

Please tell me if it’s clear and make sense, and if it’s working for you.

#8

Ok so I am using vue, which works in a similar manner.
When I access https://localhost:8080/desktop where my desktop window code resides in browser it loads, meanwhile for the desktop window for which i set the debug url to https://localhost:8080/desktop I just get a blank html with only

As you can see in the following image my request is getting canceled (the dubg_url request I mean)

1844×369 35 KB

#9

Ok so I found 2 main issues with what you described above

  1. “block_top_window_navigation”: true in manifest will block the redirect from the html file to the debug_url and the only way I figured this out is by going through the logs
  2. Even after that the overwolf JS/API is not being injected in the debug_url version which makes this irrelevant for me

1920×976 106 KB

#10

@avner-solomon Please let me check it with the R&D, and I’ll get back to you. Thanks.

#16

@avner-solomon @HeeeySusu, I did some tests to find the issue without any conclusions.
Unfortunately, I will have to escalate it to the R&D.
I will keep you updated.

Thanks.

#20

Figured it out with the help of @tom.wolf .
It seems there’s a conflict with some refreshes / reloads automatically done by vue-rotuer module.
My general suggestion is to avoid using said module all together since it’s meant for sites and not apps. Switch to using v-if / v-show in combination with a state variable at app level.

2 Likes
#21

Great! closing the ticket. Thanks.