Skip to content

Latest commit

 

History

History

example

README.md


LiveBundle

LiveBundle demo application

Trying it out

Unless mentionned otherwise, all following commands should be run from this directory (the example directory)

Initial Setup

  • Clone this repository on your workstation
  • From the example directory, run yarn install
    !! Do not run this command from the top level directory!!

Upload an application change

  • Change something in App.js. We recommend updating some text so that the change is clearly visible
  • Run yarn livebundle upload

Per livebundle.yml configuration file, LiveBundle will generate android and iOS dev bundles and will then upload them to the storage (in this case, a local directory), then it will display a QR Code and Deep Link to install the changes in the application. Keep the QR Code and Deep Link handy, we will need them soon.

Start the HTTP server

Because we'll need to download the bundles from the application (either from an emulator or device) we can just start an HTTP server to serve any files kept in LiveBundle storage directory. A simple HTTP server can be easily started as follow

  • From the ~/.livebundle/storage directory run npx http-server

Install and launch the application

  • Trash the top level node_modules directory it it exist (in parent directory, the one at the root of react-native-livebundle directory). We are looking at a way to avoid this step, but it is necessary as of now, otherwise the application will not work properly.
  • Run yarn install

Android

  • Start an Android simulator or connect an Android device.
  • Run adb reverse tcp:8080 tcp:8080
  • Run npx react-native run-android --no-packager

iOS

  • Run npx react-native run-ios --no-packager

Try QR Code scanning

From the application, launch the LiveBundle menu by either tapping LiveBundle from the React Native developer menu, or by simply tapping the Launch LiveBundle Menu from the application (which launches the LiveBundle menu programmatically).

Then tap the Scan button. If this is the first time the application is launched, it will ask for permission to access the camera.

Scan the QR Code that was generated earlier. LiveBundle will download and install the bundle. You should see the changes you made earlier.

Try Deep Link navigation

Slack (cross platform)

If you have Slack installed on the device, just send yourself the Deep Link url that was logged to the terminal from your earlier run of livebundle upload command.

Then just tap on the link. It will trigger LiveBundle in the demo application, and download the package.

Android

You can use adb to navigate to the Deep Link. Just run the following command from a terminal.

$ adb shell am start -W -a android.intent.action.VIEW -d "[DEEP_LINK_URL]" io.livebundle.example

s Just replace [DEEP_LINK_URL] with your Deep Link url.

iOS

You can just open Safari on the device/simulator and copy/paste the Deep Link in the address bar.

Try Reset

To rollback the update, just tap the Reset button from LiveBundle menu.

Development/Debbuging

The demo application can be used for development on the native module.\

Native Module Native changes

Android

After any changes to native module native code, just run npx react-native run-android. React Native will rebuild the application, including the native module, and will install / relaunch the application.

iOS

After any changes to native module native code, run pod install from the example/ios directory and rebuild/relaunch the application by running npx react-native run-ios from the example directory.

Native Module JS changes (in top level directory)

If a metro bundler is running locally, any JS changes will be automatically picked up (or just hit reload). In case you are not using a local metro bundler (to test built in -exo- bundle), you can just run npx react-native run-android --no-packagers (or npx react-native run-ios --no-packager for iOS) after making JS changes.

Debbuging Native Module Native code

Android

You can either open and run in debug mode this example application in Android Studio or attach Android studio debugger to running application. Because the native module is linked with the application, its source code will be directly editable / debuggable from the project.

iOS

Open the example application workspace in XCode (example/ios/example.xcworkspace). You can then launch and debug the application and/or native module directly within the IDE.

Debbuging Native Module JS code

Just open React Native developer menu in the application and tap on Debug.