Developer Portal

Building You.i Engine React Native Apps

Note

The procedures in this topic apply to all build target platforms except Roku. Building and testing Roku apps requires special setup due to the nature of the solution. See Setting Up a Roku Development and Test Environment and Building Roku Apps.

The procedures in this topic assume you have installed the You.i TV CLI with yarn global add youi-cli and installed the You.i Engine React Native software. For details, see Installing the You.i Engine One Software.

Use the following procedure to build You.i Engine React Native apps.

Build Procedure

Note

When working on a Windows development platform, You.i TV recommends that you put your app at the root of your storage device. Doing so avoids possible issues with paths being too long or with user account names containing spaces. Spaces in the file path will cause errors when building for Android on Windows.

Do the following steps from a Terminal in Mac or Linux, or a Windows PowerShell window in Windows:

  1. Navigate to the youi subdirectory of your You.i Engine React Native app:
    cd MyApp/youi
  2. (Optional) To exclude specific files or file extensions or file directories during asset copying before project generation, see Excluding Files or File Directories or File Extension.
  3. Generate the app project:
    1. For a local platform, do:
      ./generate.rb -p <platform>
    2. For a remote platform, do:
      ./generate.rb -p <platform> --remote [IP Address]
      Where [IP Address] is the IP address of the machine that connects to the remote devices. The IP address will get fetched automatically, if not specified.
    Where <platform> is one of the followings: osx, ios, tvos, android, uwp, tizen-nacl, ps4, or linux.
    Use the optional --local --file index.youi.js or --inline --file index.youi.js arguments as required. For more details on the inline and local arguments, see Build System Arguments.
    The project file is generated in the build/osx/ subdirectory for Mac, build/linux/Debug subdirectory for Linux, and build\uwp subdirectory for Windows.

    Note

    Inline bundling is only supported for special builds of the Roku target platform.

  4. Build the app project.
    • For Debug builds:
      • For Mac, enter: ./build.rb -b build/<platform>
      • For Linux, enter: ./build.rb -b build/<platform>/Debug
      • For Windows, enter: ./build.rb -b build/<platform>
    • For Release builds, add -c Release to the previous commands.

      Note

      To deploy an app on PS4, ensure that the PS4 build package is created using the following build command: ./build.rb -b build/ps4 -t <AppName>_package. Using this command, there will be a .pkg file created in your app project folder, which will be deployed on PS4.

  5. If necessary, load the resulting app onto a device. Ensure the device is on the same network as your development platform. For more information, see the steps in Deploying You.i Engine One Apps.
  6. If you are using a yarn server, open a new Terminal or Windows PowerShell window and navigate to the app directory:
    cd MyApp/

    Note

    If you start the yarn server from path other than the <MyApp> directory, you will see an error on the screen.


  7. In the new window, start the yarn server:
    yarn start
    The yarn server starts. Look for the following to appear in the window:
    Loading dependency graph, done.

    Note

    To stop the yarn server, press Ctrl + C. To confirm if yarn is running in the background, use the fg command on the terminal or command shell.

  8. Launch the app executable; for example in MyApp/youi/build/osx/Debug/MyApp.
    The executable name and location varies depending on your target platform and if it is a Debug or Release app. See Generated Files for details.

Next, see Code Structure Overview to see the various parts of the code base.

Build System Arguments

Note

You.i Engine React Native does not support hot reloading of changes. It supports live reloading when using a yarn server. Using --local or --inline also disables live reloading of changes.

To enable live reload, do CTRL + R or select Reload RN in the React Native Reload menu of the Dev Panel window.

In addition to common build system arguments, you can use the following arguments for You.i Engine React Native apps.


--local: Optional. Writes output of a JS bundle to a file that gets included with the application package on running the generate.rb command to avoid running the yarn server. The JS bundle loads at the start up of the application.


--file: Optional. Includes files required for JS bundle when there are not multiple JS files directories.


You can also set default values for the --file argument, bundle file name, bundle mode, and platform specific bundle modes by adding a youi object, as shown below, in the package.json file:

"youi": {
	"entryFile": "index.youi.js",                                                                      
	"bundleFileName": "index.youi.bundle",
	"defaultBundleMode": "local",                          
	"platformSpecificBundleModes": { "osx": "local", "roku": "inline", "ios": "remote" }
},

where:

  • entryFile sets a default value for the --file argument.
  • defaultBundleMode is the default for --local or --inline, where --remote is still the default if the key doesn't exist.
  • platformSpecificBundleModesis the list of platforms follow from the same list of platforms used by the generate command.

Note

If the -file argument is still used with the ./generate command, the one mentioned in package.json gets overridden.

The generate command allows you to use the following arguments:

-p, --platform PLATFORM: Required. The name of the target platform for which the project is generated.


-g, --generator GENERATOR: Optional. The name of the generator to use. If not mentioned, the default generator of the development platform will be used.


-b, --build_directory DIRECTORY: Required. The directory where the generated project files will be placed.


-d, --define NAME=VALUE: Optional. Adds a defined variable and its value to pass along to CMake


-c, --config CONFIGURATION: Optional. The configuration type ["Debug", "Release"] to send to generator. It is only required for generators that do not support multiple configurations.


--url_scheme URL_SCHEME: Optional. Enables the app to be launched with deep links using the mentioned scheme.


--youi_version ENGINE_HINT: Optional. Can be a path, such as /path/to/5.0, or semantic version, such as 5.0.1, and the project gets generated against the specified You.i Engine One version.


The build command allows you to use the following arguments:

-b, --build_directory DIRECTORY: Required. The directory that contains the generated files to build.


-c, --config CONFIGURATION: Optional. The configuration type ["Debug", "Release"] to send to generator. It is only required for generators that do not support multiple configurations.


-t, --target TARGET: Optional. The target to execute during the app build process.


-a, --arg BUILD_ARGUMENT: Required. The name of the target platform for which the project is generated.


Generated Files

When you are done generating and building the project, you can see the built files at the following locations depending on the target platform for which the project is built:

OSX

  • Generated Project Files Path: MyApp/youi/build/osx/MyApp.xcodeproj
  • Generated Files for a Debug Version App: MyApp/youi/build/osx/Debug/MyApp
  • Generated files for a Release Version App: MyApp/youi/build/osx/Release/MyApp

iOS

  • Generated Project Files Path: MyApp/youi/build/ios/MyApp.xcodeproj
  • Generated Files for a Debug Version App: MyApp/youi/build/ios/Debug-iphoneos/MyApp
  • Generated Files for a Release Version App: MyApp/youi/build/ios/Release-iphoneos/MyApp

tvOS

  • Generated Project Files Path: MyApp/youi/build/tvos/MyApp.xcodeproj
  • Generated Files for a Debug Version App: MyApp/youi/build/tvos/Debug-appletvos/MyApp
  • Generated Files for a Release Version App: MyApp/youi/build/tvos/Release-appletvos/MyApp

Android

  • Generated Project Files Path: MyApp/youi/build/android/project/build.gradle
  • Generated Files for a Debug Version App: MyApp/youi/build/android/project/MyApp/build/outputs/apk/MyApp-debug.apk
  • Generated Files for a Release Version App: MyApp/youi/build/android/project/MyApp/build/outputs/apk/MyApp-release.apk

UWP

  • Generated Project Files Path: MyApp\youi\build\uwp\MyApp.sln
  • Generated Files for a Debug Version App: MyApp\youi\build\uwp\AppPackages\MyApp\MyApp_1.0.0.0_x64_Debug_Test
  • Generated Files for a Release Version App: MyApp\youi\build\uwp\AppPackages\MyApp\MyApp_1.0.0.0_x64_Test

Roku

  • Generated Project Files Path: MyApp/youi/build/osx/MyApp.xcodeproj(Mac Only)
  • Generated Files for a Debug Version App:
    • Mac: MyApp/youi/build/osx/Debug/MyApp
    • Linux: MyApp/youi/build/linux/Debug/bin/MyApp
  • Generated Files for a Release Version App:
    • For Mac: MyApp/youi/build/osx/Release/MyApp
    • For Linux: MyApp/youi/build/linux/Release/bin/MyApp

Tizen

  • Generated Project Files Path: MyApp/youi/build/tizen-nacl/<ConfigurationType>/MyApp-<ConfigurationType>.wgt
  • Generated Files for a Debug Version App: MyApp/youi/build/tizen-nacl/Debug/MyApp-Debug.wgt
  • Generated Files for a Release Version App: MyApp/youi/build/tizen-nacl/Release/MyApp-Release.wgt

PS4

  • Generated Project Files Path: MyApp\youi\build\ps4\MyApp.sln