Dev Setup: General Information

Recommended Installation: Docker

We have a Docker image for CodeCombat, and it is easy to get started by using docker-compose. We recommend that you use Docker instead of the local installations, because it is easier and faster (unless your internet speed is very slow).

• Docker Guide

Local Installation Guides (advanced)

Our installation guides are split into per-OS guides which will give you step-by-step instructions on how to get your development environment set up. We recommend following the Docker Guide, but you can run CodeCombat locally on your machine if you prefer that.

• Mac Setup
• Windows Setup (uses WSL)
• Linux Setup

General Setup Instructions

For power users who know what they're doing

This is the general overview for what you need in order to set up the development environment. For more specific instructions with recommended paths to success, see the installation guides listed above.

1. Install Node.js 14, npm 6.14, and Git
2. git clone this repository.
3. npm install --also=dev in the repository's root directory.

Running The Environment

After installation, you can run your development environment as a proxy to CodeCombat's production servers. Enter the following commands in separate terminals:

1. npm run proxy (routes all server calls to CodeCombat's production servers)
2. npm run webpack -- --watch (compiles app files to public folder continuously, refreshing the browser window on changes)

If you don't need webpack to restart on changes or build files, you can simply run npm run proxy instead.

---

Issues

There's a list of dev setup issues and workarounds here. If you have a problem and we figure out how to get around it, please help by updating this page.

Working in the environment

You don't need any particular tools or editors to work with CodeCombat. We mostly use Visual Studio Code and Webstorm to write our code in. Most of us use Mac, but we are also doing a little on Windows with WSL2, and Linux is used for our servers.

Whichever editor you use, be sure to disable removing trailing whitespace from files, at least for pug files. Sometimes (although rarely) these have significant whitespace.

Live-coding

If Webpack is running and you make code changes, Webpack will reload the page automatically. So open the page you are working on in your browser, make changes in your editor, save, and the page will refresh so you can see the changes. Try to make whatever you're working on be the first thing you see when you open the page, so you don't have to lose focus on your editor while iterating.