4.2.5 Set up application settings

The next step is to configure some functional application settings. Some of these settings can be changed later using the OpenCRVS Functional Configuration UI by a National System Administrator. Others must be configured now during installation and cannot be changed in production.

You will be referring to the Config: Application Settings Excel sheet that would have been prepared in section 2: Gather requirements.

1. Prepare global functional settings

Prepare your application-config-default.ts source file. This is a Typescript file that is loaded in the application via an API explained in section 3.2.9 Countryconfig APIs explained.

Using our application-config-default.ts file as an example, update the settings according to your needs.

2. Prepare javascript initialisation settings

The OpenCRVS Core Login application loads the following config js files before connecting to the OpenCRVS backend to serve all the content. The Login app has not communicated with the backend yet and needs to know how to access it

Login app - localhost development: login-config.js

window.config = {
  AUTH_API_URL: 'http://localhost:4040/',
  CONFIG_API_URL: 'http://localhost:2021',
  // Country code in uppercase ALPHA-3 format
  COUNTRY: 'FAR',
  LANGUAGES: 'en,fr',
  AVAILABLE_LANGUAGES_SELECT: 'en:English,fr:Français',
  CLIENT_APP_URL: 'http://localhost:3000/',
  COUNTRY_CONFIG_URL: 'http://localhost:3040',
  SENTRY: '',
  LOGROCKET: ''
}

As you can see, the React Login application uses the URL values to understand how to connect to backend services such as the login authentication API and the country configuration API. Do not edit the URLs.

You must set some values:

COUNTRY: Set the Alpha 3 country code to be the same as the value you used when importing the set up files in step 3.2.5. The Login app needs to convert users phone numbers into MSISDN numbers using an Alpha 3 country code in case the user forgets their login details and requires an SMS reset.

LANGUAGES: This property allows you to customise the global language options. This value is a comma separated string of ISO 639-1 language codes for every translation you wish to set up in step 3.2.5.1 Managing language content.

For example, if you wanted to support Spanish and English, with Spanish being the default this string should be:

es,en

AVAILABLE_LANGUAGES_SELECT: The app needs to populate available languages in a language select before it has had a chance to load any language content. This property allows you to customise the options & labels in the select. This value is a comma separated string of the following:

a) Firstly the ISO 639-1 language code for a single translation you have set up in step 3.2.7 Set-up language content followed by a colon.

b) After the colon, the displayName for the language.

For example, if you wanted to support Spanish and English, with Spanish being the default this string should be:

es:Español,en:English

The application can log errors to Sentry should it encounter any problems accessing the backend. LOGROCKET will be deprecated in OpenCRVS v1.4. Leave these options alone as empty strings as they are not used when running in localhost. They are populated dynamically from Github secrets in the server deploy step here.

Login app - server: login-config.prod.js

window.config = {
  AUTH_API_URL: 'https://auth.{{hostname}}/',
  CONFIG_API_URL: 'https://config.{{hostname}}',
  // Country code in uppercase ALPHA-3 format
  COUNTRY: 'FAR',
  LANGUAGES: 'en,fr',
  AVAILABLE_LANGUAGES_SELECT: 'en:English,fr:Français',
  CLIENT_APP_URL: 'https://register.{{hostname}}/',
  COUNTRY_CONFIG_URL: 'https://countryconfig.{{hostname}}',
  SENTRY: '{{sentry}}',
  LOGROCKET: ''
}

As you can see, the server config file contains the same settings.

You may notice that localhost is replaced by your domain name dynamically in handlebars. Do not edit the URLs. We have taken care of this substitution for you in step 3.3.5 Deploy

You must set the COUNTRY, LANGUAGES & AVAILABLE_LANGUAGES_SELECT values only.

Client app - localhost development: client-config.js

window.config = {
  API_GATEWAY_URL: 'http://localhost:7070/',
  CONFIG_API_URL: 'http://localhost:2021',
  LOGIN_URL: 'http://localhost:3020',
  AUTH_URL: 'http://localhost:4040',
  MINIO_BUCKET: 'ocrvs',
  COUNTRY_CONFIG_URL: 'http://localhost:3040',
  // Country code in uppercase ALPHA-3 format
  COUNTRY: 'FAR',
  AVAILABLE_LANGUAGES_SELECT: 'en:English,fr:Français',
  LANGUAGES: 'en,fr',
  SENTRY: '',
  LOGROCKET: '',
  // Use the values in comments when Metabase is running locally
  // http://localhost:4444/public/dashboard/acae0527-74be-4804-a3ee-f8b3c9c8784c#bordered=false&titled=false&refresh=300
  LEADERBOARDS_DASHBOARD_URL: '',
  // http://localhost:4444/public/dashboard/fec78656-e4f9-4b51-b540-0fed81dbd821#bordered=false&titled=false&refresh=300
  REGISTRATIONS_DASHBOARD_URL: '',
  // http://localhost:4444/public/dashboard/a17e9bc0-15a2-4bd1-92fa-ab0f346227ca#bordered=false&titled=false&refresh=300
  STATISTICS_DASHBOARD_URL: ''
}

Following the same process as you did for the local development Login app config file, you must set the COUNTRY, LANGUAGES & AVAILABLE_LANGUAGES_SELECT values, and can optionally uncomment LEADERBOARDS_DASHBOARD_URL, REGISTRATIONS_DASHBOARD_URL and STATISTICS_DASHBOARD_URL if you wish to run metabase dashboards locally. Refer to step 3.2.5.2 Configuring Metabase Dashboards for more instructions.

Client app - server: client-config.prod.js

window.config = {
  API_GATEWAY_URL: 'https://gateway.{{hostname}}/',
  CONFIG_API_URL: 'https://config.{{hostname}}',
  LOGIN_URL: 'https://login.{{hostname}}',
  AUTH_URL: 'https://auth.{{hostname}}',
  MINIO_BUCKET: 'ocrvs',
  COUNTRY_CONFIG_URL: 'https://countryconfig.{{hostname}}',
  // Country code in uppercase ALPHA-3 format
  COUNTRY: 'FAR',
  AVAILABLE_LANGUAGES_SELECT: 'en:English,fr:Français',
  LANGUAGES: 'en,fr',
  SENTRY: '{{sentry}}',
  LOGROCKET: '',
  LEADERBOARDS_DASHBOARD_URL:
    'https://metabase.{{hostname}}/public/dashboard/acae0527-74be-4804-a3ee-f8b3c9c8784c#bordered=false&titled=false&refresh=300',
  REGISTRATIONS_DASHBOARD_URL:
    'https://metabase.{{hostname}}/public/dashboard/fec78656-e4f9-4b51-b540-0fed81dbd821#bordered=false&titled=false&refresh=300',
  STATISTICS_DASHBOARD_URL:
    'https://metabase.{{hostname}}/public/dashboard/a17e9bc0-15a2-4bd1-92fa-ab0f346227ca#bordered=false&titled=false&refresh=300'
}

Following the same process as you did for the production Login app config file, you must set the COUNTRY, LANGUAGES & AVAILABLE_LANGUAGES_SELECT values.

Last updated