Setup

Install dependencies:

$ yarn install

Development

Start the development server:

$ PORT=8081 REACT_APP_DHIS2_BASE_URL="http://localhost:8080" yarn start

Now in your browser, go to http://localhost:8081.

Notes:

• Requests to DHIS2 will be transparently proxied (see src/setupProxy.js) from http://localhost:8081/dhis2/path to http://localhost:8080/path to avoid CORS and cross-domain problems.

• The optional environment variable REACT_APP_DHIS2_AUTH=USERNAME:PASSWORD forces some credentials to be used by the proxy. This variable is usually not set, so the app has the same user logged in at REACT_APP_DHIS2_BASE_URL.

• Create a file .env.local (copy it from .env) to customize environment variables so you can simply run yarn start.

• why-did-you-render is installed, but it does not work when using standard react scripts (yarn start). Instead, use yarn craco-start to debug re-renders with WDYR. Note that hot reloading does not work out-of-the-box with craco.

Tests

Unit tests

$ yarn test

Integration tests (Cypress)

Create the required users for testing (cypress/support/App.ts) in your instance and run:

$ export CYPRESS_EXTERNAL_API="http://localhost:8080"
$ export CYPRESS_ROOT_URL=http://localhost:8081

# non-interactive
$ yarn cy:e2e:run

# interactive UI
$ yarn cy:e2e:open

Build app ZIP

$ yarn build

Some development tips

Structure

• i18n/: Contains literal translations (gettext format)
• public/: Main app folder with a index.html, exposes the APP.
• src/pages: Main React components.
• src/domain: Domain layer of the app (clean architecture)
• src/data: Data of the app (clean architecture)
• src/components: Reusable React components.
• src/types: .d.ts file types for modules without TS definitions.
• src/utils: Misc utilities.
• src/locales: Auto-generated, do not update or add to the version control.
• cypress/integration/: Cypress integration tests.

i18n

$ yarn localize

App context

The file src/contexts/app-context.ts holds some general context so typical infrastructure objects (api, d2, ...) are readily available. Add your own global objects if necessary.