electrode-io/electrode-native

A platform to ease integration&delivery of React Native apps in existing mobile applications

Electrode Native is a mobile platform that streamlines the integration of React Native components into existing mobile applications. With minimal changes required to the application code base and infrastructure, Electrode Native makes it simpler to leverage React Native potential in any mobile application.

Test Suite	Status
Unit Tests
System Tests

Getting Started

Prerequisites

• Node.js >= 12
• npm >= 5.6.0
• Android Studio (for Android apps)
• Xcode >= 10 (for iOS apps)
• CocoaPods (if using a version of React Native >= 0.60)

Install

npm install -g electrode-native

Documentation

The documentation of Electrode Native is maintained as GitBook pages in the docs directory. It is divided into multiple sections:

• An Overview of Electrode Native

This should be read first, as an introduction to learn about what is Electrode Native or what is a MiniApp. This section also contains some documentation regarding the Electrode Native workflow, native dependencies management or JS/Native communication.

• A Platform Reference section

This section covers each Electrode Native module in depth, such as Container, Cauldron, Manifest, Apis ...

• A CLI command reference section

In this section you will find a documentation page for each of the CLI commands available in Electrode Native, for example create-miniapp, run-android, platform use ...

Contributing

We embrace contributions, be it documentation, issue reporting, or contributing code.

Please read our CONTRIBUTING guide for more details on how to contribute.

Further Reading

• Check out our Announcement Blog Post.
• Have a look at the TechCrunch article.
• See What is Electrode Native for more details on Electrode Native.
• Read Electrode Native Case Study to learn about key facts.

License

Copyright 2017 WalmartLabs

Licensed under the Apache License, Version 2.0.

Support and Acknowledgment

We'd like to thank our employer, WalmartLabs because we can work on the development of Electrode Native platform as Open Sourced Software for the needs of our internal teams and projects.

We love the public community and the support we get, and we address your requests as much as we can.

We are always excited to get feedback, bug reports, and pull requests.

Thank you.

electrode-native's Issues

Upgrade Getting Started MiniApps to use RN 0.49

Depends on #150

Upgrade both MiniApps using ern upgrade-miniapp command with v1000.0.0 (RN 0.49 is declared in manifest of v1000.0.0).

Test, and update GItHub repos + publication of new version of both MiniApps to NPM.
Also update Getting Started guide for the last step when running both MiniApps together, the movielistdetailsminiapp version should be the latest one (on RN0.49)

'ern create-miniapp' comand giving error -> "No matching version found for [email protected]"

ern create-miniapp is failing due to wrong version of react-native in lookup. There is no 0.49.3 version of react-native right now. But it seems ern is looking for that. See error below. BTW in my system i do have react-native installed separately.

m-c02sx4qwgtdy:ern s2jha$ mkdir ElectrodeNativeTutorial
m-c02sx4qwgtdy:ern s2jha$ ern create-miniapp MovieListMiniApp
 ___ _        _               _       _  _      _   _
| __| |___ __| |_ _ _ ___  __| |___  | \| |__ _| |_(_)_ _____
| _|| / -_) _|  _| '_/ _ \/ _` / -_) | .` / _` |  _| \ V / -_)
|___|_\___\__|\__|_| \___/\__,_\___| |_|\_\__,_|\__|_|\_/\___|
[v0.8.0] [Cauldron: -NONE-]

NPM does not allow package names containing upper case letters.
? Type package name to publish to npm. Press Enter to use the default. movie-list-mini-app
Creating MovieListMiniApp MiniApp
✔ Retrieving react-native version from Manifest
✖ Error: Command failed: /Users/s2jha/.ern/versions/0.8.0/node_modules/.bin/react-native init MovieListMiniApp --version [email protected] --skip-jest
npm ERR! code ETARGET
npm ERR! notarget No matching version found for [email protected]
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/s2jha/.npm/_logs/2017-10-11T10_39_32_704Z-debug.log
{ Error: Command failed: npm install --save --save-exact [email protected]
    at checkExecSyncError (child_process.js:481:13)
    at execSync (child_process.js:521:13)
    at run (/Users/s2jha/.ern/versions/0.8.0/node_modules/react-native-cli/index.js:294:5)
    at createProject (/Users/s2jha/.ern/versions/0.8.0/node_modules/react-native-cli/index.js:249:3)
    at init (/Users/s2jha/.ern/versions/0.8.0/node_modules/react-native-cli/index.js:200:5)
    at Object.<anonymous> (/Users/s2jha/.ern/versions/0.8.0/node_modules/react-native-cli/index.js:153:7)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
  error: null,
  cmd: 'npm install --save --save-exact [email protected]',
  file: '/bin/sh',
  args:
   [ '/bin/sh',
     '-c',
     'npm install --save --save-exact [email protected]' ],
  options:
   { stdio: [ [Object], [Object], [Object] ],
     shell: true,
     file: '/bin/sh',
     args:
      [ '/bin/sh',
        '-c',
        'npm install --save --save-exact [email protected]' ],
     envPairs:
      [ 'TERM_PROGRAM=iTerm.app',
        'NVM_CD_FLAGS=',
        'SHELL=/bin/bash',
        'TERM=xterm-256color',
        'TMPDIR=/var/folders/72/wk6dblfd125dq4c3ssz8c68rwbk8sn/T/',
        'Apple_PubSub_Socket_Render=/private/tmp/com.apple.launchd.2nNtidK0Tx/Render',
        'TERM_PROGRAM_VERSION=3.1.3',
        'TERM_SESSION_ID=w0t0p0:6A447267-AA42-4AAB-B441-95E1A73315A9',
        'USER=s2jha',
        'NVM_DIR=/Users/s2jha/.nvm',
        'http_proxy=http://gec-proxy-svr.homeoffice.wal-mart.com:8080/',
        'COMMAND_MODE=unix2003',
        'SSH_AUTH_SOCK=/private/tmp/com.apple.launchd.Ko1A8eqyj5/Listeners',
        '__CF_USER_TEXT_ENCODING=0x38B92335:0x0:0x0',
        'PATH=/Users/s2jha/.nvm/versions/node/v6.11.0/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Java/JavaVirtualMachines/jdk1.8.0_112.jdk/Contents/Home/bin:/usr/local/apache-maven/apache-maven-3.3.9/bin',
        '_=/Users/s2jha/.ern/versions/0.8.0/node_modules/.bin/react-native',
        'PWD=/Users/s2jha/Documents/workspaces/ern',
        'JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_112.jdk/Contents/Home',
        'LANG=en_US.UTF-8',
        'ITERM_PROFILE=Default',
        'XPC_FLAGS=0x0',
        'https_proxy=http://gec-proxy-svr.homeoffice.wal-mart.com:8080/',
        'XPC_SERVICE_NAME=0',
        'COLORFGBG=7;0',
        'HOME=/Users/s2jha',
        'SHLVL=2',
        'M2_HOME=/usr/local/apache-maven/apache-maven-3.3.9',
        'ITERM_SESSION_ID=w0t0p0:6A447267-AA42-4AAB-B441-95E1A73315A9',
        'LOGNAME=s2jha',
        'NVM_BIN=/Users/s2jha/.nvm/versions/node/v6.11.0/bin',
        'SECURITYSESSIONID=186a9',
        'COLORTERM=truecolor' ] },
  envPairs:
   [ 'TERM_PROGRAM=iTerm.app',
     'NVM_CD_FLAGS=',
     'SHELL=/bin/bash',
     'TERM=xterm-256color',
     'TMPDIR=/var/folders/72/wk6dblfd125dq4c3ssz8c68rwbk8sn/T/',
     'Apple_PubSub_Socket_Render=/private/tmp/com.apple.launchd.2nNtidK0Tx/Render',
     'TERM_PROGRAM_VERSION=3.1.3',
     'TERM_SESSION_ID=w0t0p0:6A447267-AA42-4AAB-B441-95E1A73315A9',
     'USER=s2jha',
     'NVM_DIR=/Users/s2jha/.nvm',
     'http_proxy=http://gec-proxy-svr.homeoffice.wal-mart.com:8080/',
     'COMMAND_MODE=unix2003',
     'SSH_AUTH_SOCK=/private/tmp/com.apple.launchd.Ko1A8eqyj5/Listeners',
     '__CF_USER_TEXT_ENCODING=0x38B92335:0x0:0x0',
     'PATH=/Users/s2jha/.nvm/versions/node/v6.11.0/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Java/JavaVirtualMachines/jdk1.8.0_112.jdk/Contents/Home/bin:/usr/local/apache-maven/apache-maven-3.3.9/bin',
     '_=/Users/s2jha/.ern/versions/0.8.0/node_modules/.bin/react-native',
     'PWD=/Users/s2jha/Documents/workspaces/ern',
     'JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_112.jdk/Contents/Home',
     'LANG=en_US.UTF-8',
     'ITERM_PROFILE=Default',
     'XPC_FLAGS=0x0',
     'https_proxy=http://gec-proxy-svr.homeoffice.wal-mart.com:8080/',
     'XPC_SERVICE_NAME=0',
     'COLORFGBG=7;0',
     'HOME=/Users/s2jha',
     'SHLVL=2',
     'M2_HOME=/usr/local/apache-maven/apache-maven-3.3.9',
     'ITERM_SESSION_ID=w0t0p0:6A447267-AA42-4AAB-B441-95E1A73315A9',
     'LOGNAME=s2jha',
     'NVM_BIN=/Users/s2jha/.nvm/versions/node/v6.11.0/bin',
     'SECURITYSESSIONID=186a9',
     'COLORTERM=truecolor' ],
  stderr: null,
  stdout: null,
  pid: 5452,
  output: [ null, null, null ],
  signal: null,
  status: 1 }
Command `npm install --save --save-exact [email protected]` failed.

Command failed: /Users/s2jha/.ern/versions/0.8.0/node_modules/.bin/react-native init MovieListMiniApp --version [email protected] --skip-jest
npm ERR! code ETARGET
npm ERR! notarget No matching version found for [email protected]
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/s2jha/.npm/_logs/2017-10-11T10_39_32_704Z-debug.log
{ Error: Command failed: npm install --save --save-exact [email protected]
    at checkExecSyncError (child_process.js:481:13)
    at execSync (child_process.js:521:13)
    at run (/Users/s2jha/.ern/versions/0.8.0/node_modules/react-native-cli/index.js:294:5)
    at createProject (/Users/s2jha/.ern/versions/0.8.0/node_modules/react-native-cli/index.js:249:3)
    at init (/Users/s2jha/.ern/versions/0.8.0/node_modules/react-native-cli/index.js:200:5)
    at Object.<anonymous> (/Users/s2jha/.ern/versions/0.8.0/node_modules/react-native-cli/index.js:153:7)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
  error: null,
  cmd: 'npm install --save --save-exact [email protected]',
  file: '/bin/sh',
  args:
   [ '/bin/sh',
     '-c',
     'npm install --save --save-exact [email protected]' ],
  options:
   { stdio: [ [Object], [Object], [Object] ],
     shell: true,
     file: '/bin/sh',
     args:
      [ '/bin/sh',
        '-c',
        'npm install --save --save-exact [email protected]' ],
     envPairs:
      [ 'TERM_PROGRAM=iTerm.app',
        'NVM_CD_FLAGS=',
        'SHELL=/bin/bash',
        'TERM=xterm-256color',
        'TMPDIR=/var/folders/72/wk6dblfd125dq4c3ssz8c68rwbk8sn/T/',
        'Apple_PubSub_Socket_Render=/private/tmp/com.apple.launchd.2nNtidK0Tx/Render',
        'TERM_PROGRAM_VERSION=3.1.3',
        'TERM_SESSION_ID=w0t0p0:6A447267-AA42-4AAB-B441-95E1A73315A9',
        'USER=s2jha',
        'NVM_DIR=/Users/s2jha/.nvm',
        'http_proxy=http://gec-proxy-svr.homeoffice.wal-mart.com:8080/',
        'COMMAND_MODE=unix2003',
        'SSH_AUTH_SOCK=/private/tmp/com.apple.launchd.Ko1A8eqyj5/Listeners',
        '__CF_USER_TEXT_ENCODING=0x38B92335:0x0:0x0',
        'PATH=/Users/s2jha/.nvm/versions/node/v6.11.0/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Java/JavaVirtualMachines/jdk1.8.0_112.jdk/Contents/Home/bin:/usr/local/apache-maven/apache-maven-3.3.9/bin',
        '_=/Users/s2jha/.ern/versions/0.8.0/node_modules/.bin/react-native',
        'PWD=/Users/s2jha/Documents/workspaces/ern',
        'JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_112.jdk/Contents/Home',
        'LANG=en_US.UTF-8',
        'ITERM_PROFILE=Default',
        'XPC_FLAGS=0x0',
        'https_proxy=http://gec-proxy-svr.homeoffice.wal-mart.com:8080/',
        'XPC_SERVICE_NAME=0',
        'COLORFGBG=7;0',
        'HOME=/Users/s2jha',
        'SHLVL=2',
        'M2_HOME=/usr/local/apache-maven/apache-maven-3.3.9',
        'ITERM_SESSION_ID=w0t0p0:6A447267-AA42-4AAB-B441-95E1A73315A9',
        'LOGNAME=s2jha',
        'NVM_BIN=/Users/s2jha/.nvm/versions/node/v6.11.0/bin',
        'SECURITYSESSIONID=186a9',
        'COLORTERM=truecolor' ] },
  envPairs:
   [ 'TERM_PROGRAM=iTerm.app',
     'NVM_CD_FLAGS=',
     'SHELL=/bin/bash',
     'TERM=xterm-256color',
     'TMPDIR=/var/folders/72/wk6dblfd125dq4c3ssz8c68rwbk8sn/T/',
     'Apple_PubSub_Socket_Render=/private/tmp/com.apple.launchd.2nNtidK0Tx/Render',
     'TERM_PROGRAM_VERSION=3.1.3',
     'TERM_SESSION_ID=w0t0p0:6A447267-AA42-4AAB-B441-95E1A73315A9',
     'USER=s2jha',
     'NVM_DIR=/Users/s2jha/.nvm',
     'http_proxy=http://gec-proxy-svr.homeoffice.wal-mart.com:8080/',
     'COMMAND_MODE=unix2003',
     'SSH_AUTH_SOCK=/private/tmp/com.apple.launchd.Ko1A8eqyj5/Listeners',
     '__CF_USER_TEXT_ENCODING=0x38B92335:0x0:0x0',
     'PATH=/Users/s2jha/.nvm/versions/node/v6.11.0/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Java/JavaVirtualMachines/jdk1.8.0_112.jdk/Contents/Home/bin:/usr/local/apache-maven/apache-maven-3.3.9/bin',
     '_=/Users/s2jha/.ern/versions/0.8.0/node_modules/.bin/react-native',
     'PWD=/Users/s2jha/Documents/workspaces/ern',
     'JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_112.jdk/Contents/Home',
     'LANG=en_US.UTF-8',
     'ITERM_PROFILE=Default',
     'XPC_FLAGS=0x0',
     'https_proxy=http://gec-proxy-svr.homeoffice.wal-mart.com:8080/',
     'XPC_SERVICE_NAME=0',
     'COLORFGBG=7;0',
     'HOME=/Users/s2jha',
     'SHLVL=2',
     'M2_HOME=/usr/local/apache-maven/apache-maven-3.3.9',
     'ITERM_SESSION_ID=w0t0p0:6A447267-AA42-4AAB-B441-95E1A73315A9',
     'LOGNAME=s2jha',
     'NVM_BIN=/Users/s2jha/.nvm/versions/node/v6.11.0/bin',
     'SECURITYSESSIONID=186a9',
     'COLORTERM=truecolor' ],
  stderr: null,
  stdout: null,
  pid: 5452,
  output: [ null, null, null ],
  signal: null,
  status: 1 }
Command `npm install --save --save-exact [email protected]` failed.

Can't find non-simulator iPhone in list of devices

When running ern run-ios from the command line, I'm presented with a list of simulator devices to run my Mini app on and my actual device never appears. Is there anything I need to do in particular to run on an actual phone? I would run from the Ern Runner Xcode project itself, but when building, I get a list of errors. Thanks in advance!

When building iOS host app, header files cannot be located

I'm not sure if this is an issue with the container, or with xcode itself. But after walking through the guide for importing my container into a fresh iOS project. When I try to build I am seeing several missing headers like the one in this screenshot. Is there some additional configuration of the iOS project required beyond what is in the docs? Thanks!

A top level view of some others that are missing too:

Distinguish between MiniApp / JS API impl

JS API implementations are pretty much similar to MiniApps in the sense that they contain only JS code, are published to NPM, versioned and can be updated through OTA.

However we don't have any specific distinction in the Cauldron between the two, neither in terms of commands.

We should do the necessary to differentiate between the two structurally, even if in term of platform logic, most of the same logic as for MiniApps will apply.

• jsApiImpls section in Cauldron container in addition to miniApps
• Updated cauldron commands for jsApiImpls handling

Depends of #307 to be achived

Docs use deprecated `ListView` component

react-native docs show ListView is deprecated:

Yet the “Getting Started” guide features ListView use in the MovieListMiniApp component. Update to FlatList?

TypeError: Cannot read property 'getDevices' of undefined

I was trying to go through the MovieListMiniApp tutorial but I'm getting the following error message:

| __| |___ __| |_ _ _ ___  __| |___  | \| |__ _| |_(_)_ _____ 
| _|| / -_) _|  _| '_/ _ \/ _` / -_) | .` / _` |  _| \ V / -_)
|___|_\___\__|\__|_| \___/\__,_\___| |_|\_\__,_|\__|_|\_/\___|
[v1000.0.0] [Cauldron: -NONE-]

A React Native Packager is already running in a different process
✔ Preparing MiniApp(s) and running compatibility checks
✔ Creating local Container
✔ Regenerating iOS Runner Configuration
TypeError: Cannot read property 'getDevices' of undefined

Improve link/start command

Improve link/start commands so that it properly sync up the linked folders whenever start is run.

Interactive prompt for configurable plugins when using run-ios or run-android

Some plugins are configurable (CodePush / StackTracer). The number of configurable plugins is quite limited as of now and even later on, won't represent the majority of them. API implementations (a specific type of plugin) can also be configurable.

For configurable plugins, the configuration of the plugin needs to be provided upon Container initialization call. This is mostly not a problem when integrating a Container in an existing mobile application as it involves mobile developers who are knowledgable enough to achieve the necessary.

However, when solely using the Runner through run-ios / run-android this can be a problem, as these commands are mostly used by JS MiniApp developers who might not have any experience with native side of things and no idea how to edit the code appropriately.

During runner generation / regen, the command should detect all configurable plugins part of the MiniApp(s) and prompt the user for configuration (only once). Ideally we should keep the configuration in a specific dedicated file (JSON) so that it can be edited later on by a JS person if needed. The Runner generated code should inject the proper configuration lines for all configurable plugins when initializing the container.

This will of course work only for configurable plugins options that are primitive types. If a configurable plugin accepts an instance of a specific type, this can't work, but should be rare.

Cannot find module 'boom'

ive tried to follow the quick start tutorial in the following link
'http://www.electrode.io/site/docs/getting_started.html'

when i run 'ern create-miniapp MovieListMiniApp':

$ ern create-miniapp MovieListMiniApp
module.js:471
throw err;
^

Error: Cannot find module 'boom'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (/home/kevin/.ern/versions/0.7.0/node_modules/ern-cauldron-api/dist/util.js:24:13)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)

same with 'ern':

$ ern
module.js:471
throw err;
^

Error: Cannot find module 'boom'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (/home/kevin/.ern/versions/0.7.0/node_modules/ern-cauldron-api/dist/util.js:24:13)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)

installation progress

$ sudo npm install -g electrode-native && ern
/usr/bin/ern -> /usr/lib/node_modules/electrode-native/bin/ern.js
/usr/lib
└─┬ [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ └── [email protected]
└─┬ [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └─┬ [email protected]
│ ├── [email protected]
│ └── [email protected]
├── [email protected]
├─┬ [email protected]
│ └─┬ [email protected]
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └─┬ [email protected]
│ │ │ └── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ └─┬ [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ └── [email protected]
│ └── [email protected]
├── [email protected]
├─┬ [email protected]
│ └── [email protected]
└─┬ [email protected]
└── [email protected]

✔ Hurray ! Electrode Native v0.7.0 was successfully installed.

node and npm version

$ node -v
v6.11.4
$ npm -v
3.10.10

`ern` command tab completion

Feature idea: there’s a lot of commands hanging off ern. It would be nice to have tab-completion for commands, which could help with use of the tool by reducing mistypes and limiting the command-not-found-so-show-help user errors.

Can't build Ern Runner project with Xcode

First of all let me say that I love Electrode-Native and would like to thank you guys so much for building it. I want to integrate it into my companies's existing work flow, but I need to get this sorted out first.

A common use case of mine is that I frequently build and run on the command line/simulator with ern run-ios and everything works fine. It's when trying to build on my phone or simulator from the Xcode Project after that I have problems. When trying to build on an actual iPhone/simulator through Xcode (after successfully running ern run-ios), I'm met with a bunch of errors specifically from ElectrodeContainer. The errors show that I cannot build the ElectrodeContainer because I cannot build the modules Darwin, Foundation, and CoreFoundation, when trying to build the module UIKit. I've tried deleting derived data, cleaning the project, and Parallelize Build has been unchecked the whole time, but it still hasn't worked. My next step would be to dive into the project settings, but figured I would ask you guys first.

Relevant Info: Xcode v9.0, Mac OS Sierra v10.12.6, Electrode-Native v0.8.0. iPhone 7 running iOS 11.0

Steps for me to reproduce

1. Run ern run-ios from the command line
2. Once it's up and running, open the Xcode Runner Project.
3. Plug in an actual iPhone and press play.
4. Project won't be able to build because it cannot build/compile the Electrode container.

Attached is a screenshot. Let me know if you have any more questions. Thanks for the help!

Improve ern code-push command for CI run

ern code-push command ask user to confirm code-push once compatibility checks are completed.

The only way to bypass this interactive prompt is to use the --force flag which will bypass compatibility checks all together (bad).

For proper CI run (no interactive prompts) while keeping compatibility checks, we need to introduce a new option --skipConfirmation to the code-push command that will skip user manual confirmation and proceed with the push. In case compatibility checks are failing, the command will of course fail with an error (at the difference of using the --force flag)

Container build configuration injection

Right now, the ios QA build config section is present in the container hull. This is a Walmart specific build config and should not be present in the generic container. Only Debug/Release (default standard build config) should be included in the generic container.

Any custom build config used for the target host application should be injected in some way, but not part of the generic container which should be company agnostic and just contain the Debug/Release default build configs.

`ern add` multi-package support

ern add appears to only supports single package:

$ ern add react-native-ernmovie-api react-native-electrode-bridge react-native-ernnavigation-api                           
 ___ _        _               _       _  _      _   _                       
| __| |___ __| |_ _ _ ___  __| |___  | \| |__ _| |_(_)_ _____                             
| _|| / -_) _|  _| '_/ _ \/ _` / -_) | .` / _` |  _| \ V / -_)                          
|___|_\___\__|\__|_| \___/\__,_\___| |_|\_\__,_|\__|_|\_/\___|
[v0.7.0] [Cauldron: -NONE-]                              
                                                                                             
✔ react-native-ernmovie-api is not declared in the manifest. Performing additional checks.
react-native-ernmovie-api is not declared in the Manifest. You might consider adding it.
✔ Adding react-native-ernmovie-api to MiniApp

This only installs react-native-ernmovie-api:

git diff package.json
diff --git a/MovieListMiniApp/package.json b/MovieListMiniApp/package.json
index a8a3f95..ef8f2eb 100644
--- a/MovieListMiniApp/package.json
+++ b/MovieListMiniApp/package.json
@@ -7,7 +7,8 @@
   },
   "dependencies": {
     "react": "16.0.0-alpha.12",
-    "react-native": "0.48.3"
+    "react-native": "0.48.3",
+    "react-native-ernmovie-api": "0.0.9"
   },
   "ern": {
     "version": "0.7.0",

One expects add to function like npm, yarn, etc. by adding all package arguments.

Check if package name is not already used on NPM before creating MiniApp/API/API Impl

ern create-miniapp, ern create-api and ern create-api-impl commands should check if the package name that is going to be used does not exist yet on NPM, otherwise it should inform the user that the package name already exists and that another one should be chosen instead.

Test bridge with RN 0.49.0

Ensure that bridge is compiling / tests are passing with [email protected] for both iOS and Android.

Might need to regenerate bundle used in tests (or not if tests are passing fine with 0.48.0 bundle which might probably be the case).

• iOS
• Android

Error: Command failed: ./gradlew lib:uploadArchives

executing ern run-android on Linux Mint 18.2 Cinnamon x64
error message:

$ ern run-android

| __| |___ __| |_ _ _ ___  __| |___  | \| |__ _| |_(_)_ _____ 
| _|| / -_) _|  _| '_/ _ \/ _` / -_) | .` / _` |  _| \ V / -_)
|___|_\___\__|\__|_| \___/\__,_\___| |_|\_\__,_|\__|_|\_/\___|
[v0.8.0] [Cauldron: -NONE-]
✔ Starting React Native packager
✔ Preparing MiniApp(s) and running compatibility checks
⠙ Creating local Container and publishing AAR to maven localError: Command failed: ./gradlew lib:uploadArchives 

[buildAndPublishAndroidLib] Something went wrong: Error: Command failed: ./gradlew lib:uploadArchives 

[generateContainer] Something went wrong. Aborting Container Generation
✖ Error: Command failed: ./gradlew lib:uploadArchives 

runLocalContainerGen failed: Error: Command failed: ./gradlew lib:uploadArchives 

Error: Command failed: ./gradlew lib:uploadArchives 

introduce -exact flag in the create-api command

currently the create-api appends react-native-.+-api to the apiName. instead it would be nicer to have to exact flag
Problem : ern create-api my-api results in react-native-my-api-api
Enhancement : using exact flag it could just be generated as package my-api

@belemaire @deepueg thoughts?

`ern run-ios` - packager fails if there is a space in the path

I was running through the Quick Start, and had created the project in a directory called "Electrode Native" on my mac. When I issued the ern run-ios command, the packager opened in a terminal window, but immediately failed saying the file wasn't found (unfortunately, I don't have the exact output anymore.) When I renamed the directory to "ElectrodeNative", the packager started fine.

Something of an edge-case, for sure!

Add spinner to Code push command

• We should add a spinner at the end of the code push execution to let the user know that platform is working on pushing the bundle.
• Has better user experience
  For instance:
  ern code-push @walmart/[email protected] -p ios -t 17.19 -d walmart:ios:17.19

yeilds..
✔ Generating composite bundle to be published through CodePush
? Deployment name Staging
? Application name walmart-ios
[releaseReact] Running /Users/b0m00ca/.ern/versions/0.9.0/node_modules/ern-core/node_modules/.bin/
code-push release-react walmart-ios ios -t 17.19  -d Staging -r 100% -b MiniApp.jsbundle

To add a spinner right after this line to have better user experience.

Daily system test build failure

Build failed for a legit reason. Still need to fix system-tests accordingly to reflect recent changes to create-api/create api-impl command

Running ern create-api TestApi
[v1000.0.0] [Cauldron: cauldron-automation]
pwd
pwd
✖ TestApi is not a valid NPM package name

https://travis-ci.org/electrode-io/electrode-native/builds/296616836#L3543

Allow device configuration?

The manual intervention in ern run-ios can be kinda annoying, especially if a developer will be running this multiple times a day:

The boot process is otherwise automated. Is there support for putting a desired default device ID/string in configuration such that ern run-ios and ern run-android always boot the default simulator?

Test iOS Container with RN 0.49.0

Android has already been tested/updated properly.

Extract CodePush logic out of MiniApps

As of now (internally), CodePush logic is directly embedded in the MiniApps. This is not a good practice as it makes it harder to reuse MiniApps with different CodePush configuration settings in different applications.

MiniApps should not have to depend on CodePush.
CodePush should be included at the top level if needed (composite MiniApp / Container) and the CodePush configuration logic should be moved out of MiniApps.

We then can offer a global CodePush configuration logic, while keeping CodePush settings per MiniApps if needed. This could be achieved either as making a base Component that MiniApps should have to inherit from (instead of the base React one), or we could also inject the necessary code at the composite MiniApp level / container generation, to gain more flexibility and not enforce MiniApp developers to have to inherit from a custom component.

More thinking / POC need to go into this one to figure out a proper solution and implement it.

When building container, error in terminal

Hi Guys, a colleague of mine and I are trying to get an end to end hello world example running where er have a basic miniapp in a cauldron and publishing a container to git.

After downloading the container, if I open the xcodeproj andtry to build it, a terminal pops up and gives an error:

module.js:471
    throw err;
    ^

Error: Cannot find module '/Users/antwebb/Downloads/assistant_service-container-master/ElectrodeContainer/Libraries/ReactNative/local-cli/cli.js'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3
Process terminated. Press <enter> to close the window

The build does appear to compile fine, but we are having some issues including it in a fresh host app so we are trying to back into why:

`miniapp` command error

Any calls to the ern miniapp <whatever> command result in errors:

ern miniapp --help
 ___ _        _               _       _  _      _   _         
| __| |___ __| |_ _ _ ___  __| |___  | \| |__ _| |_(_)_ _____ 
| _|| / -_) _|  _| '_/ _ \/ _` / -_) | .` / _` |  _| \ V / -_)
|___|_\___\__|\__|_| \___/\__,_\___| |_|\_\__,_|\__|_|\_/\___|
[v0.7.0] [Cauldron: -NONE-]

Error: ENOENT: no such file or directory, scandir '/Users/c0r00jl/.ern/versions/0.7.0/node_modules/ern-local-cli/dist/commands/miniapp'
    at Error (native)
    at Object.fs.readdirSync (fs.js:953:18)
    at requireDirectory (/Users/c0r00jl/.ern/versions/0.7.0/node_modules/require-directory/index.js:59:6)
    at Object.self.addDirectory (/Users/c0r00jl/.ern/versions/0.7.0/node_modules/yargs/lib/command.js:113:33)
    at Object.Yargs.self.commandDir (/Users/c0r00jl/.ern/versions/0.7.0/node_modules/yargs/yargs.js:343:13)
    at Object.exports.builder (/Users/c0r00jl/.ern/versions/0.7.0/node_modules/ern-local-cli/src/commands/miniapp.js:6:16)
    at Object.self.runCommand (/Users/c0r00jl/.ern/versions/0.7.0/node_modules/yargs/lib/command.js:193:35)
    at Object.Yargs.self._parseArgs (/Users/c0r00jl/.ern/versions/0.7.0/node_modules/yargs/yargs.js:990:30)
    at Object.get [as argv] (/Users/c0r00jl/.ern/versions/0.7.0/node_modules/yargs/yargs.js:930:19)
    at Object.run [as default] (/Users/c0r00jl/.ern/versions/0.7.0/node_modules/ern-local-cli/src/index.js:54:10)
    at Object.<anonymous> (/Users/c0r00jl/.ern/versions/0.7.0/node_modules/ern-local-cli/src/index.prod.js:3:33)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at runLocalCli (/Users/c0r00jl/Projects/electrode-native/global-cli/src/index.js:123:5)
    at Object.<anonymous> (/Users/c0r00jl/Projects/electrode-native/global-cli/src/index.js:40:3)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/c0r00jl/Projects/electrode-native/global-cli/bin/ern.js:2:1)

The miniapp command appears in the ern --help output:

Does this command do anything? Maybe it should be removed. Also, non-existing commands probably shouldn't throw fs.readdir errors.

code-push command should support semver range

code-push command should accept a semver to target one or more versions (as Microsoft code-push command already offers).

We should apply the same exact rules as the Microsoft code-push (considering ern ultimately forwards the command to Microsoft code-push client for execution).

If the semver used is a range that targets multiple version, ern should properly perform multiple code-push updates for each matching version and update the Cauldron accordingly.

Prevent API names to have special characters

api names should not have special characters since java does not support it.! Example error below for reference.

/Users/d0g00g4/.ern/containergen/out/android/lib/src/main/java/com/blah-delete/ern/api/WalmartItemApi.java:1: error: ';' expected
package com.blah-delete.ern.api;
                ^
/Users/d0g00g4/.ern/containergen/out/android/lib/src/main/java/com/blah-delete/ern/api/WalmartItemApi.java:10: error: ';' expected
import com.blah-delete.ern.model.Item;
               ^
/Users/d0g00g4/.ern/containergen/out/android/lib/src/main/java/com/blah-delete/ern/api/WalmartItemEvents.java:1: error: ';' expected
package com.blah-delete.ern.api;
                ^
/Users/d0g00g4/.ern/containergen/out/android/lib/src/main/java/com/blah-delete/ern/api/WalmartItemEvents.java:12: error: ';' expected
    import com.blah-delete.ern.model.Item;
                   ^
/Users/d0g00g4/.ern/containergen/out/android/lib/src/main/java/com/blah-delete/ern/api/WalmartItemRequests.java:1: error: ';' expected
package com.blah-delete.ern.api;
                ^
/Users/d0g00g4/.ern/containergen/out/android/lib/src/main/java/com/blah-delete/ern/api/WalmartItemRequests.java:12: error: ';' expected
import com.blah-delete.ern.model.Item;
               ^
/Users/d0g00g4/.ern/containergen/out/android/lib/src/main/java/com/blah-delete/ern/model/Item.java:1: error: ';' expected
package com.blah-delete.ern.model;

create-api does not proceed if --skipNpmCheck is not provided

create-api command does not do anything is --skipNpmCheck flag is not used.

Only debug log of command is

[runYarnCommand] Running /home/travis/build/electrode-io/electrode-native/ern-core/node_modules/.bin/yarn info TestApi versions --json

and command exits

Cauldron transactions should create a single git commit

Cauldron client is creating commits for each atomic operations, resulting in a lot of verbosity when running Cauldron transactions.

For example, updating a MiniApp version results in 5 commits. Creating a new native application version in the Cauldron ends up in a huge number of commits as well.

High level transactions (adding/removing/updating MiniApp(s) and/or Dependency(ies)) should end up in a single transactional commit instead, to make it easier to see the changes and reduce commit history verbosity.

.ernrc formatting

Right now .ernrc JSON file is not really formatted, it's just one line of JSON which makes it less human readable.

We should write .ernrc file as a formatted/indented JSON, as we sometime have to look at it / edit it manually.

i.e

From

{"platformVersion":"1000.0.0","cauldronRepositories":{"benoit":"https://github.com/belemaire/dev-cauldron.git","benoitwalmart":"[email protected]:blemair/my-cauldron.git"},"loglevel":"debug","miniAppsLinks":{},"cauldronRepoInUse":"benoit"}

To

{
  "platformVersion": "1000.0.0",
  "cauldronRepositories": {
    "benoit": "https://github.com/belemaire/dev-cauldron.git",
    "benoitwalmart": "[email protected]:blemair/my-cauldron.git"
  },
  "loglevel": "debug",
  "miniAppsLinks": {},
  "cauldronRepoInUse": "benoit"
}

Runner pbxproj contain user path

See : electrode-io/movielist-miniapp#5

Should fix path to the container in the generated .pbxproj so that it does not contain plain user home path, we should use ~ instead.

Move global configuration to homedir?

Noticing the code and docs for the global ern config is at $HOME/.ern/.ernrc:

Get or set the local platform configuration values stored in the ~/.ern/.ernrc file

Shouldn’t this be in a file at $HOME/.ernrc to keep with the expected rc file location of programs?

`ern regen-api` must clear the existing folders

ern regen-api must clear the existing folders except schema.json before re generating the api's.

Platform specific API request/events

Some APIs might expose requests or events that are only specific to a single platform.

This is already the case of some react native modules offered out of the box by react native, where some methods are only implemented on iOS or Android.

We should have some way in the schema to flag a request or event as platform specific (only Android or iOS). This way we can clean up the API during generation so that for example for a request that is only supported on iOS we don't expose request handler implementation interface to Android for this generated API.

JS API implementation generation

We now have commands to generate / regenerate native (iOS/Android) API implementations projects.

The same should be done for JS API implementation.

`ern start` command fails

• Node.js: 8.5.0
• npm: 4.6.1
• yarn: 1.1.0
• electrode-native: 1.0.8

(👆 Might be good to put this version stuff in the issue template.)

• Problem: ern start exits with a JavaScript error:

  $ ern start
  ___ _        _               _       _  _      _   _         
  | __| |___ __| |_ _ _ ___  __| |___  | \| |__ _| |_(_)_ _____ 
  | _|| / -_) _|  _| '_/ _ \/ _` / -_) | .` / _` |  _| \ V / -_)
  |___|_\___\__|\__|_| \___/\__,_\___| |_|\_\__,_|\__|_|\_/\___|
  [v0.7.0] [Cauldron: -NONE-]
  
  (0 , _start2.default) is not a function

  (Something to do with bad import?)

• Expected: ern start should do something, or print a useful error message

Unified code style/linting rules

What would you think about unifying ESLint rules with electrode-io/electrode? Make not electrode-native core, but the generated index.[ios|android].js files and documentation. Would probably make for an easier electrode ↔ electrode-native developer experience. (I think electrode ESLint config is here: https://github.com/walmartlabs/eslint-config-walmart ?)

create-api-impl proceeds with command execution before checking if api exists

ern create-api-impl react-native-ernmovie-api-asjfdfjksfjdskfds -s
ern create-api-impl react-native-ernmovie-api-asjfdfjksfjdskfds

proceeds with command execution, creates the folder and fails with error below.

error Couldn't find package "react-native-ernmovie-api-asjfdfjksfjdskfds" on the "npm" registry.

Solution : Check if api exists before proceeding with the command

Automate GitHub repository creation for Cauldron

Right now, the creation of a new Cauldron requires the user to manually create an empty GitHub repository to hold the Cauldron.

We could avoid this manual step and simplify the UX of Cauldron creation, by automating the repository creation.

For now this story should only offer support for GitHub repository (most popular) but it should make the code flexible enough to easily plugin new git repository provider support (for example, BitBucket also works well to hold Cauldron).

This story encapsulate figuring out the ideal UX as well as code design to fit well in platform code base and actual implementation / testing.

Host app in debug mode, nothing running on 8081

We have our host app running. When we initialize the project we set debugEnabled = YES like so:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

    ElectrodeContainerConfig *containerConfig = [[ElectrodeContainerConfig alloc] init];
    containerConfig.debugEnabled = YES;
    [ElectrodeReactNative startWithConfigurations:containerConfig];
    
    return YES;
}

When running in debug mode, the app is hunting for the dev server on 8081 but cant find it. Is there a step in the process we are missing in order to run with debugEnabled? It is asking that we run npm start to enable that, but from where should we run that command?

It is worth noting that if containerConfig.debugEnabled = NO; then our code seems to run fine (which is awesome!)

Version command?

Might be nice for the ern CLI to support a --version flag that acts like Node.js, npm, etc.: print the version and exit.

Api regen compilation problem for Event Interface (android)

Problem : The Event interface is not current with the recent changes to add & remove EventListener

Solution : Adapt the mustache template for the Event Interface

Favor convention over configuration for third party plugins

Third party plugins injection configuration is defined in a manifest

The configuration needed has already been lightened compared to what it was before, by relying on convention over configuration.

It can be simplified even further for most of the plugins that don't require any configuration. The patterns are almost always the same and in that case it would be beneficial to use some logic in the platform to detect things and avoid manual creation of a config.json.

Good thing is that we have strong configuration injection options now and so for plugins that fall outside of the scope of "simple" plugins, we can support them though configuration

Store more CodePush related information in Cauldron

We currently store a minimal amount of information pertaining to CodePush updates in the Cauldron (just the list of MiniApps that were CodePushed).

We need to keep more information in addition to the MiniApps names/versions :

• The flags / options that were used to push the update
• The deployment key that was used (one of the parameters to CodePush command). ex: Production, QA, Staging ...

For the CodePush execution logic we also need to distinguish between the different deployment keys and use the proper yarn.lock from the Cauldron (right now we have a single yarn.lock which is not right when different envs are used).

Should figure out the proper object schema and conduct the implementation.

Introduce bundle command

To create a composite MiniApp / bundle we use the create-container --js command.
It is not very intuitive and complexify logic (and options) for this command.

We should introduce a new command bundle that does this job instead. bundle command might accept some of the same options as react-native bundle.

Relax the check to allow user to proceed with create MiniApp/API/API Impl, if package name is already on npm

Problem

create MiniApp/API/API Impl terminates if the package name exists on the npm

Solution

ern create-miniapp, ern create-api and ern create-api-impl commands should still check if the package name exists yet on NPM or not.

Instead of terminating the command execution, it should prompt the user to continue be needed. This will relax the need of the user's whose intent is to explore the platform without intent to actually publish.

create-api-impl should allow arbitrary implementation naming

• Add new option to create-api-impl command to pass name of api implementation (completely replacing the convention). If user provide test-api-implementation, it will use this name as such.
• support scope
• Update logic in ern-api-impl-gen accordingly
• Update platform logic where needed to not rely on naming to detect API implementation module, but on the data we store in ern object in package.json of the module (indicating the type of ern module)
• Update create-api-impl command documentation

Account for system tests in code coverage global report

For now, only unit tests are accounted for in our code coverage report.

System tests should also be part of the code coverage report.