lego-webapp

Next-gen frontend for abakus.no

Getting Started

Installing dependencies

$ yarn

Starting the client

$ yarn start

Everything should be up and running on localhost:3000.

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

Running without a local backend

It is possible to run the frontend without running the backend, by using our staging environment:

$ yarn start:staging

Server side rendering

In production we use server side rendering. Due to bad hot reloading, we don't use it by default in dev. The server side renderer can be started by running:

$ yarn build
$ yarn ssr # or yarn ssr:staging

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
SSR_API_URL
SSR_BASE_URL

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

essoen / lego-webapp