{"id":25826524,"url":"https://github.com/webkom/lego-webapp","last_synced_at":"2025-04-12T21:22:46.275Z","repository":{"id":21940437,"uuid":"25264897","full_name":"webkom/lego-webapp","owner":"webkom","description":"Frontend for abakus.no","archived":false,"fork":false,"pushed_at":"2025-04-11T11:26:21.000Z","size":77617,"stargazers_count":61,"open_issues_count":22,"forks_count":53,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-04-11T13:09:48.306Z","etag":null,"topics":["babel7","cypress","hacktoberfest","react","redux","ssr","typescript","vite","webpack5"],"latest_commit_sha":null,"homepage":"https://abakus.no","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webkom.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2014-10-15T17:11:11.000Z","updated_at":"2025-04-11T11:24:53.000Z","dependencies_parsed_at":"2023-10-11T10:57:25.296Z","dependency_job_id":"3d085c38-d87a-4082-a726-c8367e04e799","html_url":"https://github.com/webkom/lego-webapp","commit_stats":{"total_commits":6040,"total_committers":128,"mean_commits":47.1875,"dds":0.7708609271523179,"last_synced_commit":"8e3512643ece1a70cb8ca32e1413d0e3d8b8b3a1"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webkom%2Flego-webapp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webkom%2Flego-webapp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webkom%2Flego-webapp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webkom%2Flego-webapp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webkom","download_url":"https://codeload.github.com/webkom/lego-webapp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248409483,"owners_count":21098768,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel7","cypress","hacktoberfest","react","redux","ssr","typescript","vite","webpack5"],"created_at":"2025-02-28T15:35:07.429Z","updated_at":"2025-04-12T21:22:46.250Z","avatar_url":"https://github.com/webkom.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# lego-webapp\n\n\u003e Open source frontend for abakus.no\n\n[![MIT](https://badgen.net/badge/license/MIT/blue)](https://en.wikipedia.org/wiki/MIT_License) [![last commit](https://badgen.net/github/last-commit/webkom/lego-webapp/)](https://github.com/webkom/lego-webapp/commits/master) [![coontibutors](https://badgen.net/github/contributors/webkom/lego-webapp)](https://github.com/webkom/lego-webapp/graphs/contributors) [![Build Status](https://ci.webkom.dev/api/badges/webkom/lego-webapp/status.svg)](https://ci.webkom.dev/webkom/lego-webapp)\n\n\u003e **Issues**: We track issues in the main repo of LEGO\n\n[![open issues](https://badgen.net/github/open-issues/webkom/lego)](https://github.com/webkom/lego/issues)\n\n## Quick access\n\n1. [Quick Start](#quick-start)\n2. [LEGO-BRICKS](#lego-bricks)\n3. [Development](#development)\n4. [Deployment (webkom/lego#deployment)](https://github.com/webkom/lego#deployment)\n\n## Quick Start\n\n\u003e For all the alternative ways to run the project, you will need to run `pnpm build` to compile [lego-bricks](#lego-bricks) the first time you run the project. After this, it will build automatically when changed.\n\n```bash\n$ pnpm i # Install dependencies\n$ pnpm build # Compile LEGO-BRICKS - only required the first time you run the project\n$ pnpm dev:staging # Start webserver with development backend\n```\n\nEverything should be up and running on [localhost:3000](http://localhost:3000). The `:staging` suffix points the webserver at a hosted development backend.\n\n### Running with local backend\n\nFirst, you need to have the `django` backend running, see [webkom/lego](https://github.com/webkom/lego).\n\n```bash\n$ pnpm dev # Start webserver with local backend\n```\n\n### Server side rendering (Optional)\n\nIn 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:\n\n```bash\n$ pnpm build\n$ pnpm preview # or pnpm preview:staging\n```\n\n### Environment Variables\n\nThe `webserver` running the frontend can take many optional environment variables. Docs can be found at `config/environment.md`, and default can be found at `server/env.ts` and `config/env.ts`.\n\n## LEGO-BRICKS\n\nTo facilitate using components from LEGO-WEBAPP in other projects, certain components have been split out to a separate package — LEGO-BRICKS. That package is stored within this repo, under `/packages/lego-bricks`.\n\nThe current build structure requires that `lego-bricks` be compiled to run the project, which can be done either by running `pnpm build` in the root directory, or by navigating to the package and running the same command there.\n\n## Development\n\nWe use some conventions and tools for our JavaScript/React development.\n\n- [prettier](https://github.com/prettier/prettier) for JS code formatter.\n  - `pnpm prettier`\n- [eslint](https://eslint.org/) for finding and fixing problems in your JavaScript code.\n  - `pnpm lint`\n- [TypeScript](https://www.typescriptlang.org) for type checking.\n  - `pnpm types`\n\nWe 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.\n\n\u003cdetails\u003e\u003csummary\u003e\u003ccode\u003eUnit tests\u003c/code\u003e\u003c/summary\u003e\n\n### Unit tests (jest)\n\nRun all the tests and check for lint errors with the command:\n\n```bash\n$ pnpm test\n```\n\nFor development you can run the tests continuously by using:\n\n```bash\n$ pnpm test:watch\n```\n\nA coverage report can be generated by running `pnpm test -- --coverage`.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003e\u003ccode\u003eCypress E2E (End-to-end tests)\u003c/code\u003e\u003c/summary\u003e\n\n### End to end tests (cypress)\n\nIn order to run end to end tests, you need to run both lego-webapp and lego.\nLego can be found here: https://github.com/webkom/lego. Lego is assumed to have a clean development database, follow the steps below to achieve that.\n\n#### Backend\n\n```bash\n$ cd ../lego\n$ docker compose up -d # Start all services that lego depends on\n$ python manage.py initialize_development # Initialize and load data sources (postgres)\n$ docker compose restart lego_cypress_helper # The cypress helper resets database between every test and might need this restart to function correctly\n$ python manage.py runserver\n```\n\n\u003e If you already have the backend setup, make sure your database is clean\n\n```bash\npython manage.py reset_db\npython manage.py migrate\npython manage.py load_fixtures\ndocker compose restart lego_cypress_helper # Make sure the copy is of the clean database\n```\n\n#### Frontend\n\nStart up the node server\n\n```bash\n$ pnpm dev\n```\n\nAnd start cypress in another terminal\n\n```bash\n$ pnpm cypress open\n```\n\n**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\n\n```bash\n$ pnpm build\n$ pnpm preview\n```\n\nAnd you run cypress headlessly (no visible browser) in another terminal\n\n```bash\npnpm cypress run\n```\n\n#### STRIPE\n\nIn 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\n\n```bash\n$ stripe listen --forward-to localhost:8000/api/v1/webhooks-stripe/\n```\n\nIn addition, the backend needs to run with two environment variables.\n\n```bash\n$  STRIPE_WEBHOOK_SECRET=\u003cSECRET\u003e STRIPE_TEST_KEY=\u003cSECRET\u003e python manage.py runserver\n```\n\nThe webhook is obtained when running the stripe command above, while the test key can be obtained from the stripe dashboard.\n\nTo run the payment tests successfully you also need to run a websocket-server to receive updates when the backend handles payments.\n\n```bash\n$ daphne lego.asgi:application -b 0.0.0.0 -p 8001\n```\n\nLastly, one has to run the frontend without captcha:\n\n```bash\n$ SKIP_CAPTCHA=TRUE pnpm dev\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003e\u003ccode\u003eCI/CD\u003c/code\u003e\u003c/summary\u003e\n\n### CI/CD\n\nWe use [drone](https://drone.io) as our CI/CD system. The server runs at https://ci.webkom.dev. This\nrepo is public, so anyone can see the status at https://ci.webkom.dev/webkom/lego-webapp.\n\nSince the repo is public and we use a lot of secrets in the pipeline, we require the pipeline to be\nverified with a signature from drone. To obtain this, use the [cli](https://docs.drone.io/cli):\n\n```sh\ndrone sign webkom/lego-webapp\n```\n\nYou need to login to retrieve the signature. Get the login data from your [user\nsettings](https://ci.webkom.dev/account).\n\n\u003c/details\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebkom%2Flego-webapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebkom%2Flego-webapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebkom%2Flego-webapp/lists"}