Overwolf Modern React Boilerplate

Quickstart · Project structure · Overwolf Custom Hooks · Remote Debug · Contribution ·

This is the official Overwolf Modern React Boilerplate template for Create React App.

OMRB is a free and open source opinionated boilerplate based on React that helps developers create fast, modular and modern overwolf app.

Technology

React JS · Redux ToolKit · I18next · Redux Devtools - Remote · Overwolf Api

Use a Modern Stack for Every App. Create a uniform workflow for you and your team without ejecting the Create React App code.
Internationalization. Support for multiple languages without having to change code.
Performance Is Baked In. Custom hooks with functions and variables memoized for common uses in overwolf development.
Build. Folders and structure ready for use in the overwolf store.

🚀 Quick Start

Prerequisites

Install Node.js
Install npm

To use this template, add --template overwolf-typescript-redux when creating a new app.

For example:

npx create-react-app my-app --template overwolf-typescript-redux

# or

yarn create react-app my-app --template overwolf-typescript-redux

For more information, please refer to:

Getting Started – How to create a new app.
User Guide – How to develop apps bootstrapped with Create React App.

💼 Project structure - Feature Folder.

Folder-by-type only works on small-scale projects. Folder-by-feature is superior in the majority of cases, is better due to its scalability, stands out in high modularity and cohesion. It allows us to play with the components' scope.

.
|--- public
|    |--- app/
|    |-------IconMouseNormal.png
|    |-------IconMouseOver.png
|    |-------TaskbarIcon.png
|    |-------desktop-icon.ico
|    |-------manifest.json
|    |--- store/
|    |-------description.txt
|    |-------store.json
|    |--- index.html
|--- src
|    |--- app/
|    |-------App.css
|    |-------App.tsx
|    |-------constants.ts
|    |-------rootReducer.ts
|    |-------store.ts
|    |--- components/*/**.tsx
|    |--- features/*/**.tsx
|    |--- typings/*/**.d.ts
|    |--- locales/
|    |-----------de/**/*.json
|    |-----------de/index.ts
|    |-----------en/**/*.json
|    |-----------en/index.ts
|    |-----------es/**/*.json
|    |-----------es/index.ts
|    |-----------fr/**/*.json
|    |-----------fr/index.ts
|    |-----------it/**/*.json
|    |-----------it/index.ts
|    |-----------ko/**/*.json
|    |-----------ko/index.ts
|    |-----------pl/**/*.json
|    |-----------pl/index.ts
|    |-----------pt/**/*.json
|    |-----------pt/index.ts
|    |-----------ru/**/*.json
|    |-----------ru/index.ts
|    |-----------tr/**/*.json
|    |-----------tr/index.ts
|    |-----------index.ts
|    |--- index.tsx
|    |--- overwolf.dev.mock.ts
|    |--- react-app-env.d.ts
|    |--- setupTests.ts
|--- .gitignore
|--- LICENSE
|--- README.md
|--- create-production-overwolf-build.sh
|--- package-lock.json
|--- package.json
|--- remote-dev-redux-devtools.js
|--- tsconfig.json
.

🐛 Remote Redux Debug.

In overwolf it is not possible to install plugins to debug the code, so the alternative is to use something remote to debug an injected code.

Install tool.

Install Redux DevTools in common browser.

Configure

if the installation is correct, a redux dev tools icon should appear in your browser's toolbar.
click into icon then choose "Open remote devTools"
click into settings option and let hostname called to "localhost" and port 8000.

Run Server Bridge

run the server that bridges the remote redux and the overwolf application.

#Change into directory
cd overwolf-modern-react-boilerplate
npm run start-remote-devtools

Start debugging

whenever you want to debug your app store, just remember to use the remote redux dev tools + the bridge server

📦 Build/Create package for overwolf store.

you need to create an optimized version of your code and the correct structure before sending it to the overwolf store. Overwolf Doc: How to submit an app

Compile

#Change into directory
cd overwolf-modern-react-boilerplate
npm run build

Organize Folder

   npm run pack-overwolf

OBS 1 this organization script was tested on the git bash and linux terminal.
OBS 2 this organization script needs to be ported to windows bash powershell.

Create .zip

the generated code is located in |--- build/**/.**
Package all build/ folders to .zip
just send your .zip code to the overwolf test team.

wellingtondev/overwolf-modern-react-boilerplate