Overwolf Basic Sample App
In this article, we'll use an example in order to learn how to build Overwolf apps that respond to real time game events and display content in an overlay while playing. If you are new to the concept of Overwolf apps, this is a great place to get started, and you can use it as a base for your own project.
The sample app's functionality is pretty straightforward: It auto-launches when the user launches Fortnite, just like any other Fortnite app, and reads all real time game events as you play. To demonstrate overlay features, the sample app prints all in-game event data collected into an overlay-based component.
The sample app is built with JS code and TypeScript. An official Vue, React, and Angular version will be added soon. Until then, check our community snippets page for an unofficial Vue version and other code samples, like React boilerplate for Overwolf apps and more.
Download
It's highly recommended to follow the below steps for setting up the sample app, including download the source code and built it manually.
For those who need it, here is a direct download link to the latest version:
Video guide
You can find a video tutorial that guides you on downloading, building, and using the sample app.
Sample App Functionality
For demonstration purposes, the sample app is configured for Fortnite. It loads when Fortnite starts and reads Fortnite in-game events. You can easily customize this example to fit other games.
The basic functions our sample app demonstrates:
Automatically launch when the game is loaded.
After registering to the overwolf.games.events API, the app can receive real time events from the game.
Identify specific events and respond as defined.
Define a custom hotkey to be used in-game.
Interact between app windows.
Background controller that manages data transfers.
Setting up
In order to run the app, you must first complete several steps.
1. Install Overwolf Client
Download and install the Overwolf desktop client.
2. Install NodeJS
Download and install NodeJS.
After installing, run the following commands in your favorite IDE terminal (Visual Studio Code is free and easy to use)
node -v //returns your node version, if installed
npm -v //returns your npm version, if installed
If they run successfully, proceed to the next steps.
3. Download the source code
This repository contains the Overwolf sample app.
Download the app's source code from the repository as a zip file, and extract it to a new folder on your machine.
4. Build the app
In your terminal, run the following commands:
cd ts //the path to your extracted 'ts' folder here
npm install //install all modules listed as dependencies in package.json
npm run build //create a "dist" folder with the compiled components
5. Install the app as "unpacked extension"
Usually, all the apps in the Overwolf app store are OPK packages that can be installed with a double-click. Unlike that, while you are developing an app, you want to load the unpacked code, change it, and test it regularly.
For this reason, in addition to the OPK installation, you can load the app as "unpacked extension":
(Note that to do that you have to whitelist your OW username as a developer).
Open the Overwolf desktop client settings (by right-clicking the client and selecting "Packages"
Or by clicking on the wrench icon in the dock and going to the "About" tab => "Development Options").Click on "Development options".
In the opened window, click on "Load unpacked extension" and select the extracted 'ts/dist' folder.
This will add the app to your Overwolf dock.Make sure you are logged in to the OW client. Otherwise, you will get an "Unauthorized App" error message. (Click on the "Appstore" icon in the OW dock to login to the OW client).
Click on the app's icon in your OW dock to run the app.
important
Each app has a unique id (UID) that is generated using the "name" and "author" strings. Once an app is published on the Appstore, its UID can't be changed.
The same goes for the sample app, so make sure not to edit the author or app name in the manifest. It will prevent loading the app as an unpacked app.
Screenshots
This is how the sample app's main window looks like: a desktop window disaplying some textual information.
The real action will take place in the in-game window - once you launch Fortnite, the desktop window will be replaced with this in-game window:
This is the injected in-game window overlayed on your game screen. The window displays game events, collected data, and a sample advertisement for monetization.
When you hit the close button, the app will close itself.