Skip to main content

Setting up & starting dev environment

Set up environment​

To run the dev environment on your computer, you need to install

  • Docker (to run the database in a container)
  • Node and NPM (look in the root package.json in the engines section for our current versions). On Mac, the easiest way to install Node is via Homebrew.

Run npm run ci:all in root, to install all packages in all projects.

Install Chrome extensions​

For Chrome, install

  • React Developer Tools
  • Apollo Developer Tools: This lets you run queries and mutations in your Dev Tools using the authenticated context that already exists on the page. It also gives you visibility into Apollo Client's caching and query history.

Set up IDE​

We support WebStorm and Visual Studio Code (VS Code) with workspace and IDE settings. If you use one of these 2 IDEs, configurations will be automatically loaded (set the repository root as the project root).

For VS Code, please install the "Recommended from Project" extensions. They should be automatically recommended in the Extensions sidebar, but you can also find them in /.vscode/extensions.json.

Install Prettier​

Please run Prettier automatically and on all changed files prior to committing/merging, to reduce unnecessary formatting changes.

  • If you use VS Code, the extension should have been installed above. It should work automatically.
  • If you use WebStorm, enable Prettier in Preferences > Languages & Frameworks > JavaScript > Prettier.

Prettier configuration is managed in the repository; please don't use your own Prettier config.

Start services in dev mode​

Start services individually​

All of these require separately running docker-compose up to start the database.

Products

  • npm run dev: Can be used inside each project to start the given service (platform, staff, and web).

Supporting services

  • Docs
    • cd docs && npm i && cd ..: The dependencies for the docs aren't installed as part of npm ci:all, which you'll run in a few steps, so you'll need to temporarily go into the docs directory and install them.
    • npm run dev --prefix docs: Run Docs.

The underscored versions of these commands only start the singular service (e.g. npm run _dev:staff only starts Staff, not Platform too).

Services and ports​

Starting for the first time​

# Install dependencies in root, and
npm ci;

# Create an empty local env variables file in Platform
touch .env.local;

# Start Postgres
docker compose up;

# After Docker starts, migrate and seed the database
npm run db:data:restore;

# Start Everything
npm run dev;

# You're good to go!

GraphQL hooks codegen​

GraphQL codegen generates useful TypeScript types and Apollo queries/mutations from gql tagged strings found in code.

  • If you add or make a change to a query or mutation, you need to run gql:codegen to make sure the relative types and hooks get updated / added. This can be done from the project itself or from the root, using npm run init.

To start database over​

The local dev database is persisted by Docker between starts. To start with a fresh database, delete the old database volume and then run migrations. In the repository root, run

docker-compose down  # Shut down existing Docker Postgres
docker volume rm dream_dream_db  # Delete the local database

docker system prune  # Clean up your Docker to save some space!

docker-compose up --remove-orphans  # Start up Postgres again

pushd platform;
    # After Docker starts, migrate and seed the database
    npm run db:data:restore;
popd;