webcompat-metrics-client

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

Quick Setup

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

cd webcompat-metrics-client

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

Production

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

Configuration

Environment variables

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.

Testing

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
# only do linting:
npm run lint
# only run DOM/React tests:
npm run 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

How to Add a New Dashboard

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.

Code of Conduct

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.

License

MPL 2