Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time
December 30, 2022 18:30
September 27, 2018 15:44
December 27, 2017 15:19
December 30, 2022 18:30
November 23, 2022 15:12
December 27, 2022 21:07
February 8, 2023 15:05


Open source frontend for

MIT last commit coontibutors Build Status

Issues: We track issues in the main repo of LEGO

open issues

Quick access

  1. Quick Start
  2. Development
  3. Deployment (webkom/lego#deployment)

Quick Start

$ yarn # Install dependencies
$ yarn start:staging # Start webserver with development backend

Everything should be up and running on localhost:3000. The :staging suffix points the webserver at a hosted development backend.

Running with local backend

First, you need to have the django backend running, see webkom/lego.

$ yarn start # Start webserver with local backend

Server side rendering (Optional)

In production (live) 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

The webserver running the frontend can take many optional environment variables. Docs can be found at config/, and default can be found at server/env.js and config/env.js.


We use some conventions and tools for our JavaScript/React development.

  • prettier for JS code formatter.
    • yarn prettier
  • eslint for finding and fixing problems in your JavaScript code.
    • yarn lint
  • TypeScript for type checking.
    • yarn types

We recommend getting plugins/extensions in VSCode or Vim so the code auto-formats, and automatically prompts you with errors. When you submit code to Github the CI server will automatically run all the commands above to check that your code is up to par.

Unit tests

Unit tests (jest)

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.

Cypress E2E (End-to-end tests)

End to end tests (cypress)

In order to run end to end tests, you need to run both lego-webapp and lego. Lego can be found here: Lego is assumed to have a clean development database, follow the steps below to achieve that.


$ cd ../lego
$ docker compose up -d # Start all services that lego depends on
$ python initialize_development # Initialize and load data sources (postgres)
$ docker compose restart lego_cypress_helper # The cypress helper resets database between every test and might need this restart to function correctly
$ python runserver

If you already have the backend setup, make sure your database is clean

python reset_db
python migrate
python load_fixtures
docker compose restart lego_cypress_helper # Make sure the copy is of the clean database


Start up the node server

$ yarn start

And start cypress in another terminal

$ yarn cypress open

Alternative: You can also run the node server with server side rendering enabled. This is how the tests are run on CI. To do this, you build and start the server

$ yarn build
$ yarn ssr

And you run cypress headlessly (no visible browser) in another terminal

yarn cypress run


In order to run the payment end-2-end tests, a few extra steps are required. First one has to install the stripe cli, log in and then run

$ stripe listen --forward-to localhost:8000/api/v1/webhooks-stripe/

In addition, the backend needs to run with two environment variables.


The webhook is obtained when running the stripe command above, while the test key can be obtained from the stripe dashboard.

Lastly, one has to run the frontend without captcha:

$ SKIP_CAPTCHA=TRUE yarn start


To debug chunk size (size of the javascript sent to the browser), run

$ BUNDLE_ANALYZER=true yarn build


We use drone as our CI/CD system. The server runs at This repo is public, so anyone can see the status at

Since the repo is public and we use a lot of secrets in the pipeline, we require the pipeline to be verified with a signature from drone. To obtain this, use the cli:

drone sign webkom/lego-webapp

You need to login to retrieve the signature. Get the login data from your user settings.