Global configuration

Update the environment variables defined at src/environments folder. Note that if you run the app with the --prod flag, the values declared on the will be considered during compilation. Read more about using environment variables in Ionic/Angular in this link.

  • serverUrl - It must match with the PUBLIC_SERVER_URL + PARSE_SERVER_MOUNT. For example if the PUBLIC_SERVER_URL was set to and the PARSE_SERVER_MOUNT to /api, the serverUrl should be

  • appId - Same APP_IDas defined server-side.

  • appUrl - The URL for the public PWA. Used for SEO and social sharing.

  • appImageUrl - Used for SEO and social sharing.

  • fbId - The Facebook App ID.

  • stripePublickey - Learn how to create your own public key here.

  • androidHeaderColor - Color for the status bar (Android only). Optional. Any hexadecimal value is valid.

  • defaultLang - Default language Possible values: en, es, ar. If you want to add another language, create a new file in the src/assets/i18n folder. Then copy and paste the contents of the en.json file into the new file and edit the texts accordingly.

  • googleClientId - Required for Google Sign In.

  • currency

    • code - The ISO 4217 currency code, such as USD for the US dollar and EUR for the euro.
    • display - The format for the currency indicator. Legal values: code, symbol, symbol-narrow or a given string value instead of a code or a symbol.
    • digitsInfo - Decimal representation options.

Read more about currency formatting.

  • oneSignal (optional) - Replace oneSignal.appId with your OneSignal App ID, available on your OneSignal Dashboard, under Keys & IDs.

How to get the Google Client ID?

  1. Go to the Google Cloud Console.

  2. Select your project and navigate to the tab “Credentials”.

  3. Click the button “Create Credentials” and from the dropdown list select OAuth client ID.

  4. From the Application type, select “Web application”, enter Authorized JavaScript origins and click the button “Create”.

In Authorized JavaScript origins enter your app domain (for example: Also, you should add http://localhost:8100 to enable Google Sign In if the app was installed as a PWA.

Setup Capacitor

In file capacitor.config.ts:

// Replace the appId, appName and the client ID's.
  appName: 'YOUR_APP_NAME',
  GoogleAuth: {
    iosClientId: '',
    androidClientId: '',
    serverClientId: '',

Create the androidClientId as follows:

  1. Go to the Google Cloud Console.

  2. Select your project, click APIs & Services > Credentials.

  3. Click Create Credentials, and select OAuth client ID.

  4. Select Android as the application type, type your package name, the SHA-1 fingerprint certificate, and click Create.

The steps are the same for the iosClientId, just set the application type to iOS, and type your Bundle ID.

For the serverClientId, use the same Google Web Client ID set in the environment file.

Setup Android

In android/app/build.gradle:

defaultConfig {
  applicationId "YOUR.UNIQUE.PACKAGE.ID"

In file /android/app/src/res/values/strings.xml:

  <string name="app_name">YOUR_APP_NAME</string>
  <string name="title_activity_main">YOUR_APP_NAME</string>
  <string name="package_name">YOUR_UNIQUE_PACKAGE_ID</string>
  <string name="custom_url_scheme">YOUR_UNIQUE_PACKAGE_ID</string>
  <string name="facebook_app_id">YOUR_FB_ID</string>
  <string name="facebook_client_token">YOUR_FB_CLIENT_TOKEN</string>

The facebook_client_token can be found in the Facebook App Dashboard. Select your app, and navigate to Settings > Advanced > Security > Client Token.

More information about setting up Facebook Login on Android:

More information about configuring Android

Setup iOS

In file ios/App/App/info.plist replace the following:


<!-- Set fbXXXXXXXXX as a URL Scheme -->


<!-- Reversed iOS Client ID -->





More information about setting up Facebook Login on iOS:

More information about configuring iOS.

Web Configuration

In file src/index.html:

Make sure to update the meta-tags, like <title>, <description> and meta[theme-color], etc.

In file src/manifest.json:

  "name": "YOUR_APP_NAME",
  "short_name": "YOUR_APP_NAME",
  "theme_color": "COLOR_HEX_VALUE",
  "background_color": "COLOR_HEX_VALUE",

Update the name, short_name, theme_color and background_color.

Remember to update the icons located in src/assets/icons. Use this tool to generate all the required sizes.

Setup Push Notifications

We’ll follow the instructions below to generate the configuration files of each platform:

At this point our project should be ready to receive push notifications.

Update colors

Open the src/theme/variables.scss file and update the CSS variables. Read more about theming Ionic apps here.

  --ion-color-primary: #D4145A;
  --ion-color-primary-rgb: 56, 128, 255;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #bb124f;
  --ion-color-primary-tint: #d82c6b;

Update Icon and SplashScreen

Creating Splash Screens and Icons

We noted that the guide above works great except for the Android Adaptive icons. We recommend to generate the android icons using the tool provided by Android Studio.

Create app icons with Image Asset Studio

Now that the app is ready, you can create the production build, and submit your app using Android Studio and xCode.