Skip to main content

Repository Installation and Setup

This guide discusses setting up the Polar Edge Analytics repository for local development.

Prerequisites

This guide assumes you have the following already set up (TODO: add references on how to get these configured)

  • Node.js installed; we recommend using nvm (MacOS/Linux) or fnm (Windows) to manage your Node.js version
  • pnpm installed
  • Docker installed

Get Scouting

You will first need to clone the polar-edge repository.

Once cloned, in the repository root directory, run pnpm install to install dependencies across the entire repository. We recommend installing the turbo CLI globally to make running commands easier. This can be done by running pnpm i -g turbo.

Developing applications often requires the use of environmental variables. These are used to configure various secrets and environment-specific configuration (i.e., is this running on someone's laptop or is it the hosted version of the scouting site). In order to prevent API keys from being leaked on the internet, these are stored in a file that is only on your machine and not tracked by Git.

A file titled .env.example exists in the apps/scouting folder. This is a template you can use in creating your .env.local. To create your .env.local, do the following:

  1. Create a copy of the .env.example file and rename the copy to .env.local
  2. Create a new application in the Discord Developer Portal. After creating the app, go to the tab titled "OAuth2." Copy the client id value, and set DISCORD_CLIENT_ID to this value in your .env.local. Click the "Reset Secret" button in the Discord Developer portal to get the client secret, and do the same. You should NEVER share the secret value.
  3. Still in the OAuth2 tab, add the following URL to the Redirects section: http://localhost:3000/api/auth/callback/discord
  4. Add your Discord username to the .env.local for ADMIN_USERS. This value is shown in the bottom left corner of Discord

This should be all the setup required for everyday development of the scouting application. To get the development server running, first ensure you have Docker running. Running pnpm dev:scouting or turbo dev --filter scouting will launch the database, and start up the scouting app.

Our application used Tailwind and Biome, both of which have very helpful extensions for VSCode:

To configure VSCode settings for the workspace, create a folder called .vscode in the root of the repo. Within that, create a file called settings.json (this should not be tracked by Git, as settings are user-specific). Paste the following content:

{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.biome": "explicit",
    "source.action.useSortedKeys.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[json]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[css]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "tailwindCSS.experimental.configFile": {
    "packages/ui/src/styles/globals.css": [
      "packages/ui/src/**",
      "apps/scouting/src/**",
      "apps/basecamp-fe/src/**"
    ]
  }
}

This will enable formatting on save, and set the default formatter to Biome. This also points the TailwindCSS Intellisense extension to the correct configuration file. 

Get Basecamp(ing)

WIP, docs coming soon as this is a bit more complicated...

Back to top