Guide

An Angular App templete with Build, Release and CD for Web, Desktop, and Android platform

Linux Electron App build, Snapcraft Release, and Actions

Build and Release

Clone the repo

git clone https://github.com/Efshal/boilerplate-monorepo.git

Run npm install

npm install

Install snapcraft for releasing .snap of your electron app to Snapcraft

sudo apt update
sudo apt install snapd

brew install snapcraft

Run snapcraft init to setup snap/snapcraft.yaml

snapcraft init

Register your app name, following steps from this link https://snapcraft.io/docs/registering-your-app-name

Then set "name" key with registered app name in package.json

Also set "name" key with registered app name in snapcraft.yaml

Run npm run electron:package to build .snap file of your Electron App

npm run electron:package

A "release" folder will be created in the root directory of your project with .snap file of your electron app.

Return to the terminal and the location of your .snap file ("release" folder). You now need to authenticate the snapcraft command using your Snapcraft developer account credentials. This can be accomplished with the following:

snapcraft login

Next, upload the snap and release it into the stable channel, replace with your built snap. You can find the file in release folder e.g(mysnap_0.0.0_amd64.snap):

snapcraft upload --release=stable <snap-file-name>.snap

Congratulations, your snap has now been released and is available on the Snap Store You can also install your app via:

sudo snap install <app-name>

Actions

This is a Github Action that can be used to publish snap packages to the Snap Store built by snapcore.

This action is already written in .github/workflows/sanpcraft.yaml, you have to first produce data using command below:

$ snapcraft export-login --snaps=PACKAGE_NAME \
      --acls package_access,package_push,package_update,package_release \
      exported.txt

This will produce a file exported.txt containing the login data, which should be a multi-line file starting with [login.ubuntu.com].

In order to make the credentials available to the workflow, they should be stored as a repository secret:

1. choose the "Settings" tab.
2. choose "Secrets" from the menu on the left.
3. click "Add a new secret".
4. set the name to STORE_LOGIN, and paste the contents of exported.txt as the value.

This will build the project, upload the result to the store, and release it to the edge channel.

Web Application build and Firebase Deployment

Build your project first

ng build

Create a new project on Firebase

Click on Hosting section in Side Panel

Then Click Get Started

Follow Steps to Setup Firebase Hosting for your Project

Do not tick this option

On running firebase init a list of options will appear

Select Firebase Hosting

Answer these questions as done below:

Run

 firebase deploy

Select Existing Project option and then select project you made earlier on firebase website.

Your Application will be deployed

Android Build, Signing, and PlayStore Deployment

Android Deployment

Now at this stage we are ready with the Android build after going through the overall process from generating the key to signed the build release.In order to deploy the build to the Google play console, we used Fastlane (The easiest way to build and release mobile apps.fastlane handles tedious tasks so you don’t have to.) Following steps need to be followed:

Configuration

1. Firstly install the Fastlane in respective OS (mac/windows/linux).
2. Ruby must be installed in the system for installing fastlane init.
3. After setting up the fastlane package, now you are good to go towards the real essence of fastlane.
4. Initialize the fastlane using “fastlane init” in the Android folder present in the root of the project for e.g root/Android/.
5. You will see the directory fastlane having 2 files named Appfile and Fastfile.

Creating Play Console credentials

To connect fastlane with Play Console, you need to provide appropriate credentials in the form of an API key file. This file contains the credentials that fastlane will use to connect to your Google Play Console account and make updates on your behalf.

To create a key file, follow these steps from the fastlane official documentation. Once your key file is created, you can connect fastlane with your Google Play Console APIs.

1. You can validate your key using the command:

fastlane run validate_play_store_json_key json_key:/path/to/your/downloaded/file.json

2. Next, add your key file to fastlane. Open the fastlane/Appfile and update the json_key_file property with your key file location.

json_key_file("./api-key.json")

Writing Fastlane actions and lane:

Open Fastfile and write lanes for testing, increment version code, and deploying.

Test

Run

fastlane test

Increment version code:

Versioning is much easier with fastlane; you simply need to add the plugin shown below:

fastlane add_plugin increment_version_code

Once the plugin is installed, open your Fastfile and add a lane to increment the version code automatically:

Run

fastlane increment_vc

Deploy

1. Google Play console changed its policy of accepting only AAB file rather than APK file, so the bundleRelease command will generate the aab file.
2. You need to first upload the aab file to Google play manually, following all the policy guidelines, so that Fastlane can handle the automating the deployment to Google Play after that.
3. In this case aab file manually uploaded to Internal Testing , Please make sure the package name should be defined in aab file must be similar to when initializing the fastlane init at the very start.

4. Don't worry you can change that also AndroidManifest.xml (android/app/src/main/AndroidManifest.xml) file under the tag “package”, in build.gradle (android/app/build.gradle) file under the tag “applicationId”, and in Appfile (android/fastlane/Appfile) file under the tag “package_name”.

Run

fastlane deploy

5. After Successful completion of fastlane

6. You can direct to Google play console dashboard to see the recent release published through fastlane.

7. That’s it, we have successfully managed the application.