kewitz/opencollective-frontend

Open Collective Frontend. A React app powered by Next.js.

Open Collective Frontend

Foreword

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!

Development

Prerequisite

1. Make sure you have Node.js version >= 10.

• We recommend using nvm: nvm use.

Install

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

Environment variables

This project requires an access to the Open Collective API. You have two options:

• cp .env.staging .env to connect to the Open Collective staging API
• cp .env.local .env to connect to the API running locally

If you decide to pick the local strategy, make sure you install and run the opencollective-api project.

Start

npm run dev

Contributing

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.

Styleguide

We use React-Styleguidist to develop and document our React components in isolation with styled-components and styled-system.

Start

npm run styleguide:dev

Create a new component:

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.

Deploy

If you have access the Open Collective now team account:

npm run styleguide:deploy

Tests

You can run the tests using npm test or more specifically:

• npm run test:src for pages and components
• npm run test:server for api
• npm run test:e2e for end-to-end tests using Cypress

To update the Jest snapshots, run npm run test:update To update the graphql schema for eslint, run npm run graphql:get-schema:dev

Localization

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));

Deployment

To deploy to staging or production, you need to be a core member of the Open Collective team.

(Optional) Configure Slack token

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:

1. Go to https://api.slack.com/custom-integrations/legacy-tokens
2. Generate a token for the OpenCollective workspace
3. Add this token to your .env file:

OC_SLACK_USER_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Staging (heroku)

# 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/

Production (heroku)

# 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/

Discussion

If you have any questions, ping us on Slack (https://slack.opencollective.org) or on Twitter (@opencollect).