Skip to content

Instantly share code, notes, and snippets.

@hemanth-manoharan

hemanth-manoharan/electrode-native-helloworld.md

Last active October 1, 2023 13:51
Show Gist options
  • Save hemanth-manoharan/edb363d575d5c9ab22cbc93b595b8fba to your computer and use it in GitHub Desktop.
Save hemanth-manoharan/edb363d575d5c9ab22cbc93b595b8fba to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. hemanth-manoharan revised this gist Jan 23, 2021. 1 changed file with 5 additions and 1 deletion.
    6 changes: 5 additions & 1 deletion electrode-native-helloworld.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,11 @@
    # Tutorial #1: How to create a mini app in Electrode Native and embed it within an outer Android native app

    This is the first in a series of posts around Electrode Native.
    Trying to take real-world scenarios into account as part of the same.

    Was not able to directly find a "hello world" type of guide that demonstrates all the capabilities of Electrode Native - like mini-app packaging and OTA (Over-The-Air updates) in the documentation here - https://www.electrode.io/site/docs/getting_started.html

    Hence, decided to write one as part of my journey.
    These posts are more focused on getting the code running than on explanation of the underlying concepts. For details on the concepts, please refer to the Electrode Native documentation directly.

    **Note**: Electrode Native version at the time of writing this tutorial - v0.45.5

  2. hemanth-manoharan revised this gist Jan 7, 2021. 1 changed file with 19 additions and 28 deletions.
    47 changes: 19 additions & 28 deletions electrode-native-helloworld.md
    View file
    Original file line number Diff line number Diff line change
    @@ -5,11 +5,12 @@ Trying to take real-world scenarios into account as part of the same.

    **Note**: Electrode Native version at the time of writing this tutorial - v0.45.5

    **Note**: The tutorial assumes a basic knowledge of Android development and Git
    **Note**: The tutorial assumes a basic knowledge of Android development

    - First, install Electrode Native with the following command

    `npm install -g electrode-native`

    - Then, create a folder for this tutorial say 'ern'. Change directory into the same and run the following command.

    `ern create-miniapp app1-miniapp` where app1-miniapp is the name of the mini app we are creating.
    @@ -27,13 +28,14 @@ Trying to take real-world scenarios into account as part of the same.
    `yarn login`

    `yarn publish`

    Assuming the package/version is [email protected]

    - Now, create a Github repo for the cauldron repository where all the app metadata will be managed
    - Now, let's create a sub-folder to hold the cauldron repository under the `ern` folder itself, where all the app metadata will be managed. Let's say it's called `ern-outer-app-cauldron`

    - Now, create the cauldron itself

    `ern cauldron repo add ern-outer-app https://github.com/hemanth-manoharan/ern-outer-app-cauldron.git`
    `ern cauldron repo add ern-outer-app <full path to local cauldron repository directory>`

    - Then, create a basic hello-world Android app to be used as the outer wrapper native app in Android Studio.
    Let's assume its named ErnOuterApp
    @@ -50,28 +52,18 @@ Let's assume its named ErnOuterApp

    `ern create-container -d ErnOuterApp:android:0.0.1 -p android`

    - Create a git repo to publish the container. Then, run the publish command below

    `ern publish-container -p git --platform android -u https://github.com/hemanth-manoharan/app1-miniapp-container.git`

    - Now, clone the published repo.

    `git clone https://github.com/hemanth-manoharan/app1-miniapp-container.git`
    - Change directory to `~/.ern/containergen/out/android`. This directory contains the output of the previous command `create-container`

    - Change directory into the cloned repo and run the build
    - Then, run the build

    `./gradlew build`

    - The generated `.aar` file will be in the lib/build/outputs folder

    ~~- Follow the articles below to add the container to the native android app (ErnOuterApp) created earlier as a Git sub-module~~
    ~~https://native.electrode.io/reference/index-1/container-integration#adding-the-container-as-a-git-submodule~~
    ~~https://deepakpk.medium.com/how-to-add-a-git-android-library-project-as-a-sub-module-c713a653ab1f~~
    - The generated `.aar` file will be in the `lib/build/outputs/aar` folder

    - Now, add the .aar as a direct dependency in the native android app (ErnOuterApp) created earlier as explained below (**Ref**:
    https://stackoverflow.com/questions/16682847/how-to-manually-include-external-aar-package-using-new-gradle-android-build-syst)

    - Create a `libs` folder under `app` module in ErnOuterApp. Copy the `lib-debug.aar` file generated in the previous step into that folder.
    - Copy the `lib-debug.aar` file generated in the previous step into the `libs` folder under `app` module in ErnOuterApp.

    - In the `build.gradle` file at the project level, make the following change to add a `flatDir` in the `repositories` list

    @@ -114,30 +106,27 @@ https://native.electrode.io/reference/index-1/container-integration#configure-an

    **Note**: The name of the Activity can be found in the `AndroidManifest.xml` in the mini-app container repository that was published earlier.

    - Finally, launch the app in Android Studio and verify that the mini-app launches on the button press as expected.

    # Addendum for the unexpected
    - Now, launch the app in Android Studio and verify that the mini-app launches on the button press.

    - Surprise! Surprise! Weirdly, the `ElectrodeReactContainer` does not launch at this point as expected for me.
    It was failing with the following error.
    - Surprise! The `ElectrodeReactContainer` does not launch at this point. It fails with the following error.

    `java.lang.NoClassDefFoundError Failed resolution of lcom/facebook/soloader/SoLoader`

    It seems that the core React-Native "native modules" are not part of the mini-app aar.
    - This is because the core React-Native "native modules" are not part of the mini-app aar itself. They need to be added as a dependency of the outer app explicitly.

    - Hence, had to provide the required react-native modules to the outer android app namely, `ErnOuterApp`. The steps followed for the same below are a subset of the instructions at this link https://reactnative.dev/docs/integration-with-existing-apps

    ## Steps

    1. Create a new wrapper folder named `ernouterappwrapper`.

    2. Copy the existing `ErnOuterApp` android project to an `android` sub-folder.
    2. Move the contents of the existing `ErnOuterApp` android project to an `android` sub-folder under `ernouterappwrapper`

    3. At the root directory of the `ernouterappwrapper` wrapper folder - create a package.json file with the following content
    3. At the root directory of the `ernouterappwrapper` wrapper folder - create a `package.json` file with the following content

    ```
    {
    "name": "ErnOuterAppWrapper",
    "name": "ernouterappwrapper",
    "version": "0.0.1",
    "private": true,
    "scripts": {
    @@ -146,7 +135,7 @@ It seems that the core React-Native "native modules" are not part of the mini-ap
    }
    ```

    4. Then, run the following `yarn` commands to add react and react-native packages to the same.
    4. Then, run the following `yarn` commands in the `ernouterappwrapper` folder to add react and react-native packages to the same.

    ```
    yarn add react-native
    @@ -211,4 +200,6 @@ apply from: file("../../node_modules/@react-native-community/cli-platform-androi
    getApplication() /* Application instance */,
    new ElectrodeReactContainer.Config()
    /* Additional plugins configuration here */);
    ```
    ```

    9. Finally, launch the app in Android Studio and verify that the mini-app launches on the button press as expected.
  3. hemanth-manoharan revised this gist Jan 1, 2021. 1 changed file with 6 additions and 6 deletions.
    12 changes: 6 additions & 6 deletions electrode-native-helloworld.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,9 @@
    # Tutorial #1: How to create a mini app in Electrode Native and embed it within an outer Android native app

    This is the first in a series of posts around Electrode Native.
    Trying to take real-world scenarios into account as part of the same.

    Electrode Native version at the time of writing this tutorial - v0.45.5
    **Note**: Electrode Native version at the time of writing this tutorial - v0.45.5

    **Note**: The tutorial assumes a basic knowledge of Android development and Git

    @@ -61,14 +62,13 @@ Let's assume its named ErnOuterApp

    `./gradlew build`

    - The .aar file will be in the lib/build/outputs folder
    - The generated `.aar` file will be in the lib/build/outputs folder

    ~~- Follow the articles below to add the container to the native android app (ErnOuterApp) created earlier as a Git sub-module~~

    ~~https://native.electrode.io/reference/index-1/container-integration#adding-the-container-as-a-git-submodule~~
    ~~https://deepakpk.medium.com/how-to-add-a-git-android-library-project-as-a-sub-module-c713a653ab1f~~

    - Now add the .aar as a direct dependency in the native android app (ErnOuterApp) created earlier as explained below (**Ref**:
    - Now, add the .aar as a direct dependency in the native android app (ErnOuterApp) created earlier as explained below (**Ref**:
    https://stackoverflow.com/questions/16682847/how-to-manually-include-external-aar-package-using-new-gradle-android-build-syst)

    - Create a `libs` folder under `app` module in ErnOuterApp. Copy the `lib-debug.aar` file generated in the previous step into that folder.
    @@ -125,7 +125,7 @@ It was failing with the following error.

    It seems that the core React-Native "native modules" are not part of the mini-app aar.

    - Hence, had to provide the required react-native modules to the outer android app namely, ErnOuterApp. The steps followed for the same below are a subset of the instructions at this link https://reactnative.dev/docs/integration-with-existing-apps
    - Hence, had to provide the required react-native modules to the outer android app namely, `ErnOuterApp`. The steps followed for the same below are a subset of the instructions at this link https://reactnative.dev/docs/integration-with-existing-apps

    ## Steps

    @@ -146,7 +146,7 @@ It seems that the core React-Native "native modules" are not part of the mini-ap
    }
    ```

    4. Then run the following `yarn` commands to add react and react-native packages to the same.
    4. Then, run the following `yarn` commands to add react and react-native packages to the same.

    ```
    yarn add react-native
  4. hemanth-manoharan revised this gist Dec 30, 2020. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion electrode-native-helloworld.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,6 @@
    # How to create a mini app in Electrode Native and embed it within an outer Android native app
    # Tutorial #1: How to create a mini app in Electrode Native and embed it within an outer Android native app

    This is the first in a series of posts around Electrode Native.

    Electrode Native version at the time of writing this tutorial - v0.45.5

  5. hemanth-manoharan revised this gist Dec 30, 2020. 1 changed file with 9 additions and 0 deletions.
    9 changes: 9 additions & 0 deletions electrode-native-helloworld.md
    View file
    Original file line number Diff line number Diff line change
    @@ -200,4 +200,13 @@ Next add the following entry at the very bottom of the app/build.gradle:

    ```
    apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
    ```

    8. Finally, modify the following code snippet in the `onCreate` method of `MainActivity` to remove the `isReactNativeDeveloperSupport` setting so that it renders the content of the mini app directly.

    ```
    ElectrodeReactContainer.initialize(
    getApplication() /* Application instance */,
    new ElectrodeReactContainer.Config()
    /* Additional plugins configuration here */);
    ```
  6. hemanth-manoharan revised this gist Dec 30, 2020. 1 changed file with 15 additions and 0 deletions.
    15 changes: 15 additions & 0 deletions electrode-native-helloworld.md
    View file
    Original file line number Diff line number Diff line change
    @@ -186,3 +186,18 @@ allprojects {
    }
    }
    ```

    7. Enable native modules autolinking
    (**Ref**: https://reactnative.dev/docs/integration-with-existing-apps#enable-native-modules-autolinking)

    To use the power of autolinking, we have to apply it a few places. First add the following entry to settings.gradle:

    ```
    apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
    ```

    Next add the following entry at the very bottom of the app/build.gradle:

    ```
    apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
    ```
  7. hemanth-manoharan revised this gist Dec 30, 2020. 1 changed file with 65 additions and 2 deletions.
    67 changes: 65 additions & 2 deletions electrode-native-helloworld.md
    View file
    Original file line number Diff line number Diff line change
    @@ -116,10 +116,73 @@ https://native.electrode.io/reference/index-1/container-integration#configure-an

    # Addendum for the unexpected

    - Surprise! Surprise! Weirdly, the ElectrodeReactContainer does not launch at this point as expected for me.
    It was failing with the following error. It seems that the core React-Native "native modules" are not part of the mini-app aar.
    - Surprise! Surprise! Weirdly, the `ElectrodeReactContainer` does not launch at this point as expected for me.
    It was failing with the following error.

    `java.lang.NoClassDefFoundError Failed resolution of lcom/facebook/soloader/SoLoader`

    It seems that the core React-Native "native modules" are not part of the mini-app aar.

    - Hence, had to provide the required react-native modules to the outer android app namely, ErnOuterApp. The steps followed for the same below are a subset of the instructions at this link https://reactnative.dev/docs/integration-with-existing-apps

    ## Steps

    1. Create a new wrapper folder named `ernouterappwrapper`.

    2. Copy the existing `ErnOuterApp` android project to an `android` sub-folder.

    3. At the root directory of the `ernouterappwrapper` wrapper folder - create a package.json file with the following content

    ```
    {
    "name": "ErnOuterAppWrapper",
    "version": "0.0.1",
    "private": true,
    "scripts": {
    "start": "yarn react-native start"
    }
    }
    ```

    4. Then run the following `yarn` commands to add react and react-native packages to the same.

    ```
    yarn add react-native
    yarn add [email protected]
    ```

    The version used for react in the 2nd command is based on a warning that will have been printed for the first command like the following

    `warning "[email protected]" has unmet peer dependency "[email protected]".`

    5. Now, add the React Native dependency in the `build.gradle` file in the app module in the `ErnOuterApp` android app

    ```
    dependencies {
    implementation 'androidx.appcompat:appcompat:1.2.0'
    ...
    implementation "com.facebook.react:react-native:+" // From node_modules
    api(name:'lib-debug',ext:'aar')
    ...
    }
    ```

    6. Add an entry for the local React Native directorie to the top-level `build.gradle`. Be sure to add it to the “allprojects” block, above other maven repositories so that it looks as follows.

    ```
    allprojects {
    repositories {
    maven {
    // All of React Native (JS, Android binaries) is installed from npm
    url "$rootDir/../node_modules/react-native/android"
    }
    google()
    jcenter()
    flatDir {
    dirs 'libs'
    }
    }
    }
    ```
  8. hemanth-manoharan revised this gist Dec 30, 2020. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions electrode-native-helloworld.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    # How to create a mini app in Electrode Native and embed it within an outer Android native app

    Electrode Native version at the time of writing this tutorial - v0.45.5

    **Note**: The tutorial assumes a basic knowledge of Android development and Git
    @@ -112,6 +114,8 @@ https://native.electrode.io/reference/index-1/container-integration#configure-an

    - Finally, launch the app in Android Studio and verify that the mini-app launches on the button press as expected.

    # Addendum for the unexpected

    - Surprise! Surprise! Weirdly, the ElectrodeReactContainer does not launch at this point as expected for me.
    It was failing with the following error. It seems that the core React-Native "native modules" are not part of the mini-app aar.

  9. hemanth-manoharan revised this gist Dec 30, 2020. 1 changed file with 10 additions and 1 deletion.
    11 changes: 10 additions & 1 deletion electrode-native-helloworld.md
    View file
    Original file line number Diff line number Diff line change
    @@ -14,9 +14,10 @@ Electrode Native version at the time of writing this tutorial - v0.45.5
    - Then, change directory into the app1-miniapp folder that has been created and run

    `ern run-android`

    - By now, the mini-app should be running within the default Runner app provided by Electrode Native

    - Then, publish the mini app (**Ref**: https://classic.yarnpkg.com/en/docs/publishing-a-package/ )
    - Then, publish the mini app (**Ref**: https://classic.yarnpkg.com/en/docs/publishing-a-package/)

    `yarn login`

    @@ -110,3 +111,11 @@ https://native.electrode.io/reference/index-1/container-integration#configure-an
    **Note**: The name of the Activity can be found in the `AndroidManifest.xml` in the mini-app container repository that was published earlier.

    - Finally, launch the app in Android Studio and verify that the mini-app launches on the button press as expected.

    - Surprise! Surprise! Weirdly, the ElectrodeReactContainer does not launch at this point as expected for me.
    It was failing with the following error. It seems that the core React-Native "native modules" are not part of the mini-app aar.

    `java.lang.NoClassDefFoundError Failed resolution of lcom/facebook/soloader/SoLoader`

    - Hence, had to provide the required react-native modules to the outer android app namely, ErnOuterApp. The steps followed for the same below are a subset of the instructions at this link https://reactnative.dev/docs/integration-with-existing-apps

  10. hemanth-manoharan revised this gist Dec 30, 2020. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions electrode-native-helloworld.md
    View file
    Original file line number Diff line number Diff line change
    @@ -108,3 +108,5 @@ https://native.electrode.io/reference/index-1/container-integration#configure-an
    ```

    **Note**: The name of the Activity can be found in the `AndroidManifest.xml` in the mini-app container repository that was published earlier.

    - Finally, launch the app in Android Studio and verify that the mini-app launches on the button press as expected.
  11. hemanth-manoharan revised this gist Dec 30, 2020. 1 changed file with 5 additions and 7 deletions.
    12 changes: 5 additions & 7 deletions electrode-native-helloworld.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    Electrode Native version at the time of writing this tutorial - v0.45.5

    Note: The tutorial assumes a basic knowledge of Android development and Git
    **Note**: The tutorial assumes a basic knowledge of Android development and Git

    - First, install Electrode Native with the following command

    @@ -16,7 +16,7 @@ Note: The tutorial assumes a basic knowledge of Android development and Git
    `ern run-android`
    - By now, the mini-app should be running within the default Runner app provided by Electrode Native

    - Then, publish the mini app (refer - https://classic.yarnpkg.com/en/docs/publishing-a-package/ )
    - Then, publish the mini app (**Ref**: https://classic.yarnpkg.com/en/docs/publishing-a-package/ )

    `yarn login`

    @@ -63,7 +63,7 @@ Let's assume its named ErnOuterApp
    ~~https://native.electrode.io/reference/index-1/container-integration#adding-the-container-as-a-git-submodule~~
    ~~https://deepakpk.medium.com/how-to-add-a-git-android-library-project-as-a-sub-module-c713a653ab1f~~

    - Now add the .aar as a direct dependency in the native android app (ErnOuterApp) created earlier as explained below (Ref:
    - Now add the .aar as a direct dependency in the native android app (ErnOuterApp) created earlier as explained below (**Ref**:
    https://stackoverflow.com/questions/16682847/how-to-manually-include-external-aar-package-using-new-gradle-android-build-syst)

    - Create a `libs` folder under `app` module in ErnOuterApp. Copy the `lib-debug.aar` file generated in the previous step into that folder.
    @@ -88,7 +88,7 @@ https://stackoverflow.com/questions/16682847/how-to-manually-include-external-aa

    https://native.electrode.io/reference/index-1/container-integration#configure-android-build-configuration-versions

    - Then, initialize the library as explained below (Ref: https://native.electrode.io/reference/index-1/container-initialization)
    - Then, initialize the library as explained below (**Ref**: https://native.electrode.io/reference/index-1/container-initialization)

    - Add the following code snippet in the `onCreate` method of `MainActivity`

    @@ -100,13 +100,11 @@ https://native.electrode.io/reference/index-1/container-integration#configure-an
    ```

    - Add a button in `MainActivity`. In the button click handler, add the following snippet to launch the mini-app
    (Ref: https://native.electrode.io/reference/index-1/launching-miniapps)
    (**Ref**: https://native.electrode.io/reference/index-1/launching-miniapps)

    ```
    Intent intent = new Intent(this, App1MiniappActivity.class);
    startActivity(intent);
    ```

    **Note**: The name of the Activity can be found in the `AndroidManifest.xml` in the mini-app container repository that was published earlier.


  12. hemanth-manoharan revised this gist Dec 30, 2020. 1 changed file with 24 additions and 1 deletion.
    25 changes: 24 additions & 1 deletion electrode-native-helloworld.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,7 @@
    Electrode Native version at the time of writing this tutorial - v0.45.5

    Note: The tutorial assumes a basic knowledge of Android development and Git

    - First, install Electrode Native with the following command

    `npm install -g electrode-native`
    @@ -86,4 +88,25 @@ https://stackoverflow.com/questions/16682847/how-to-manually-include-external-aa

    https://native.electrode.io/reference/index-1/container-integration#configure-android-build-configuration-versions

    - Then, initialize the library as explained below (Ref: https://native.electrode.io/reference/index-1/container-initialization)
    - Then, initialize the library as explained below (Ref: https://native.electrode.io/reference/index-1/container-initialization)

    - Add the following code snippet in the `onCreate` method of `MainActivity`

    ```
    ElectrodeReactContainer.initialize(
    getApplication() /* Application instance */,
    new ElectrodeReactContainer.Config().isReactNativeDeveloperSupport(BuildConfig.DEBUG)
    /* Additional plugins configuration here */);
    ```

    - Add a button in `MainActivity`. In the button click handler, add the following snippet to launch the mini-app
    (Ref: https://native.electrode.io/reference/index-1/launching-miniapps)

    ```
    Intent intent = new Intent(this, App1MiniappActivity.class);
    startActivity(intent);
    ```

    **Note**: The name of the Activity can be found in the `AndroidManifest.xml` in the mini-app container repository that was published earlier.


  13. hemanth-manoharan revised this gist Dec 30, 2020. 1 changed file with 23 additions and 3 deletions.
    26 changes: 23 additions & 3 deletions electrode-native-helloworld.md
    View file
    Original file line number Diff line number Diff line change
    @@ -61,9 +61,29 @@ Let's assume its named ErnOuterApp
    ~~https://native.electrode.io/reference/index-1/container-integration#adding-the-container-as-a-git-submodule~~
    ~~https://deepakpk.medium.com/how-to-add-a-git-android-library-project-as-a-sub-module-c713a653ab1f~~

    - Now add the .aar as a direct dependency in the native android app (ErnOuterApp) created earlier as explained in the article below.
    - Now add the .aar as a direct dependency in the native android app (ErnOuterApp) created earlier as explained below (Ref:
    https://stackoverflow.com/questions/16682847/how-to-manually-include-external-aar-package-using-new-gradle-android-build-syst)

    https://stackoverflow.com/questions/16682847/how-to-manually-include-external-aar-package-using-new-gradle-android-build-syst
    - Create a `libs` folder under `app` module in ErnOuterApp. Copy the `lib-debug.aar` file generated in the previous step into that folder.

    - In the `build.gradle` file at the project level, make the following change to add a `flatDir` in the `repositories` list

    `allprojects {
    repositories {
    google()
    jcenter()
    flatDir {
    dirs 'libs'
    }
    }
    }`

    - In the `build.gradle` file at the `app` module level, add the following dependency

    `api(name:'lib-debug',ext:'aar')`

    - Continue on to the next step after verifying the build configuration at the link below

    - Continue on to the next step
    https://native.electrode.io/reference/index-1/container-integration#configure-android-build-configuration-versions

    - Then, initialize the library as explained below (Ref: https://native.electrode.io/reference/index-1/container-initialization)
  14. hemanth-manoharan revised this gist Dec 30, 2020. 1 changed file with 12 additions and 9 deletions.
    21 changes: 12 additions & 9 deletions electrode-native-helloworld.md
    View file
    Original file line number Diff line number Diff line change
    @@ -46,21 +46,24 @@ Let's assume its named ErnOuterApp

    `ern publish-container -p git --platform android -u https://github.com/hemanth-manoharan/app1-miniapp-container.git`

    ~~- Now, clone the published repo.~~
    - Now, clone the published repo.

    ~~`git clone https://github.com/hemanth-manoharan/app1-miniapp-container.git`~~
    `git clone https://github.com/hemanth-manoharan/app1-miniapp-container.git`

    ~~- Change directory into the cloned repo and run the build~~
    - Change directory into the cloned repo and run the build

    ~~`./gradlew build`~~
    `./gradlew build`

    ~~- The .aar file will be in the lib/build/outputs folder~~
    - The .aar file will be in the lib/build/outputs folder

    - Follow the articles below to add the container to the native android app (ErnOuterApp) created earlier as a Git sub-module
    ~~- Follow the articles below to add the container to the native android app (ErnOuterApp) created earlier as a Git sub-module~~

    https://native.electrode.io/reference/index-1/container-integration#adding-the-container-as-a-git-submodule
    https://deepakpk.medium.com/how-to-add-a-git-android-library-project-as-a-sub-module-c713a653ab1f
    ~~https://native.electrode.io/reference/index-1/container-integration#adding-the-container-as-a-git-submodule~~
    ~~https://deepakpk.medium.com/how-to-add-a-git-android-library-project-as-a-sub-module-c713a653ab1f~~

    - Continue on to the next step
    - Now add the .aar as a direct dependency in the native android app (ErnOuterApp) created earlier as explained in the article below.

    https://stackoverflow.com/questions/16682847/how-to-manually-include-external-aar-package-using-new-gradle-android-build-syst

    - Continue on to the next step
    https://native.electrode.io/reference/index-1/container-integration#configure-android-build-configuration-versions
  15. hemanth-manoharan revised this gist Dec 29, 2020. 1 changed file with 5 additions and 5 deletions.
    10 changes: 5 additions & 5 deletions electrode-native-helloworld.md
    View file
    Original file line number Diff line number Diff line change
    @@ -46,15 +46,15 @@ Let's assume its named ErnOuterApp

    `ern publish-container -p git --platform android -u https://github.com/hemanth-manoharan/app1-miniapp-container.git`

    ~~- Now, clone the published repo.
    ~~- Now, clone the published repo.~~

    ~~`git clone https://github.com/hemanth-manoharan/app1-miniapp-container.git`
    ~~`git clone https://github.com/hemanth-manoharan/app1-miniapp-container.git`~~

    ~~- Change directory into the cloned repo and run the build
    ~~- Change directory into the cloned repo and run the build~~

    ~~`./gradlew build`
    ~~`./gradlew build`~~

    ~~- The .aar file will be in the lib/build/outputs folder
    ~~- The .aar file will be in the lib/build/outputs folder~~

    - Follow the articles below to add the container to the native android app (ErnOuterApp) created earlier as a Git sub-module

  16. hemanth-manoharan revised this gist Dec 29, 2020. 1 changed file with 9 additions and 8 deletions.
    17 changes: 9 additions & 8 deletions electrode-native-helloworld.md
    View file
    Original file line number Diff line number Diff line change
    @@ -46,20 +46,21 @@ Let's assume its named ErnOuterApp

    `ern publish-container -p git --platform android -u https://github.com/hemanth-manoharan/app1-miniapp-container.git`

    - Now, clone the published repo.
    ~~- Now, clone the published repo.

    `git clone https://github.com/hemanth-manoharan/app1-miniapp-container.git`
    ~~`git clone https://github.com/hemanth-manoharan/app1-miniapp-container.git`

    - Change directory into the cloned repo and run the build
    ~~- Change directory into the cloned repo and run the build

    `./gradlew build`
    ~~`./gradlew build`

    - The .aar file will be in the lib/build/outputs folder
    ~~- The .aar file will be in the lib/build/outputs folder

    - Follow the steps here to add the container to the native android app created earlier

    TODO
    - Follow the articles below to add the container to the native android app (ErnOuterApp) created earlier as a Git sub-module

    https://native.electrode.io/reference/index-1/container-integration#adding-the-container-as-a-git-submodule
    https://deepakpk.medium.com/how-to-add-a-git-android-library-project-as-a-sub-module-c713a653ab1f

    - Continue on to the next step

    https://native.electrode.io/reference/index-1/container-integration#configure-android-build-configuration-versions
  17. hemanth-manoharan revised this gist Dec 29, 2020. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions electrode-native-helloworld.md
    View file
    Original file line number Diff line number Diff line change
    @@ -61,4 +61,5 @@ Let's assume its named ErnOuterApp
    TODO

    https://native.electrode.io/reference/index-1/container-integration#adding-the-container-as-a-git-submodule
    https://deepakpk.medium.com/how-to-add-a-git-android-library-project-as-a-sub-module-c713a653ab1f

  18. hemanth-manoharan revised this gist Dec 29, 2020. 1 changed file with 3 additions and 2 deletions.
    5 changes: 3 additions & 2 deletions electrode-native-helloworld.md
    View file
    Original file line number Diff line number Diff line change
    @@ -56,8 +56,9 @@ Let's assume its named ErnOuterApp

    - The .aar file will be in the lib/build/outputs folder

    - Follow the steps here to add the aar to the native android app created earlier
    - Follow the steps here to add the container to the native android app created earlier

    TODO
    https://native.electrode.io/reference/index-1/container-integration#adding-the-container-as-an-aar

    https://native.electrode.io/reference/index-1/container-integration#adding-the-container-as-a-git-submodule

  19. hemanth-manoharan revised this gist Dec 29, 2020. 1 changed file with 7 additions and 1 deletion.
    8 changes: 7 additions & 1 deletion electrode-native-helloworld.md
    View file
    Original file line number Diff line number Diff line change
    @@ -54,4 +54,10 @@ Let's assume its named ErnOuterApp

    `./gradlew build`

    - The .aar file will be in the lib/build/outputs folder
    - The .aar file will be in the lib/build/outputs folder

    - Follow the steps here to add the aar to the native android app created earlier

    TODO
    https://native.electrode.io/reference/index-1/container-integration#adding-the-container-as-an-aar

  20. hemanth-manoharan revised this gist Dec 29, 2020. 1 changed file with 25 additions and 0 deletions.
    25 changes: 25 additions & 0 deletions electrode-native-helloworld.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,32 +1,57 @@
    Electrode Native version at the time of writing this tutorial - v0.45.5

    - First, install Electrode Native with the following command

    `npm install -g electrode-native`
    - Then, create a folder for this tutorial say 'ern'. Change directory into the same and run the following command.

    `ern create-miniapp app1-miniapp` where app1-miniapp is the name of the mini app we are creating.

    - Now, start up the Android emulator.

    - Then, change directory into the app1-miniapp folder that has been created and run

    `ern run-android`
    - By now, the mini-app should be running within the default Runner app provided by Electrode Native

    - Then, publish the mini app (refer - https://classic.yarnpkg.com/en/docs/publishing-a-package/ )

    `yarn login`

    `yarn publish`
    Assuming the package/version is [email protected]

    - Now, create a Github repo for the cauldron repository where all the app metadata will be managed

    - Now, create the cauldron itself

    `ern cauldron repo add ern-outer-app https://github.com/hemanth-manoharan/ern-outer-app-cauldron.git`

    - Then, create a basic hello-world Android app to be used as the outer wrapper native app in Android Studio.
    Let's assume its named ErnOuterApp

    - Now, add the same to the cauldron

    `ern cauldron add nativeapp ErnOuterApp:android:0.0.1`

    - Now, add the miniapp created earlier to the same cauldron

    `ern cauldron add miniapps [email protected]`

    - Then, lets create the container locally using the cauldron metadata.

    `ern create-container -d ErnOuterApp:android:0.0.1 -p android`

    - Create a git repo to publish the container. Then, run the publish command below

    `ern publish-container -p git --platform android -u https://github.com/hemanth-manoharan/app1-miniapp-container.git`

    - Now, clone the published repo.

    `git clone https://github.com/hemanth-manoharan/app1-miniapp-container.git`

    - Change directory into the cloned repo and run the build

    `./gradlew build`

    - The .aar file will be in the lib/build/outputs folder
  21. hemanth-manoharan revised this gist Dec 29, 2020. 1 changed file with 9 additions and 0 deletions.
    9 changes: 9 additions & 0 deletions electrode-native-helloworld.md
    View file
    Original file line number Diff line number Diff line change
    @@ -21,3 +21,12 @@ Let's assume its named ErnOuterApp
    `ern cauldron add nativeapp ErnOuterApp:android:0.0.1`
    - Now, add the miniapp created earlier to the same cauldron
    `ern cauldron add miniapps [email protected]`
    - Then, lets create the container locally using the cauldron metadata.
    `ern create-container -d ErnOuterApp:android:0.0.1 -p android`
    - Create a git repo to publish the container. Then, run the publish command below
    `ern publish-container -p git --platform android -u https://github.com/hemanth-manoharan/app1-miniapp-container.git`
    - Now, clone the published repo.
    `git clone https://github.com/hemanth-manoharan/app1-miniapp-container.git`
    - Change directory into the cloned repo and run the build
    `./gradlew build`
    - The .aar file will be in the lib/build/outputs folder
  22. hemanth-manoharan created this gist Dec 29, 2020.
    23 changes: 23 additions & 0 deletions electrode-native-helloworld.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    Electrode Native version at the time of writing this tutorial - v0.45.5

    - First, install Electrode Native with the following command
    `npm install -g electrode-native`
    - Then, create a folder for this tutorial say 'ern'. Change directory into the same and run the following command.
    `ern create-miniapp app1-miniapp` where app1-miniapp is the name of the mini app we are creating.
    - Now, start up the Android emulator.
    - Then, change directory into the app1-miniapp folder that has been created and run
    `ern run-android`
    - By now, the mini-app should be running within the default Runner app provided by Electrode Native
    - Then, publish the mini app (refer - https://classic.yarnpkg.com/en/docs/publishing-a-package/ )
    `yarn login`
    `yarn publish`
    Assuming the package/version is [email protected]
    - Now, create a Github repo for the cauldron repository where all the app metadata will be managed
    - Now, create the cauldron itself
    `ern cauldron repo add ern-outer-app https://github.com/hemanth-manoharan/ern-outer-app-cauldron.git`
    - Then, create a basic hello-world Android app to be used as the outer wrapper native app in Android Studio.
    Let's assume its named ErnOuterApp
    - Now, add the same to the cauldron
    `ern cauldron add nativeapp ErnOuterApp:android:0.0.1`
    - Now, add the miniapp created earlier to the same cauldron
    `ern cauldron add miniapps [email protected]`