Setting up environment for local development

This tutorial explains how to build extensions locally, so you can debug React Native code.

Note

This tutorial continues on concepts that were introduced in Getting started tutorial.

React Native environment

Before setting up local environment for writing Shoutem extensions, set up React Native environment as described in their Getting started tutorial. As it’s written in that document, local building of iOS applications is only available through Mac.

Shoutem environment

Once React Native environment is set, use Shoutem CLI. It’s as easy as:

$ shoutem env install
Setting up Shoutem environment:
Downloading environment for mobile app...
Downloaded!
Downloading environment for settings pages...
Downloaded!
Local environment 1.0.1 is successfully installed!

Setting up Shoutem environment is only needed once. However, Shoutem is constantly working on improving its platform and occasional updates will be needed. Check environment version with:

$ shoutem env --version

and update it with:

$ shoutem env install

Running applications

Now you can run applications locally. Go to Shoutem builder and copy App ID from the Settings tab.

To run in iOS (for which you need to use Mac), do:

$ shoutem run-ios {appID}

… where you should replace {appID} with App ID from Settings tab. Provided App ID will be set in the environment configuration so you can you can omit it when running same app on subsequent attempts. In case you forgot which app is set in configuration, check it with:

$ shoutem env --app

To run in Android, set up Android Emulator with Android Virtual Device: android avd. Once set, run:

$ shoutem run-android

Linking extensions

To start locally develop our extension, we need to tell where is local extension code. This is done by link command. Locate to extension’s folder and do:

$ shoutem env link

Every time you run an app with that extension installed, it will use the extension code that you linked to the app. To unlink the extension code, simply do:

$ shoutem env unlink

from extension’s folder. To unlink all extensions, pass --all flag.

Use show command to see which extensions are linked to for local development:

$ shoutem env show

Debugging and automatic reloading

With the extensions linked, we can start with local development! Once you have your app (with installed extension) running on simulator, debugging is fairly easy. Just follow the React Native guideline for debugging. Automatic reloading, which will refresh your app with the new extension, is also described there.

For debugging on Mac: Debugging is enabled through In-App Developer Menu. You can access the developer menu by shaking your device or by selecting “Shake Gesture” inside the Hardware menu in the iOS Simulator. You can also use the Command ⌘ + D keyboard shortcut when your app is running in the iPhone Simulator, or Command ⌘ + M when running in an Android emulator.

For automatic reloading on Mac: Instead of recompiling your app every time you make a change, you can reload your app’s JavaScript code instantly. To do so, select “Reload” from the Developer Menu. You can also press Command ⌘ + R in the iOS Simulator, or press R twice on Android emulators.

Happy coding!