Skip to content

New Developer Introduction

Jump to bottom
Ben Clark edited this page Jan 31, 2023 · 1 revision

Want to get started with RapiD? Excellent!

What should I know?

Here is a list of things that will help you come up to speed, roughly in order:

  • Experience with JavaScript
  • Experience with CSS
  • Experience with the Pixi.js library (but only if you want to actually modify the map renderer)
  • Experience with the d3 library and ecosystem

Notable branches:

  • main is our 2.x development branch. This branch uses Pixi.js and much less dependent on d3. For background on why this branch was created, see our announcement about this work.

  • rapid-v1.x is our legacy branch. This branch has No pixi/webGL and depends on d3 for everything.

Getting Started

First, clone the branch you need. cd into the repo directory, then run the following:

npm run clean npm install npm run all npm run quickstart

You should have a server running on localhost:8080, connect to it by pasting http://127.0.0.1:8080 into your browser bar (we use chrome most often).

VS Code Debugging setup.

IF you're using VS Code, a fast way to debug is to have VSCode spin up a special instance of chrome for you with debug flags. This will run as a separate chrome app from your default chrome that you may already be running.

The simplest way to do this is to use the VSCode 'Run' Menu. Use 'Run -> Add Configuration' and select 'Chrome: Launch'.

This will add the following default entry to your launch.json:

{
  "name": "Launch Chrome",
  "request": "launch",
  "type": "chrome",
  "url": "http://localhost:8080",
  "webRoot": "${workspaceFolder}"
},

Change this entry so that it instead reads:

{
  "name": "Launch Chrome",
  "request": "launch",
  "type": "Launch Chrome on localhost",
  "url": "http://127.0.0.1:8080/",
  "webRoot": "${workspaceFolder}/dist/"
},

This will let you 'launch' an instance of chrome while the npm quickstart server is running. You can set a breakpoint inside the IDE and the chrome instance will 'hit' the breakpoint, allowing you to stay inside the IDE while you reason about the code.

Special note

If you are running multiple copies of rapid at once, you can modify the scripts/server.js file to change its port number from 8080 -> 8081, etc. You will also of course need to modify the launch.json config to match.

Clone this wiki locally