Gazebo

We believe that everyone should have access to quality software (like Sentry), that’s why we have always offered Codecov for free to open source maintainers.

By making our code public, we’re not only joining the community that’s supported us from the start — but also want to make sure that every developer can contribute to and build on the Codecov experience.

Gazebo is the Front-end SPA of Codecov. It's a greenfield project we kicked off in November 2020 with the ambition of rewriting all the legacy pages from codecov.io and codecov-client in a single repository with a more modern approach.

We decided to use React from our investigation here

This project was bootstrapped with Create React App.

Prerequisites

We recommend using the same Node version as in CircleCI: Node (Latest LTS). You can refer to the .nvmrc in the root folder.

In order to use the Makefile to build a Docker image, you'll need to set an environment variable for CODECOV_GAZEBO_IMAGE. Set it to a string that will be used as a Docker image name to build to.

Run the project

To run the project in development mode

> yarn
> yarn start

Note: The first run of yarn start may take 5-10 minutes to finish building.

The page will reload when you make edits. There is a local proxy to the staging API so you can develop against it. You can overwrite it by creating a .env.local file with it with the following:

PROXY_TO=http://localhost:5100

Run tests

You can run the tests with

> yarn test

This script is using Jest, so any valid Jest options can be added to the command.

We are using the Testing Library to test the React components.

Linting

> yarn lint

will lint the whole project.

We have some extra rules to keep the code more maintainable:

Complexity of max 5 per function: to prevent functions with a lot of of different outcome
10 max statements per function: to prevent a function doing too much
2 level of nested callbacks: to prevent complexity within nested functions
Mandatory prop-types: as we don't have a Type system, this rule will help us have documented components

Build the application for production

> yarn build

will build the application in the build folder. We currently use Netlify for deployment, which will be subject to change.

Config

The config are centralized in one place in the file config.js. The file merges multiple configuration in one object:

hardcoded configuration in that file
the configuration from process.env which is set on build-time
the configuration from window.configEnv which can be set on start-time

process.env

Gazebo supports env files by default which become environment variables at build-time.

To override environment variables when working locally create a .env.local file, this file is ignored by git.

You must prepend env variables with REACT_APP_.

.env.local

PROXY_TO=https://stage-api.codecov.dev
REACT_APP_MY_CUSTOM_VAR=foobar
REACT_APP_BASE_URL=http://localhost

/src/somefile.js

import config from 'config'
console.log(config.MY_CUSTOM_VAR) // foobar

Currently there's three env variables you may want to change when working locally:

PROXY_TO (Change where Gazebo api services are pointing to)
REACT_APP_MSW_BROWSER (boolean to enable mocking api requests in browser, see How to mock HTTP responses in the browser)
REACT_APP_BASE_URL (This is the base url where the legacy web container resides, needed for login/signout links)

How to mock HTTP responses in the browser:

Sometimes when working locally it helps to control API responses. For edge cases, for investigating support or on call incidents.

If you need to mock a response add REACT_APP_MSW_BROWSER=true to .env.local to enable browser mocks. Mocks are located in src/mocks/handlers

Example:

import { rest } from 'msw'

export const handlers = [
  rest.get('internal/user', (req, res, ctx) => {
    return res(ctx.status(200), ctx.json({ mock: 'data' }))
  }),
]

Read more at the official documentation.

Contributing

This repository, like all of Codecov's repositories, strives to follow our general Contributing guidelines. If you're considering making a contribution to this repository, we encourage review of our Contributing guidelines first.

lforst/gazebo