If you see a step below that could be improved (or is outdated), please update the instructions. We rarely go through this process ourselves, so your fresh pair of eyes and your recent experience with it, makes you the best candidate to improve them for other users. Thank you!
- Make sure you have Node.js version >= 10.
- We recommend using nvm:
nvm use
.
We recommend cloning the repository in a folder dedicated to opencollective
projects.
git clone git@github.com:opencollective/opencollective-frontend.git opencollective/frontend
cd opencollective/frontend
npm install
This project requires an access to the Open Collective API.
By default, it will try to connect to the Open Colllective staging API, you don't have to change anything.
If case you want to connect to the Open Collective API running locally:
- clone, install and start opencollective-api
- in this project, copy
.env.local
to.env
.
npm run dev
Code style? Commit convention? Please check our Contributing guidelines.
TL;DR: we use Prettier and ESLint, we do like great commit messages and clean Git history.
We use React-Styleguidist to develop and document our React components in isolation with styled-components and styled-system.
npm run styleguide:dev
Only components with a matching example markdown file in the styleguide/examples/
directory will appear in the styleguide. After creating a new component in the src/components/
directory (i.e. src/components/NewComponent.js
), make an example markdown file to go with it (i.e. styleguide/examples/NewComponent.md
).
If you are creating a styled-component, you will need to annotate the export statement for React-Styleguidist to recognize it:
/** @component */
export default NewComponent;
Check out the React-Styleguidist docs for more details about documenting components with JSDoc annotations and writing interactive code examples.
If you have access the Open Collective now
team account:
npm run styleguide:deploy
You can run the tests using npm test
or more specifically:
npm run test:jest
for pages and componentsnpm run test:server
for apinpm run test:e2e
for end-to-end tests using Cypress
To update:
- Jest snapshots: run
npm run test:update
- GraphQL schema for eslint: run
npm run graphql:get-schema:dev
To add a translation to a new language, copy paste the en.json
from src/lang
and rename the copy using the 2 or 4 letter code for your country/language (e.g. fr-BE.json
or fr.json
).
You will also need to copy paste the last line in scripts/translate.js
, and replace ja
with your 2-4 letter locale code.
fs.writeFileSync(`${LANG_DIR}ja.json`, JSON.stringify(translatedMessages('ja'), null, 2));
To deploy to staging or production, you need to be a core member of the Open Collective team.
Setting a Slack token will post a message on #engineering
with the changes you're
about to deploy. It is not required, but you can activate it like this:
- Go to https://api.slack.com/custom-integrations/legacy-tokens
- Generate a token for the OpenCollective workspace
- Add this token to your
.env
file:
OC_SLACK_USER_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
# Before first deployment, configure staging remote
git remote add staging https://git.heroku.com/oc-staging-frontend.git
# Then deploy master with
npm run deploy:staging
URL: https://staging.opencollective.com/
# Before first deployment, configure production remote
git remote add production https://git.heroku.com/oc-prod-frontend.git
# Then deploy master with
npm run deploy:production
URL: https://opencollective.com/
If you have any questions, ping us on Slack (https://slack.opencollective.org) or on Twitter (@opencollect).