Build Capacitor App


Capacitor iOS apps can be built either via the xcode interface, or by using the xcodebuild cli. This document will cover building the app using the xcodebuild cli. This section assumes that you have Pek set up in the Synerty standard Development structure.


Configure OptionsPlist.plist

The information specified in this plist will be used by xcode for building and exporting the app.

Download the example plist found here to your ~/Downloads folder and open it with xcode. Then, double click the fields and fill them out with the relevant information.


Save and close OptionsPlist.plist.

Set Variables

Some custom environment variables should be set before building the App

Variable Description
CLIENT The name of the client the App is being built for.
VERSION The tagged version of the App being built.
EXPORT_DIR The directory to export the App to.
APP_PACKAGE_ID The bundle identifier used to sign this app

When filled out, the environment variables should look similar to the below:


Copy and paste yours into your terminal

Create Necessary Directories

These will be used for building and exporting the app

mkdir -p $EXPORT_DIR

Move OptionsPlist.plist into place

The configured OptionsPlist file must now be moved to a directory it can be referenced from in the build. In our case, this is ${EXPORT_DIR}/OptionsPlist.plist

mv ~/Downloads/OptionsPlist.plist ${EXPORT_DIR}/OptionsPlist.plist

checkout the correct tag

Checkout the tag of the Peek version that you are building an app for in all peek development directories.

cd ~/dev-peek
for dir in */; do
    pushd ${dir}
        echo "Checking out $NAME"
        git fetch --all --tags
        git checkout tags/$VERSION

Move to the App folder

Checkout the tag of the Peek version that you are building an app for.

cd ~/dev-peek/peek-field-app/peek_field_app/ios/App

Configure the build

Perform the configuration changes required to build the app

The following folders are built when the services are run and will need to be rebuilt every time an aspect of Peek is changed.




Run the Peek Field and Peek Logic services together and wait for them both to start before continuing.

Update the config files at peek-field-app/ios/App/App/capacitor.config.json and peek-field-app/ios/App/App.xcodeproj/project.pbxproj

# Edit the config
sed -i "/\"appId\":/s/.*/  \"appId\": \"${APP_PACKAGE_ID}\",/g" \

# Edit the pbxproj
PADDING="                               "


sed -i "/DEVELOPMENT_TEAM/s/.*/${DT}/g" \

# Edit the Info.plist
sed -i "s/<string>1.0<\/string>/<string>${VERSION}<\/string>/g" \

Update the config html

cd ../..
sed -i "/v0.0.0/s/.*/            <div class=\"end-value\">v${VERSION}<\/div>/g" \

Build the App’s front-end

ng build --prod --optimization  --common-chunk --vendor-chunk

Build the App

Now that the config files have been updated, the App can be configured.

Set up Capacitor

Capacitor will need to be prepared to build an iOS App. Ignore any warnings that an ios directory already exists.

npm install @capacitor/core @capacitor/cli --save
npx cap init peek_ios_app_v${VERSION} $APP_PACKAGE_ID
npx cap add ios
npx cap sync

Install build prerequisites

cd ios/App
pod install
npm i
mkdir -p public

Prepare an App archive

An archive is a more general build that can be used to speed up subsequent builds with small config changes, e.g specifying new certificates.

xcodebuild \
  -workspace App.xcworkspace \
  -scheme App archive \
  -archivePath ${EXPORT_DIR}/peek.xcarchive \

Build from the archive

Perform the actual build.

xcodebuild -exportArchive \
  -archivePath ${EXPORT_DIR}/peek.xcarchive \
  -exportPath ${EXPORT_DIR}/Peek \
  -exportOptionsPlist ${EXPORT_DIR}/OptionsPlist.plist


Once the build is finished, the resulting App can be found in the EXPORT_DIR directory defined earlier.

Build Android App

** ToDo **

Build Windows App

** ToDo **

Further Reading

Further documentation on Capacitor can be found on their website.

What Next?

Refer back to the How to Use Peek Documentation guide to see which document to follow next.