Setup your QuickBrick workspace


React - node.js

QuickBrick runs on node.js LTS ^12.x.x.


QuickBrick relies on the Zapp-iOS & Zapp-Android apps to run on devices or on the emulator. This means that you need to have fully functionnal Zapp-iOS & Zapp-Android environment. This includes:

  • access to both Zapp-iOS & Zapp-Android repos
  • ruby environment (we recommend to use rbenv )
  • cocoapods 1.7.2
  • latest zapptool (^3.0.2)
  • Xcode 10.2.1
  • Android studio 3.1.1 with Gradle 4.5.1

The Zapp-iOS and Zapp-Android workspaces don't need to be in the same folder. They can be located anywhere on your environment.

Project workflow

First thing you need is a Zapp app. Create one version for iOS and one for android. You can use any recent SDK, but for a start we recommend the latest dev on each platform. Pick up your your app version ids and save them for later.

Prepare your QuickBrick workspace (when contributing on the main repository)

First of all, clone the QuickBrick repo, and run yarn setup to automatically install all dependencies. Then run the following process inside the cloned repo :

$ yarn zapplicaster prepare -a <app_version_id>

You can run the script for both your iOS & android version - the QuickBrick workspace allows you to set up simultaneously for one android & one iOS version, without one replacing the other. This is particularly helpful to work simultaneously on a the iOS and android version of a given app.

This command will retrieve the zapp configuration files for these versions and inject them in the development-app directory. Please note that if you add / remove plugins, or change the rivers.json configuration in Zapp, you will need to run the prepare command again to get the most recent configuration file locally.

Prepare your plugin workspace (when creating a plugin)

When creating a plugin, you don't have to work within the QuickBrick repo. You can create a workspace in your own repository to work on your plugin, and still leverage any QuickBrick app configured in Zapp to start working. Please refer to Plugin workspace guide to set up a plugin workspace.

That's it, you're ready to run your app and start coding !

run on iOS emulator

The QuickBrick repo provides a script to configure your iOS project. If you have an up-to-date and working local Zapp-iOS folder, simply run the following command from the root of the QuickBrick folder

$ yarn setup:ios <path/to/Zapp/App/folder> <app_version_id>

This will run zapptool and configure your iOS workspace. Alternatively, you can configure your Zapp-iOS project manually by running the following command in the Zapp-iOS folder

$ zapptool -vi <app_version_id> -rn dev && pod update

The -rn dev flag will tell your Zapp App to use the react native metro bundler packager rather than the bundled react-native resource created with Zapptool. From this point, you should be able to run the app in your emulator without even opening Xcode, by running the following command from the QuickBrick folder.

Then simply run:

ZAPP_APP_PATH=<path/to/Zapp/App/folder> yarn run:ios

This will automatically build the app, open the simulator, launch your app, and start react native's dev packager.

Happy coding !

run on Android emulator

Inside your Zapp-Android project, configure your workspace like you would with any Zapp-Android app by running:

rake prepare_workspace VERSION=<app_version_id>

In order to enable the use of the react native packager, follow these steps :

  • Open Android Studio
  • go to Preferences > Build, Execution, development > Compiler > Command line options
  • add this flag -PREACT_NATIVE_PACKAGER_ROOT=localhost:8081. It will instruct the app to use the react native metro bundler packager instead of the bundled react-native resource created by the rake task
  • in the terminal, run adb reverse tcp:8081 tcp:8081. This will make sure that all calls to http://localhost:8081 on the emulator will reach the metro bundler instance running on your machine
  • in the QuickBrick project root or in your plugin workspace, run yarn start
  • in Android Studio, run the app in your terminal

Happy coding !

NB : on Android, you can access react-native's development by pressing ⌘ + M, and you can reload the bundle by pressing the R key twice