UI for Linked Events. Linked Events is a collection of software components and API endpoints that enables event management and distribution for different event providers in Finland
- Node 18 (
nvm use) - Yarn
To build the project, you will need Docker.
Build the docker image
docker compose build
Start the container
docker compose up
The web application is running at http://localhost:3000
Build the docker image
DOCKER_TARGET=production docker compose build
Start the container
docker compose up
The web application is running at http://localhost:3000
Clone the repository (https://github.com/City-of-Helsinki/linkedevents). Follow the instructions for running linkedevents with docker. Before running docker compose up use the env.example template as base for /docker/django/.env
Copy default environment variables from .env.local.example to .env.local to enable authentication with Helsinki Tunnistus (Keycloak) and to set correct end point for local Linked Events API.
Run docker-compose up, now the app should be running at http://localhost:3000/
docker-compose down stops the container.
OR
Run yarn && yarn start
Run yarn && yarn start
Use .env.development.local for development.
| Name | Description |
|---|---|
| GENERATE_ROBOTS | Set to true to generate robots.txt file |
| GENERATE_SITEMAP | Set to true to generate sitemap for the site |
| PUBLIC_URL | Public url of the application url |
| REACT_APP_LINKED_EVENTS_URL | linkedevents api base url |
| REACT_APP_LINKED_REGISTRATIONS_UI_URL | Linked registration UI url. Used to get signup form url |
| REACT_APP_OIDC_AUTHORITY | Keycloak SSO service url. Default in .env.local is https://tunnistus.test.hel.ninja/auth/realms/helsinki-tunnistus |
| REACT_APP_OIDC_API_TOKENS_URL | Keycloak api tokens endpoint url. Default in .env.local is https://tunnistus.test.hel.ninja/auth/realms/helsinki-tunnistus/protocol/openid-connect/token |
| REACT_APP_OIDC_CLIENT_ID | Oidc client. Default in .env.local is linkedcomponents-ui-dev |
| REACT_APP_OIDC_API_SCOPE | Linked Events API scope. Default in .env.local is linkedevents-api-dev |
| REACT_APP_SENTRY_DSN | Sentry DSN. Both REACT_APP_SENTRY_DSN and REACT_APP_SENTRY_ENVIRONMENT has to be set to send error reports. |
| REACT_APP_SENTRY_ENVIRONMENT | Setry environment. |
| REACT_APP_MATOMO_URL_BASE | //matomo.hel.ninja/ |
| REACT_APP_MATOMO_SITE_ID | 42 |
| REACT_APP_MATOMO_SRC_URL | matomo.js |
| REACT_APP_MATOMO_ENABLED | Flag to enable matomo. Default false. |
| REACT_APP_SWAGGER_URL | https://dev.hel.fi/apis/linkedevents |
| REACT_APP_INTERNET_PLACE_ID | Id of the internet place. system:internet in development server, helsinki:internet in production |
| REACT_APP_REMOTE_PARTICIPATION_KEYWORD_ID | yso:p26626 |
| REACT_APP_LINKED_EVENTS_SYSTEM_DATA_SOURCE | helsinki |
| REACT_APP_SHOW_ADMIN | Flag to show admin pages, Default true. pages |
| REACT_APP_SHOW_PLACE_PAGES | Flag to show place pages, Default is false. |
| REACT_APP_ENABLE_SWEDISH_TRANSLATIONS | Flag to enable swedish translations, Default is false. |
| REACT_APP_ENABLE_EXTERNAL_USER_EVENTS | Flag to enable events for users without an organization, Default true. |
| REACT_APP_MAINTENANCE_SHOW_NOTIFICATION | Flag to show maintenance notification in each page. Default is false. |
| REACT_APP_MAINTENANCE_DISABLE_LOGIN | Flag to disable login and to show toast message instead. Default is false |
| REACT_APP_ALLOWED_SUBSTITUTE_USER_DOMAINS | Allowed domains for the substitute user email. Defaul is hel.fi |
| REACT_APP_WEB_STORE_INTEGRATION_ENABLED | Flag to enable Tapla integration. Default is false |
There are a feature flags which can be enabled in .env.development.local:
REACT_APP_SHOW_ADMIN:
Features enabled:
- Editing keywords.
- Editing keyword sets.
- Editing image.
- Editing organizations.
- Editing places.
Note that also REACT_APP_SHOW_PLACE_PAGES has to be enabled to see place pages.
REACT_APP_SHOW_PLACE_PAGES:
Features enabled:
- Editing places.
REACT_APP_WEB_STORE_INTEGRATION_ENABLED:
Features enabled:
- Editing price groups of a registration
- Selecting price group for a signup or a signup group
New commit messages must adhere to the Conventional Commits specification, and line length is limited to 72 characters.
commitlint checks new commit messages for the correct format.
Snyk CLI scans and monitors your projects for security vulnerabilities and license issues.
For more information visit the Snyk website https://snyk.io
For details see the CLI documentation https://docs.snyk.io/features/snyk-cli
How to get started
- Authenticate by running
yarn snyk auth - Test your local project with
yarn snyk test - Get alerted for new vulnerabilities with
yarn snyk monitor
You can see all available command with yarn snyk
You can install Snyk extension for Visual Studio Code from https://marketplace.visualstudio.com/items?itemName=snyk-security.snyk-vulnerability-scanner
In the project directory, you can run:
Source map explorer analyzes JavaScript bundles using the source maps. This helps you understand where code bloat is coming from.
To analyze the bundle run the production build then run the analyze script.
yarn build
yarn analyze
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
https://vitejs.dev/guide/cli.html#build
Codegen settings in codegen.yml
- Generate static types for GraphQL queries by using the schema from the local schema
- Generate react hooks for GraphQL queries from query.ts and mutation.ts files.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Launches the test runner and generates coverage report
Install Playwright for running browser tests
Running browser tests
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
https://vitejs.dev/guide/cli.html#build
Locally preview the production build. Do not use this as a production server as it's not designed for it.
https://vitejs.dev/guide/cli.html#vite-preview
Gzip compress build folder. Run this after building app to be able serve files in compressed format.
Generates sitemap for the app. Sitemap is generated only if PUBLIC_URL is set and GENERATE_SITEMAP === true.
Generates production robots.txt for the app. File is generated only if PUBLIC_URL is set and GENERATE_ROBOTS === true. Link to sitemap is added if GENERATE_SITEMAP === true
Run linter to all the files in app
Run linter and fix all the linter errors