Heroes of the Storm - Storm Map Generator

An online Storm Map file generator for Heroes of the Storm!

Try it online: https://stormmap.jamiephan.net/

What is this app?

This repo contains both server and client side code that allows for generating a *.StormMap file completely online without any editor or application installed on your computer. Simply use the web interface and you can generate your own custom map for Heroes of the Storm based on various templates.

This app is build on ExpressJS as the server and ReactJS as the front-end.

What is a Storm Map?

Heroes of the Storm is based on a StarCraft 2 Engine, which supports modding and have a map editor. Therefore, Heroes of the Storm inherited some modding features even was not documented.

Heroes of the Storm's map file is *.StormMap, which is a modified, but shares a similar structure to a StarCaft 2 Map (*.SC2Map). However, due to its a modified engine, you cannot directly export the maps from StarCraft 2 Editor into Heroes of the Storm, which you need to do some manual tweaking.

Features

• Custom Map Name (Shown on Loading Screen)
• Use Try Mode 2.0 Maps or official maps as template
• Edit any game integer, boolean, real numbers, string variables
• Add / Edit in game texts (such as tooltips, button text, etc)
• Include various AI composition (Based on AI Maps)
• Include any internal *.stormmod files (Based on S2MA/mods)
• Custom Welcome Message when map was loaded
• Settings are stored in localStorage, which persist after a F5 refresh
• Full XML Modding Editor
  • XML Files are stored in localStorage, which persist after a F5 refresh
  • Creating new file
  • Creating new file based on various examples
  • Uploading
  • Renaming
  • Deleting
  • Downloading
  • Editing
    • Monaco Editor (Same as VSCode)
    • Syntax Validation
    • Toggle Light/Dark theme

Running the App

Docker

The easiest way to run the app is to use Docker.

docker run -d -p 8080:8080 jamiephan/stormmap

Then open your browser and go to http://localhost:8080

Non-Docker

Prerequisite

• NodeJS
• Wine (Only Required if using non-windows such as Linux or MacOS)

After installed the prerequisites, run the following commands:

# Clone the repo and cd into it
git clone https://github.com/jamiephan/HeroesOfTheStorm_StormMapGenerator.git
cd HeroesOfTheStorm_StormMapGenerator

# Install Deps
npm install
# Build the client
npm run build
# Start the server
npm start 

Then open your browser and go to http://localhost:8080

Development

1. Clone the repo and cd into it:

git clone https://github.com/jamiephan/HeroesOfTheStorm_StormMapGenerator.git
cd HeroesOfTheStorm_StormMapGenerator

2. Install both server and client dependencies:

npm install

3. Starting Server:

npm start

Since we have a seperate instance of client running below, it is not necessary to build the client via npm run build. The client (localhost:3000) will proxy the API request to the server (localhost:8080).

4. Starting Client:

# On another terminal/CMD:
npm run start:client

Now you should have two servers running:

• http://localhost:8080 = The server
• http://localhost:3000 = The react client hot reload server, which proxy request to the server above

Server Environment Variables

All Environment Variables configuration is stored in the .env file.

You can either rename .env.example to .env, or by setting the environment variable from your shell:

SET PORT=80

Here are the used environment variable that you can configure:

Variable	Default	Usage
PORT	8080	The port of the server running on
API_CACHE_EXPIRE	1800	Seconds until the cache expire for Github API calls. (1800 = 30 minutes)
MAP_FILE_CACHE_EXPIRE	3600	Seconds until the downloaded map cache expires. (3600 = 1 hour)
LOG_LEVEL	info	The logging level: debug, info, warn, error

In addition, there are two extra environment variables: STORMMAP_GITHUB_TOKEN and STORMMAP_GITHUB_USERNAME, which is used for increase the Github API call limit by using your Personal Access Token. This is recommended to use it for development.

Note: These only applies to the .env file at the root directory of the project, it does not applies to the client's .env file which located at client/.env.

Building

Build the app

# Build the client
npm run build
# Start the server
npm start

Building the Docker image

# Build a docker image with the tag name "stormmap"
docker build . -t stormmap
# Start the docker container at port 8080
docker run -d -p 8080:8080 stormmap

The image name is stormmap and the port is 8080, which you can change to whatever you desire, e.g to 80:8080 for port 80)

Legal Stuff

Licence: MIT

Storm Map Generator is a personal project and is not affiliated, associated, authorized, endorsed by, or in any way officially connected with Blizzard or Heroes of the Storm.