Building native apps
Table of contents
- download your project onto your local machine that you will use for building the native apps
Update your interkit.config
This file will determine which server your app uses to load itself - make sure it points to the right place.
Basic capacitor setup
Edit capacitor.config.json file with details for your project (name, identifier) or use init tool:
npx cap init
If you used the starter, you must also manually change
/android/app/src/main/res/values/strings.xml to update
- title_activity_main to your App name
- custom_url_scheme to your app identifier (e.g. interkit.app.starter. This is usually like a web domain written in inverse direction - com.companyname.projectname - You can make this up yourself)
In addition, change the app identifier in the following files
/android/app/src/main/java/interkit/app/starter/MainActivity.java> and rename this path to fit your app identifier AND change the app identifier inside
Warning: changing the app identifier will currently only work if you also replace the
google-services.json with info from firebase (see push setup dedicated guide )
Optionally, you can remove unneeded permissions from
<uses-permission android:name="android.permission.CAMERA" />.
Change the display name and bundle in xcode (click App in the tree on the left)
Re-creating capacitor directories/“platforms” (both Android and iOS)
Some places recommend to re-create your
ios directories if you severely mess up your Capacitor setup;
or just to re-initialize it, e.g. after changing your bundleId.
This is not as trivial. The directories cannot be recreated completely without manual tweaks.
Generally, it works like this:
npm run build
rm -rf ios # or, swap ios with android
npx cap add ios
export LANG=en_US.UTF-8 # only needed for ios
npx cap sync ios
…but you might have to re-add permissions, like access to location, gps, camera etc.
If your project is version controlled,
git diff and restore all lines that relate to permissions,
Updating the app
Build the app bundle in /public
npm run build
Update the native projects with the current bundle from /public
npx cap sync
Open a native project with native dev tools (use these to build)
npx cap open ios
npx cap open android
Icons and Splashscreen
replace the icon and splash screen files in the
/resources directory (assuming you used starter to build you project) - make sure you use the exact same sizes
note: for android you also manually need to replace the
android/icon-background.png for some fancy android icon effect.
npm install -g cordova-res
run these commands to copy them into the native projects
cordova-res ios --skip-config --copy
cordova-res android --skip-config --copy
they should be included in your next build with the native dev tools
Publish to the app stores
you’ll need screenshots - these are easiest to make with iphone and ipad simulators.
- 5.5 inch -> use iphone 8plus simulator
- 6.5 inch -> use iphone 11 pro max simulator (1242x2688 2688x1242 1284x2778 2778x1284)
- 12.9 inch -> use ipad pro simulator
Important: make sure you set a clear description of what you want to use the location data for in
plist.info NSLocationWhenInUseUsageDescription - see https://developer.apple.com/design/human-interface-guidelines/patterns/accessing-private-data
Important: If you want to use push messages, please go through Push Setup Guide
- In Xcode, select Any iOS Device as the deployment target.
- Choose Product from the top menu and click on Archive.
- The Xcode Organizer will launch, displaying any archives you’ve created in the past.
- Make sure the current build is selected and click on Distribute App and follow the prompts with the default options
- after you upload and select the build in App Store Connect - you will get 2 scary looking questions about encryption. If you are just using https, we’ve been selecting Yes to both questions.
Additional info here: https://developer.apple.com/ios/submit/
You might have to change the targetSdkVersion located in
android/variables.gradle (currently 33 is minimum for google play submissions).
Build > Generate Signed Bundle/APK. You’ll need to create a new key store in that same dialogue. Follow this guide for more information: https://developer.android.com/studio/publish/app-signing#sign_release
After the build, locate you app bundle, create a release in Google Play Console and upload it there.
When you need to update your app, change the versionCode and versionName in build.gradle (module android.app).