How To Setup AppCenter with GitLab Without Pushing Secrets

  • 2019-03-09 02:13 AM
  • 17

How To Setup AppCenter with GitLab Without Pushing Secrets

We can all agree that having a tool that automates app builds, distributions and even analytics can be quite nice. Well, this is exactly what AppCenter does. And more.

However…

For those of us who use GitLab as their main Git server, it can be quite frustrating setting up GitLab to work with AppCenter. We also don’t want to push our app secrets to our Git server, whether it’s our Firebase JSON or the AppCenter secrets.

BitBucket Mirroring

How To Setup AppCenter with GitLab Without Pushing Secrets

In order to have AppCenter work “with” GitLab, we first have to mirror our repository to BitBucket. So go ahead and create a repository in BitBucket, then go to your user’s Settings (not repo settings, and we’re still in BitBucket), create a new app password under App passwords with all available permissions, and copy the password you are given for later.

How To Setup AppCenter with GitLab Without Pushing Secrets

Then go to GitLab, Settings -> Repository, and under Mirroring Repositories, enter your new BitBucket repo’s clone URL, choose Push under Mirror Direction, Password as auth method, and paste the password you’ve been given in BitBucket. Click Mirror Repository and you should see a new row in the table just below the mirror button. Click the refresh button on the right to start syncing.

Setup AppCenter

That was the easy part. We still need to configure our builds and hide some secrets 😎

Go to AppCenter, and create a user if you don’t already have one. Create your apps (For me it was one for Android and one for iOS) and complete the steps to add AppCenter’s SDK. Now go to theBuild tab, and select BitBucket under Select a Service. Select your newly created repo, and then you should see all of your branches. That’s it for now.

Build Scripts

How To Setup AppCenter with GitLab Without Pushing Secrets

Now in order for AppCenter to build your application, it needs the app’s AppCenter secret (which you are given in the settings page, shown above), and if you use Firebase like I do, it also needs the google-services.json file (for Android) and GoogleService-Info.plist for iOS. So what you need to do is to inject them before the build…. Let’s write the code!

Create a new file named appcenter-pre-build.sh (so AppCenter can recognise and run it before building):

echo "Injecting secrets..."
echo "Updating Google JSON"
echo $GOOGLE_SERVICES_JSON | base64 --decode > "$APPCENTER_SOURCE_DIRECTORY/android/app/google-services.json"
echo "Updating Google plist"
echo $GOOGLE_SERVICES_PLIST | base64 --decode > "$APPCENTER_SOURCE_DIRECTORY/ios/GoogleService-Info.plist"
echo "Updating android secret"
echo $ANDROID_SECRET > "$APPCENTER_SOURCE_DIRECTORY/android/app/src/main/assets/appcenter-config.json"
echo "Updating iOS secret"
echo $IOS_SECRET > "$APPCENTER_SOURCE_DIRECTORY/ios/Glitz/AppCenter-Config.plist"
echo "Finished injecting secrets."

This code is for both platforms, you can edit it however you like.

Now the last thing there is to do is to insert the environment variables!

Environment Variables

As our code shows, we have 4 environment variables. Let’s go to the build configuration again, expand Environment Variables, and add our 4 variables:

GOOGLE_SERVICES_JSON, GOOGLE_SERVICES_PLIST, ANDROID_SECRET, IOS_SECRET.

Make sure to base64 encode the JSON values before entering them!

(You can use this site)

Now our build should run, and it should show Injecting secrets… somewhere in the middle!

How To Setup AppCenter with GitLab Without Pushing Secrets

Learn More

HTML5 & CSS3 tutorial: From Beginner to Expert
Complete Python: Go from zero to hero in Python
Angular 7 Tutorial - Learn Angular 7 by Example
Express.js & Node.js Course for Beginners - Full Tutorial
An A-Z of useful Python tricks
A Complete Machine Learning Project Walk-Through in Python
MongoDB with Python Crash Course - Tutorial for Beginners
PHP Programming Language - PHP Tutorial for Beginners
Flutter Tutorial - Flight List UI Example In Flutter
Python Tutorial for Beginners (2019) - Learn Python for Machine Learning and Web Development

Originally published at gist.github.com.

Suggest