Overwolf, Angular and (CL)I // Part 2

Making Live-Reload work with Overwolf and Angular-CLI

Jonas Krispin

4 min readJun 15, 2018

In Part 1 of this series, we set up basic usage of the Angular-CLI for Overwolf Development.

Now let’s explore how we can make live-reload work for our project.

Code so far can be found on Github

The Problem

For regular Web-Development, Angular-CLI provides live-reload out of the box with the $> ng serve command. It starts a development Server that supports live-reload and serves our files we want to display in the Browser.

For Development of an Overwolf App, there are several points that prevent us from using this out of the box:

Within Overwolf, files are not served from a web-server, but loaded locally. We are not able to simply load them from a local Webserver, but they are served from an adress like overwolf-extension://<extension uid>/index.html
When using $> g serve, files are build in Memory to be served on an internal webpack-dev-server, which we would request from while developing in a regular Browser. Therefore we have no way on accessing updated files from within Overwolf, without Iframe based App-architectures, which I won’t get into right now.
ngg does not include a possibility for a live-reload option as $> ng-serve does, meaning we need another way to include our live-reload client into our App, without having to manually include it.
live-reload needs a server that watches for file-changes and communicate with the live-reload client for a Frontend reload.

Solution

We don’t want to tinker with the Angular-CLI internals (yet) and we don’t necessarily want to use $> ng eject, having to work with the webpack configuration directly.

So let’s build around the command we now works for us: $> ng build

Note: this is a somewhat naive solution for now that might need some refinement when facing more complicated build-processes, but the basic approach would be the same.

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!

Setting up Live Reload for our Overwolf App

Let’s start with live-reload.
We need a server and add the client-script into our App.

$> npm i --save-dev livereload

Adding the npm scripts

.../ow-ng-app/package.json{
  [...]
  "scripts": {
    [...]
    "dev-build": "ng build --watch",
    "livereload": "livereload ./dist/ow-ng-app -x manifest.json"
  },
  [...]
}

Now we can use $> npm run livereload to start our live-reload server with default configuration, watching for changes in our distribution directory. We exclude the manifest.json, as we need to reload our App through the Overwolf Package page anyway if we change that.

The Idea here is to let $> ng build --watch do it’s work, and when it decides to update the output files, we rely on our live-reload server to tell our App to reload.

To make usage of this a bit more convenient, let’s wrap them in another npm script, using concurrently. Concurrently allows us to run those tasks in parallel, as both tasks won’t finish until we’re done with our dev-session, and windows isn’t great for handling that.

$> npm i --save-dev concurrently

Lets add following script to our package.json as well:

"dev": "concurrently --kill-others --names \"BUILD,LIVERELOAD\" \"npm run dev-build\" \"npm run livereload\""

--kill-others makes sure when one of the scripts exits, all other exit as well

--names "BUILD,LIVERELOAD" just provides us with some more speaking console output, prefixing the output for each script with the respective name

After that we add all the scripts we want to execute in parallel.

So now we are able to get our app build, and watched by our Live-Reload Server by using $> npm run dev, easy as that!

Adding the Live-Reload client

As mentioned before, we have two parts of Live-Reload: The Server, and the Client.

To add the client to our Frontend we add following to our project:

.../ow-ng-app/src/tooling/livereload-ow.tsconst script = window.document.createElement('script');
script.src = 'http://localhost:35729/livereload.js?snipver=1';
window.document.head.appendChild(script);

In the rare case, that you don’t run your Live-Reload Server on localhost:35729, you propably know what you’re doing anyway and to change the srcipt.src acchordingly.

To add this script to our App, we import it within our environment files as needed

.../ow-ng-app/src/environments/environment.ts[...]/** Live-reload client script for development */
import '../tooling/livereload-ow';

If you have a setup with more environments than default and productions, again: you propably know what you’re doing and to add the import to those that need it.

This will add the Live-Reload Client to our app when we don’t run our production build ( $> ng build --prod ). The environment file will be replaced by default when building for production, therefore our import will not end up in our production build.

.../ow-ng-app/angular.json{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  [...]
  "projects": {
    "ow-ng-app": {
      [...]
      "architect": {
        "build": {
          [...]
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              [...]
            }
          }
        },
        [...]
      }
    },
    [...]
  },
  "defaultProject": "ow-ng-app"
}

Final code for this article can be found on Github

Now we can use $> npm run dev when we start our dev-session and hack away without getting annoyed by manual reloading of our App on changes — making us happier and hopefully more productive :)

In the next part, we will explore Unit-testing with the Overwolf Environment in mind and maybe already go into e2e testing too while on it.