The main
branch of this repo is auto-deployed to:
Each pull request will have a unique demo url which can be found in the comments of the pull request.
This assumes you have git
and yarn
installed.
Clone the repo:
git clone https://github.com/votingworks/bmd.git
Install dependencies:
yarn install
Run the app in your local browser:
# Run VxMark by default
yarn start
# Or run VxPrint
VX_APP_MODE=VxPrint yarn start
Hey, we’re stoked that you’d like to contribute. Please let us know how we can help you contribute.
Fork this repo: https://github.com/votingworks/bmd
Clone the repo locally:
git clone https://github.com/YOUR_GITHUB_USERNAME/bmd.git
Optionally, if you already cloned the main repo, you can update your local
repo to have two remotes, votingworks
for the main repo and origin
for
your fork:
git remote rename origin votingworks
git remote add origin https://github.com/YOUR_GITHUB_USERNAME/bmd.git
Create a branch for the feature/bug/etc:
git checkout -b name-of-your-branch
Run the app:
yarn start
In a second console window, run the tests:
yarn test
Tests default to watch-mode: only tests related to changed code will run. Use the available commands in watch-mode to run the tests you want.
Add features, fix bugs, etc. and then use git
to commit your changes in
logical commits.
There is a pre-commit hook (see lint-staged
in package.json) which will run
linting and code formatting scripts. You can run these manually with these
commands which are found in the package.json
scripts:
yarn lint
yarn format
Using Visual Studio Code? Autorun linting and code formatting by installing/enabling/disabling the following plugins (which will pick up the respective config files in this project):
TSLint
as ESLint handles this functionalityESLint
for (ECMAScript) JavaScript lintingstylelint
for modern CSS lintingPrettier - Code formatter
for code formattingCheck for test coverage. When you push your branch to github, CircleCI will run all the tests and check for test coverage. To check this yourself, run:
yarn test:coverage
In the root of the project there is a coverage
directory. Open
coverage/lcov-report/index.html
in a browser to navigate the files to view
test coverage.
Push your branch to your fork on Github.
Create a pull request to merge your branch into voingworks/bmd/main
. Once
the pull request is created CircleCI will automatically run all the tests to
ensure the app is working correctly.
The VotingWorks maintainers will
yarn install
- Install the dependencies.yarn start
- Run the app locally.yarn test
- Run tests in interactive mode.yarn test:coverage
- Run all tests and update test coverage report.See package.json
for all available scripts.
This project was bootstrapped with
Create React App for TypeScript.
It uses Styled Components for styles
(and some css
files too). ESLint is configured to lint
Javascript and TypeScript files, and format code using
Prettier. stylelint is used to
lint modern css. Jest,
dom-testing-library,
react-testing-library,
and Cypress are used to test components and
end-to-end user flows.
Center for Civic Design and Oxide Design consulted on the initial design of this project. Thanks CCD and Oxide!