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 environment.prod.ts 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 https://admin.tryion.shop and the PARSE_SERVER_MOUNT to /api, the serverUrl should be https://admin.tryion.shop/api
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.Go to the Google Cloud Console.
Select your project and navigate to the tab “Credentials”.
Click the button “Create Credentials” and from the dropdown list select OAuth client ID.
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: https://www.tryion.shop). Also, you should add http://localhost:8100 to enable Google Sign In if the app was installed as a PWA.
In file capacitor.config.ts:
// Replace the appId, appName and the client ID's.
{
appId: 'YOUR.UNIQUE.PACKAGE.ID',
appName: 'YOUR_APP_NAME',
GoogleAuth: {
iosClientId: 'xxxxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com',
androidClientId: 'xxxxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com',
serverClientId: 'xxxxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com',
}
}
Create the androidClientId as follows:
Go to the Google Cloud Console.
Select your project, click APIs & Services > Credentials.
Click Create Credentials, and select OAuth client ID.
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.
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 iOS Client ID -->
<key>CFBundleURLSchemes</key>
<array>
<string>com.googleusercontent.apps.xxxxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</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/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.
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.
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.