webcompat-metrics is a JavaScript application using Next.js and React to power metrics for webcompat.com

git clone https://github.com/webcompat/webcompat-metrics-client.git

cd webcompat-metrics-client

yarn
yarn dev
# or
npm install
npm run dev
# Go to http://localhost:3001

yarn build
yarn start
# or
npm run build
npm run start
# Go to http://localhost:3001

You can create a .env file (or copy .env.example) and modify variables, make sure variables are all set.

By default .env.local is loaded and injected through the Next.js configuration.

For testing DOM, React components, and other JavaScript, we use Jest, Enzyme and Sinon.JS.

For the linting JavaScript process, we use Prettier and Eslint.

For the linting CSS process, we use stylelint.

You can test the full application locally with:

# for all tests
npm run test
# or
yarn test
# only do linting:
npm run lint
# or
yarn lint
# only run DOM/React tests:
npm run test:jest
# or
yarn test:jest

If your changes will alter the appearance of any views, be sure to update the Jest snapshots before running tests:

npm run test:jest -- -u

1. Add an endpoint for the new dashboard in src/routes/index.js.

2. Add a new container directory for your dashboard in the src/containers/ directory, and build a container for it using theMetricsTemplate model.

3. Add at least one test for your new dashboard container in a __tests__ directory inside your container directory.

4. Add a new page in src/pages.

5. Import your new dashboard component to your new page in src/pages.

6. Update the Jest snapshots so that they will include your new dashboard views -- as shown in the testing section.

Webcompat has adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.

MPL 2