Haitaton is a service owned by the city of Helsinki that supports the management and prediction of the adverse effects of projects taking place within the urban area.
- Node 20.x
- Yarn
- Git
- Docker
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3001 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
First, scripts generate environment variables to public/test-env-config.js
with scripts/update-runtime-env.ts, which contains the actual used variables when running the app.
App is not using create-react-app's default process.env way to refer of variables
but window._env_ object.
Runs E2E cypress 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.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Exports frontend localizations into locale_export.xlsx for easier translation. Data is loaded
from src/locales/.
Imports frontend localizations from locale_export.xlsx. Translations are merged on corresponding translation files
in src/locales/.
Scripts generate first environment variables to public/env-config.js with
scripts/update-runtime-env.ts, which contains the actual used variables when running the app. App
is not using create-react-app's default process.env way to refer of variables but window._env_
object.
Note that running built application locally you need to generate also public/env-config.js file.
It can be done with yarn update-runtime-env. By default, it's generated for development
environment if no NODE_ENV is set.
For docker, the scripts/env.sh is added to the pod. This is run when the pod starts, and it writes
the env-config.js file, reading the values of the variables of the pod environment. It only
processes variables mentioned in .env. If there's no value for a variable in the environment, the
default value from .env is used.
Haitaton supports either Helsinki AD or Suomi.fi identification for logging in. Currently only just
one at a time. This is controlled by the REACT_APP_OIDC_CLIENT_ID environment variable. To change
the identification method in the local environment, edit the .env -file.
- For Helsinki AD (default):
REACT_APP_OIDC_CLIENT_ID: 'haitaton-admin-ui-dev' - For Suomi.fi:
REACT_APP_OIDC_CLIENT_ID: 'haitaton-ui-dev'
Then either rebuild the docker container or run yarn update-runtime-env as discussed above.
In the cloud instances, dev uses Helsinki AD identification while others use Suomi.fi.
If you use WSL as your local development environment and you bump into pre-push validation errors
in git push that other developers (with e.g. Mac) do not have, you could try to set WSL=true
in your local environment, e.g. in ~/.huskyrc (Husky git hooks automatically loads this file):
export WSL=true
This setting adds --runInBand parameter for Jest tests (see https://jestjs.io/docs/cli#--runinband).
There are team-managed git hooks in the .husky -directory. To use these, husky must be enabled
once with yarn prepare. The command needs to be done only once.
You can export an Excel-file with current translations. This can then be sent to translators.
- In the repository root, run the export script with
yarn locales:export. - The translations are written to
locale_export.xlsx.
After the translations are added to the Excel file, they can be imported back.
- Place the translated file inside repository root. It needs to be named
locale_export.xlsx. - Run the import script:
yarn locales:import. - The translations in
/src/localesare updated.
yarn start-msw runs the app in development mode using MSW (Mock Service Worker)
to mock API. Definitions can be found in src/domain/mocks.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.