Webpack server support. Vue-CLI serve

Questions
, , ,
#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.