Open the environment.prod.ts file located at src/environments and change the value of the following variables:
serverUrl - Your PUBLIC_SERVER_URL/api as defined in the backend.
appId - It must match with the APP_ID declared server-side.
appUrl - The URL for the public app. Used for SEO and social sharing.
appImageUrl - Used for social graph and sharing.
fbId - The Facebook App ID.
googleMapsApiKey - You could use the same key generated during the admin portal configuration or create a new one from here.
headerColor - Color for the status bar (Android only). Optional. Any hexadecimal value is valid.
defaultUnit - Default distance unit. Possible values: km, mi.
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.
currency (Read more about currency formatting)
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.googleClientId - Required for Google Sign In.
oneSignal (optional) - Replace oneSignal.appId with your OneSignal App ID, available on your OneSignal Dashboard, under Keys & IDs.
Go to the Google Cloud Console, select your project, and navigate to the tab Credentials.
In the OAuth 2.0 Client IDs section, you should already have the row Web client (auto created by Google Service). Here, just copy the Client ID (last column). We’ll need it later.
Now we need to add the Authorized JavaScript origins. Click on the same row. In the following page, add two origins: the URL where the Ionic CLI serves the app (http://localhost:8100), and the domain where the app will be hosted.
In file capacitor.config.ts:
// Replace the appId, appName and the Google Client ID.
{
appId: 'YOUR_UNIQUE_APP_ID',
appName: 'YOUR_APP_NAME',
GoogleAuth: {
iosClientId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com',
androidClientId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com',
serverClientId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com",
}
}
If you have issues with Google Login on Android, try to set the androidClientId with the same value as serverClientId.
In android/app/build.gradle:
defaultConfig {
applicationId "YOUR.UNIQUE.PACKAGE.ID"
}
In file /android/app/src/res/values/strings.xml:
<resources>
<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>
</resources>
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: https://developers.facebook.com/docs/android/getting-started
More information about configuring Android
In file ios/App/App/info.plist replace the following:
<key>CFBundleDisplayName</key>
<string>YOUR_APP_NAME</string>
<!-- Set fbXXXXXXXXX as a URL Scheme -->
<key>CFBundleURLSchemes</key>
<array>
<string>fbYOUR_FB_ID</string>
</array>
<!-- Reversed Google Client ID -->
<key>CFBundleURLSchemes</key>
<array>
<string>com.googleusercontent.apps.xxxxxxxxxxxxxxxxxxxxxxxxxxxx</string>
</array>
<key>FacebookAppID</key>
<string>YOUR_FB_ID</string>
<key>FacebookClientToken</key>
<string>YOUR_FB_CLIENT_TOKEN</string>
<key>FacebookDisplayName</key>
<string>YOUR_FB_APP_NAME</string>
More information about setting up Facebook Login on iOS: https://developers.facebook.com/docs/ios/getting-started
More information about configuring iOS
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. You could use this tool to generate all the required sizes.
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.
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;
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.