Capacitor: Support release builds from CLI

[mlynch]

We will need to do CI/Cloud builds for apps in Ionic, should we support running xcodebuild/gradle easily from the CLI?

npx cap build

[jcesarmobile]

Is the CI something we control? we can configure the CI to build the native project

[mlynch]

Yea, but just CI's in general, we could make it easier to build the app from the command line

[janpio]

_fastlane_ has very good build support for both Android and iOS - maybe this could be an alternative? (With build come profiles, certificates, output paths...)

[zarko-tg]

Major showstopper for us as we've almost never had to open/use any IDE, having a well functioning build/release setup/process via command line.

[ptitjes]

@zarko-tg You can do (cd android/ && ./gradlew assembleRelease) for Android.
See for instance:

• https://github.com/cabasvert/cabasvert/blob/master/packages/client/scripts/tools.js#L83
• https://github.com/cabasvert/cabasvert/blob/master/packages/client/scripts/tools.js#L127

You can do something like xcodebuild -scheme App build for iOS.
But I can't tell exactly as I didn't pay Apple's dime yet.

[wilsolutions]

Hi, I've tried the steps above for Android, it did generate the expected .apk file however if fails when I try to install in the device.
This is the error message that I got from logcat:
com.google.android.packageinstaller/com.android.packageinstaller.InstallFailed (has extras)

• iOS:
  xcodebuild -workspace App.xcworkspace -scheme App clean archive -configuration debug -sdk iphoneos -archivePath App.xcarchive

It fails with:
AppDelegate.swift:2:8: error: no such module 'Capacitor'

Any thoughts about it?
tkx

[jcesarmobile]

Did you run it from ios/App/ folder?

I just copy/pasted your command in one random Capacitor project and worked fine

You can also try to run pod install from ios/App/ first, but shouldn't be necessary as npx cap update ios already run it

[wilsolutions]

Hola @jcesarmobile, thank you for the feedback.
Yes, I did run from the ios/App folder.

From the ios/App:

1. ✗ pod install
   Ignoring nokogiri-1.8.4 because its extensions are not built. Try: gem pristine nokogiri --version 1.8.4
   Ignoring unf_ext-0.0.7.5 because its extensions are not built. Try: gem pristine unf_ext --version 0.0.7.5
   Analyzing dependencies
   Fetching podspec for Capacitor from ../../node_modules/@capacitor/ios
   Fetching podspec for CapacitorCordova from ../../node_modules/@capacitor/ios
   Fetching podspec for CordovaPlugins from ../capacitor-cordova-ios-plugins
   Downloading dependencies
   Using Capacitor (1.0.0-beta.7)
   Using CapacitorCordova (1.0.0-beta.7)
   Using CordovaPlugins (1.0.0-beta.11)
   Using GCDWebServer (3.4.2)
   Generating Pods project
   Integrating client project
   Sending stats
   Pod installation complete! There are 3 dependencies from the Podfile and 4 total pods installed.

1. ✗ xcodebuild -workspace App.xcworkspace -scheme App clean archive -configuration debug -sdk iphoneos -archivePath App.xcarchive

AppDelegate.swift:2:8: error: no such module 'Capacitor'
import Capacitor
^
* ARCHIVE FAILED *
The following build commands failed:
CompileSwift normal armv7 /Users/wils/_work/projects/prototype01/ios/App/App/AppDelegate.swift
CompileSwiftSources normal arm64 com.apple.xcode.tools.swift.compiler
CompileSwift normal arm64 /Users/wils/_work/projects/prototype01/ios/App/App/AppDelegate.swift
(3 failures)

tkx

[wilsolutions]

It works!

I have just created a new project and it works!

So, looks likes some discrepancy in my previous project, after reading jcesarmobile message I decided to create a new project and voilà!

tkx

[Rodrigo54]

consider using @bazelbuild to compile for ios, android and electron
it would be better to centralize everything in a single tool instead of worrying about Gradle and CocoaPods

[Coly010]

+1 Bump

[Heerschop]

I have created a pull request #4403 to make the open of the development IDE optional. This will help using ionic capacitor from the CLI, especially when you what to use the --livereload option.

Currently, if you what to use live reload from the CLI. You can not use the ionic capacitor run <platform> --livereload command, because it will always start the corresponding IDE. So you have to write custom scripts that will update the capacitor.config.json file with the correct information needed for live reload to work. The pull request can make this use case simpler.

[Heerschop]

The pull request #4403 has just been merged. As of version 6.7.0 of the Ionic CLI, you can use the --no-open option for the ionic capacitor run and ionic capacitor build command.

[Heerschop]

Created pull request #4417 for adding two extra hooks and adding environment variables for all the hook shell scripts.

Added two ionic capacitor CLI Hooks

• ionic:capacitor:run:before : executed on run before capacitor open is executed
• ionic:capacitor:build:before : executed on build before capacitor open is executed

The capacitor hooks are executed after the ionic:serve and ionic:build hooks.

Updated the task run method. The task run method will now supply the shell scripts with generated environment variables based on the information in the Hook Input object.

Example of the generated environment variables

IONIC_CLI_HOOK_CTX_NAME=capacitor:build:before
IONIC_CLI_HOOK_CTX_BUILD_CORDOVA_ASSETS=true
IONIC_CLI_HOOK_CTX_BUILD_ENGINE=browser
IONIC_CLI_HOOK_CTX_BUILD_PLATFORM=android
IONIC_CLI_HOOK_CTX_BUILD_PROJECT=app
IONIC_CLI_HOOK_CTX_BUILD_TYPE=angular
IONIC_CLI_HOOK_CTX_BUILD_VERBOSE=false
IONIC_CLI_HOOK_CTX_CAPACITOR_APP_ID=io.ionic.starter
IONIC_CLI_HOOK_CTX_CAPACITOR_APP_NAME=test-cli-app
IONIC_CLI_HOOK_CTX_CAPACITOR_VERBOSE=false

This pull request further simplifies the use of ionic capacitor from the CLI and in a CI/CD environment.

[Coly010]

IONIC_CLI_HOOK_CTX_PROJECT=app

I'm guessing this will allow for multi-app workspaces support?

Also, when you say build, do you mean building the JS App, or the native binaries?

My concerns, if it's the latter, are around code signing for Android and provisioning profiles for iOS, as well as building debug or release versions of the native binary.

[Heerschop]

This change includes two additional CLI hooks for ionic. Is implemented the same way as the already four existing hooks.
The value of the IONIC_CLI_HOOK_CTX_BUILD_PROJECT variable will change depending on the project selected. So yes it will support multi-app workspaces :-)

When the hook script is executed you can do what ever you want. The example below it is just printing some environment variables.

Example:

➜  test-cli-app git:(master) ✗ ionic capacitor build android --project=myProject --prod 

Hook build-before.sh: scripts/build-before.sh
IONIC_CLI_HOOK_CTX_NAME=capacitor:build:before
IONIC_CLI_HOOK_CTX_BUILD_CONFIGURATION=production
IONIC_CLI_HOOK_CTX_BUILD_CORDOVA_ASSETS=true
IONIC_CLI_HOOK_CTX_BUILD_ENGINE=browser
IONIC_CLI_HOOK_CTX_BUILD_PLATFORM=android
IONIC_CLI_HOOK_CTX_BUILD_PROJECT=myProject
IONIC_CLI_HOOK_CTX_BUILD_TYPE=angular
IONIC_CLI_HOOK_CTX_BUILD_VERBOSE=false
IONIC_CLI_HOOK_CTX_CAPACITOR_APP_ID=io.ionic.starter
IONIC_CLI_HOOK_CTX_CAPACITOR_APP_NAME=test-cli-app
IONIC_CLI_HOOK_CTX_CAPACITOR_VERBOSE=false

[Heerschop]

The pull request #4417 has just been merged. As of version 6.9.0 of the Ionic CLI you can use the new ionic:capacitor:run:before and ionic:capacitor:build:before hooks.

[pwespi]

The quasar framework (https://quasar.dev) supports Capacitor and they implemented building from the CLI. This is how they do it: https://github.com/quasarframework/quasar/blob/dev/app/lib/capacitor/index.js

Maybe it can be taken as an inspiration and be implemented in the Capacitor CLI as well?

[Coly010]

@pwespi very good find. I like it, even if this cannot be implemented into Capacitor itself, it's a good reference for anyone that needs to set up a build pipeline

[dwieeb]

Some thoughts on building from the CLI: https://github.com/ionic-team/capacitor/discussions/3224#discussioncomment-35214

[elvisgraho]

I dont get it. The docs suggest generating the Android project using capacitor. But when I want to build it, the docs suggest in using cordova, and the whole thing does't work!!!!!!!!

[jcesarmobile]

What docs are you referring to?
Capacitor docs don't tell you to use Cordova anywhere.

Capacitor doesn't support building from the CLI at the moment, you have to use gradle on Android or xcodebuild on iOS (or some multi platform tool such as fastlane)

[infacto]

Capacitor should primary build on CLI (e.g. Android SDK Tools, without Android Studio IDE). The current behavior is not CI friendly. Not even for humans. Why? 😢 It's a pain. I read something about Capacitor is not for release builds. Oo Then what is it for? It sounds like a joke.

[dwieeb]

Let's keep things constructive in accordance with our Code of Conduct.

Then what is it for?

Capacitor is first and foremost a cross-platform native runtime for web apps. The primary purpose is to provide a translation layer from web app to native platform. One of the philosophical differences between Capacitor and Cordova is that Capacitor doesn't try to abstract away the native platforms, it embraces them. The platforms in Capacitor projects are true native projects and considered source artifacts, not build artifacts. They're as much a part of your app as the JS you write.

You're encouraged to use Gradle for Android and xcodebuild for iOS in the command-line and CI environments because they're the official tools provided by Android and iOS. Third-party tools such as Fastlane may make this easier. Fastlane has been around much longer than Capacitor and has 20+ members on its core team alone. It's better if Capacitor focuses on its unique strengths instead of reinventing the wheel.

Could we document this better? Absolutely. Capacitor is just getting started.

[Siedlerchr]

I understand your argument, but only partly, even if you say use xcodebuild or gradle, why don't use the Cordova approach and pass the parameters for building down to the nativettools ?
Even java just passes the parameters down to the native build tools for packaging and signing apps with the jpackage tool.

[Panteleimon]

Greetings. Any update on this?

[Heerschop]

This Ionic Capacitor example project can be used for building with Capacitor from the CLI. The project uses ionic hooks and script-launcher for enabling this.

For Android, it should just work as long as you have Android Studio installed and setup. For Apple, you first have to make sure you have configured your certificates and provisioning profiles accordingly, and then update the export-store-options.plist and export-debug-options.plist files as explained in the README.

When all Android and iOS dependencies are correctly setup, then a CLI build can be started by using the native ionic capacitor commands like:

# Build Android debug apk
npx ionic capacitor build android --no-open

# Build Android Production apk
npx ionic capacitor build android --no-open --configuration=production

# Run Android debug IPA with livereload
adb reverse tcp:8100 tcp:8100
npx ionic capacitor run android --no-open --livereload --port=8100

# Build iOS debug IPA
npx ionic capacitor build ios --no-open

# Build iOS Production IPA
npx ionic capacitor build ios --no-open --configuration=production

# Run iOS debug IPA with livereload
npx ionic capacitor run ios --no-open --livereload --external --port=8100

Or you can use the menu by executing npm start to select and start the desired action interactively.

npm start

? Select action › - Use arrow-keys. Return to submit.
❯   serve - Builds and serves your app, rebuilding on file changes.
    build
    deploy

Hope this will help people to get started using ionic capacitors in a CI / CD environment.