Skip to main content

Building your first app

This article will take you step by step to scaffold your first app.

Prerequisites​

Make sure you have these prerequisites installed before developing your app:

note

Make sure that all your prerequisites are configured and installed globally.

Scaffolding your first app​

This section will get you started with building your first app.

Step 1: Download the sample app​

Download the sample app from:

https://github.com/overwolf/ow-electron-packages-sample

App components​

The sample app provided consists of the following components:

  • Main process—acts as the application's entry point and runs in a Node.js environment.
  • Renderer process—responsible for rendering web content and should behave according to web standards.
  • Overwolf services—Overwolf specific APIs and services.

Step 2: Installing the prerequisites​

To set up this app, you must first install its dependencies using yarn, npm, or any other package manager).

From within your project run:

npm install

Step 3: Quick start​

To run the app in development mode, simply run the build script, followed by the start script from the package.json.

npm run build
npm run start
Windows users
  • On Windows, make sure your command line has administrator privileges.
  • After you have run the npm run build script, you can use the included .vscode/launch.json file by pressing F5 on your keyboard (for default vscode settings).

Step 4: Production build​

To build the app for production, you must run the build script, followed by the build:ow-electron script from the package.json. For example:

npm run build
npm run build:ow-electron

Customizing your app​

Use the following sections to customize your app.

Adding/removing ow-electron packages​

In order to add more/remove certain ow-electron packages from the project, simply edit the overwolf.packages array in the package.json file. For example:

{
  ...
  "overwolf": {
    "packages": [
      "gep",
      "overlay"
    ]
  },
  ...
}

You can include the following packages:

  • GEP—live game data events.
  • Overlay—explanation here.
  • Recorder—module used for screen recording apps. (currently in beta)

Unique app ID​

Every Overwolf application (ow-electron or Overwolf native), has a unique app id. This unique id is automatically generated, and is based on the app's name, and the app's author's name.

In ow-electron, these fields correspond to the following fields in the package.json file:

  • App name - The productName (defaults to name if missing) properties
  • App author - The name field under the author field.
Partial package.json with the relevant fields
{
  ...
  "name": "ow-electron-sample-app",
  ...
  "author": {
    "name": "Overwolf"
  },
  "productName": "real-ow-electron-sample-app",
  ...
  "build": {
    ...
    "productName": "unrelated-name-passed-to-builder",
    ...
  },
  ...
}
Unique app ID

Unique app ids are used for ads optimizations, as well as for optional anonymous analytics reports that you may review on our developer's console.

Fetching your app ID​

Once your app has loaded, you can fetch the app ID through the API as follows:

import app from 'electron';
...
app.whenReady().then(() => {
  const appID = process.env.OVERWOLF_APP_UID;
});

Note that this environment variable will only exist once the app is ready.

Monetizing your app​

You have various methods of monetizing your app using Ow-electron. You can choose to show ads or build an app with a subscription model. For more information, see Monetize your app.

Run the sample app with the --test-ad flag to enable Overwolf's test ad.

Anonymous analytics​

Anonymous analytics report useful information to the developer console. From the console you can generate reports about different aspects of your app. This includes:

  • Daily active users.
  • Daily installs/uninstalls
  • App crashes.
  • Many more analytics.

For more information, see Anonymous analytics.

Next steps​

Now that you have launched and customized the Overwolf sample app to your needs, you are ready to start to develop your app. Follow the App creation process and submit your idea and join an active developers community.

For more information about app development see: