react-native bundleon this Composite project to create the JS bundle and assets to store in the Container.
.babelrcfile at the root of the MiniApp, containing the Babel configuration. Electrode Native doesn't support
babel.config.jswhich is appropriate for a top level babel configuration, but given that the MiniApps will end up inside a Composite, they won't be top level anymore.
ernsection of the MiniApp
package.json, as follow :
dependenciessections of the
devDependencies. This is not the standard, and can look unclean, however it won't have any nasty side effects. The reason for this constraint is that when Electrode Native generates a Composite with one or more MiniApp(s) it
npm install) each of the MiniApps in the Composite project, which does not install any
devDependenciesof the the MiniApps. Therefore, if Babel plugins are kept inside
devDependenciesthey won't be installed during Composite generation, and bundling/packaging will fail when trying to resolve babel plugins.
cwdoption should be set to
babelrc. This is needed, otherwise the base directory for
rootwill resolve to top level composite rather than the MiniApp root directory.
BABEL_ENVenvironment variable during transpilation to one out of only two values :
production. Keep that in mind if using the
envoption in a Babel configuration. Whatever value is manually set for
BABEL_ENVwill be overwritten during transpilation by Metro bundler.
developmentwill be set for any development bundle (local packager for example) and
productionwill be set for any production bundle (bundle that we store in Container).
compositeGeneratorconfig in the Cauldron. It can also be supplied directly to some commands such as
--extraobject option. The
resolutionsfield is a 1:1 mapping to the
resolutionsfield that will be added to the
package.jsonof the composite. Refer to the selective dependency resolutions documentation for more information.
package.jsonof the custom composite.
extraNodeModulesin Metro config
metro.config.jsoncan be added via the
metroExtraNodeModulesfield. It supports both relative and absolute paths. Relative paths will resolve to
node_modulesinside the Composite project.
metro.config.jsonshould be modified directly.
.npmrcfile present in the root of a MiniApp. This is due to the fact that when generating a Composite project, Electrode Native just
yarn addevery MiniApp to the Composite project. Each MiniApp becomes a dependency of the Composite project and is not a top level app anymore. Therefore, when needing a custom
.npmrcshould be global rather than local, or be part of a custom Composite project (see below).
index.jsis required. This will be the entry file used when running
composite-imports.jswill be generated by Electrode Native. It will contain all of the MiniApps / JS API Impls imports. You have to import this file in
index.jsat some point, otherwise your MiniApps won't be packaged in the bundle. Keep in mind that this file, if present in the repo, will be overwitten by Electrode Native during composite generation, so don't put custom imports or code in this one.
package.jsonand other fields that only matter for npm publication can be left to dumnmy values. This Composite project is not meant to be published to npm but solely used to create the Composite JS bundle.
custom-compositestored in GitHub under user
compositeGeneratorconfiguration should be as follow :
mybranch, the configuration will be the following :
erncommands. You should manually edit your Cauldron. Also, as a reminder,
configobjects can be stored at different levels in the Cauldron, respectively :
MyApp:android:1.0.0, Electrode Native will first look for a
configobject at the native application version level, and if not found will bubble up the levels until it finds it (or doesn't).
baseCompositeoption being either a valid git repository path or a local path on the workstation to a custom composite project. Please note that using this option will take precedence over any
baseCompositeconfiguration stored in Cauldron. If you are using a Cauldron, there is very limited use to explicitly providing the
baseCompositeto these command.
/etc/custom-compositeyou can easily try it out with some of the commands above, before committing it to git / setting it up in Cauldron.
yarn addfor all MiniApps / JS API Implementations part of the Composite (this will update the
package.jsonof the Composite)
composite-imports.jsfile, containing all MiniApps/JS API Implementations imports.
react-native startwill be invoked with
entry-filebased on the platform being targeted.