lego-webapp

Next-gen frontend for abakus.no

Getting Started

$ brew install yarn flow
$ yarn
$ yarn start

Everything should be up and running on localhost:3000.

For instructions on how to run the backend, see webkom/lego.

Build for production

$ yarn run build
$ NODE_ENV=production node dist/server.js

Environment Variables

NODE_ENV
API_URL
WS_URL
BASE_URL
SEGMENT_WRITE_KEY
CAPTCHA_KEY
STRIPE_KEY
RAVEN_DSN
RELEASE
ENVIRONMENT
HOST
PORT
SERVER_RAVEN_DSN

Documentation

For simple component documentation we use react-docgen, with react-styleguidist for easy style guide generation.

Start dev server (with hot reload), and go to localhost:6060.

$ yarn styleguide

To build a static version of the documentation, run:

$ yarn styleguide:build

Text Editor

Atom with these plugins installed provides the best developer experience:

$ apm install nuclide pigments linter-eslint linter-stylelint prettier-atom

Prettier

We use prettier for JS auto-formatting. When the code isn't formatted with the prettier version in package.json, the tests will fail. We highly recommend using format on save via an editor plugin, for example prettier-atom and vim-prettier.

You can also format the code via yarn prettier.

Tests

Run all the tests and check for lint errors with the command:

$ yarn test

For development you can run the tests continuously by using:

$ yarn run test:watch

A coverage report can be generated by running yarn test -- --coverage.

Flow

Flow is gradually being introduced so we can reap the benefits of static type checking.

Run flow in the project directory to check if everything is good.

Linting

ESLint and Stylelint is used to maintain high code quality and a unified code style. Please run them before committing code.

To run the linter, use:

$ yarn run lint

# or
$ yarn run lint:js
$ yarn run lint:css
$ yarn run lint:prettier

Some ESLint errors can be fixed by running

$ yarn lint:js -- --fix

Some formatting errors reported by prettier can be fixed by running

$ yarn prettier

ph3b/lego-webapp