question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

react-native bundle configs

See original GitHub issue

Description

This is a react-native bundle and react-native packager issue.

Currently there is no way of modifying the configurations passed to react-native bundle when building for iOS and Android. You are locked into the configs either the Debug/Release build config and build type respectively pass. Also, unlike what many recent posts about this might suggest about this issue, it seems you cannot just call react-native bundle ahead of the build with your params and have the native build pick that bundle up.

Reproduction Steps and Sample Code

Configs for bundling in an iOS build are essentially hardcoded in ./node_modules/react-native/packager/react-native-xcode.sh to scheme configuration set in Xcode. If you set the build type to debug, you have then set dev to true, and there is no way of making a debug build, signed with developer certs with an offline bundle. The same is true for the opposite. I have not yet found a way around this without changing react-native-xcode.sh or the bundle React Native build phase in Xcode.

Configs for Android are slightly easier to change if necessary, as ./android/app/build.gradle has the project.ext.react property list that can be configured. By setting bundleInDebug to true, we can create an unsigned debug release with the bundle embedded. The problem is this requires changing the build.gradle each time, or doing something like this:

if ( project.hasProperty("bundleInDebug") ) {
    project.ext.react = [
        bundleInDebug: true
    ]
}

and via Fastlane:

  gradle(
      task: "assemble",
      build_type: "Debug",
      project_dir: "android",
      properties: {
        "bundleInDebug" => true
      }
  )

or directly in gradle:

$PROJECT/android/gradlew assembleDebug -p android -PbundleInDebug=true

An example use case for this is internal alpha builds - where other developers or QA need a development build for debug access, not signed for release/appstore, and cannot be dependent upon a development server running. Hockeyapp is frequently used for this - distribution of these kinds of builds internally.

For beta builds that are a bit more open, the current configurations work fine and as intended for Testflight and Playstore beta.

Solution

There are a few possible solutions here, and I would be willing to make a PR for both better documentation and a new process, but would like input on what that process should be. This is clearly an issue, and I would like to see either how others have worked around it or solved it in the recent updates.

Solution 1: We move the location of jsbundle to a predictable location (not derived data) allowing users to make a bundle however they choose ahead of the native build, and configure the native build to skip that particular build phase/step if that file is already present. We would also have to clean that folder at the end of a build. I believe this would be the easiest solution, but possibly the most breaking change.

Solution 2: Keep the current order/flow of the native builds calling the bundle - Modify react-native-xcode.sh to allow for overriding properties passed in through xcargs and modify react.gradle to more easily accept property overrides from gradle. (this may already be possible through a better solution than above, as my understanding of groovy & gradle is not the best)

Solution 3: Some combination of the above

Solution 4: Tell me what I missed, because this isn’t actually an issue, and close, and perhaps I should drink more coffee in the morning before submitting issues on GitHub.

Additional Information

  • React Native version: 0.44
  • Platform: iOS+Android
  • Development Operating System: MacOS 10.12.4
  • Dev tools: Xcode 8.3.2

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
MrLohcommented, May 7, 2018

@wprater @SoHotSoup I got it working in the meantime.

In Xcode you can assign an environment variable in the build phase Bundle React Native code and images by adding the line export BUNDLE_CONFIG=./metro.config.js to the script:

screen shot 2018-05-07 at 00 08 18

In Android you just have to include bundleConfig: "./metro.config.js" in the project.ext.react field of your android/app/build.gradle:

screen shot 2018-05-07 at 11 51 12
0reactions
MrLohcommented, Mar 1, 2018

No, I had to modify that file manually. Otherwise the command line works fine

Sent with GitHawk

Read more comments on GitHub >

github_iconTop Results From Across the Web

Bundling | React Native Developer Tools
When you're done here, you'll be able to bundle and ship your apps with Metro, the React Native bundler. The tools you'll use...
Read more >
bundle-config - npm
Start using bundle-config in your project by running `npm i bundle-config`. There are no other projects in the npm registry using bundle-config.
Read more >
RAM Bundles and Inline Requires - React Native
If you have a large app you may want to consider the Random Access Modules (RAM) bundle format, and using inline requires.
Read more >
Automate React Native Deployment - Part 2 - Timmy Willison
Here's a sample config for a simple job that installs node dependencies, lints, runs unit tests, and saves the workspace for later use....
Read more >
Configure Environment Variables with React Native Config for ...
A guid how to add environment variables to React Native with React Native Config.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found