Overwolf, Angular and (CL)I // Getting Started (Part 1)

This is a series about my journey of learning to utilise and adapt the tooling provided by the Angular-cli for Overwolf development.

If you never heard of Overwolf or how to develop Apps on their platform, please check the documentation.

Overwolf Extensions (or synonymous “Overwolf Apps“) run on a chromium based Browser-engine, so development is very similar to luxurious (because no cross-browser hustle) Web-development.

I actively develop and maintain an Angular App on there called Legendary Builds. The Project started out about 2 years ago with AngularJS and migrated to Angular 2,3,4 using a custom Gulp build setup.

I’m finally ready to tackle migrating the whole project to using the Angular-cli, rethinking the build process and doing optimizations on the way. I might put up some more general Stories if something interesting comes up, but for the most part I mainly wanne document my (hopefully successful) efforts to get all the good stuff Angular offers running smoothly within the Overwolf Environment. (Edit 2018–07–11: For now I keep my gulp-based build just a bit longer until angular 6+ cli configuration can be ejected to tinker with the underlying webpack build.)

Versions used as of the time of writing:

Angular CLI: 6.0.8
Node: 8.11.2
OS: win32 x64
Angular: 6.0.4

Let’s get started!

Using Angular-cli with Overwolf

Let’s begin with the manual approach of getting an angular app going for Overwolf.

Create a new app using angular-cli

$> npm i -g angular-cli
$> ng new --prefix=myApp ow-ng-app
$> cd ow-ng-app

Add mandatory overwolf assets

.../ow-ng-app/src/overwolf/manifest.json
.../ow-ng-app/src/overwolf/IconMouseNormal.png
.../ow-ng-app/src/overwolf/IconMouseOver.png
.../ow-ng-app/src/overwolf/LauncherIcon.ico

I’m choosing to put them into a dedicated directory for separation of concerns, as they are only relevant for Overwolf.
We will make sure they end up in the right place later on.

manifest.json

{
 "manifest_version":1,
 "type":"WebApp",
 "meta":{
  "name":"Overwolf Angular Demo",
  "version":"0.0.1",
  "minimum-overwolf-version":"0.115.2",
  "author":"Developer Name",
  "icon":"IconMouseOver.png",
  "icon_gray":"IconMouseNormal.png",
  "launcher_icon":"LauncherIcon.ico",
  "description":"Demo of an Overwolf App with Angular-cli"
 },
 "data": {
  "start_window":"MainWindow",
  "windows":{
   "MainWindow":{
     "file":"index.html",
     "transparent": true,
     "resizable": true,
     "use_os_windowing": true,
     "size": {
      "width":700,
      "height":400
      },
     "min_size": {
      "width":400,
      "height":400
     }
    }
  }
 }
}

Only changes opposed to the Demo-App:

1. removed SubWindow
2. using index.html instead of /Files/index.html
   for the MainWindow.file property
3. Adding launcher_icon

Add Overwolf Assets to build process

To include additional Assets to our distribution files, we need to add them to angular.json. We want all the files within /src/overwolf to be included in the root directory of our resulting Overwolf app.

.../ow-ng-app/angular.json:
[...]
"projects": {
    "ow-ng-app": {
      [...]
      "architect": {
        "build": {
          [...]
          "options": {
            [...]
            "assets": [
              [...]
               {"glob":"**/*","input":"src/overwolf/","output":"/"}
            ],  
[...]

This will include all files within our /src/overwolf directory and copy them into the root folder of our output.

Developing the App

Now that we are set with a basic project, we just need to run it with Overwolf and start coding.

Problem here is, that $> ng serve is not aware of our need to run it with Overwolf. I hope to get into solving that problem in a later part of this series, for now we need to be complacent with some more manual work.

Run the build process

$> ng build --watch

will have to do for now, doing all the things but not serving it on a webserver.

Run the app

Our app now lives in .../ow-ng-app/dist/ow-ng-app/*

We can simply load that directory as unpacked Extension from the Overwolf Packages page overwolf://packages

Final code for this article can be found on Github

So now we got a basic understanding how to get a project running that we can launch on Overwolf while using the Angular-cli goodies.

In Part 2 of the series, we’re going to setup Live-Reload, making our live just a little more comfortable while developing our app.