Building You.i Engine One 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 React Native software. For details, see Installing the You.i Engine One Software.

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

Tip: This topic shows you how to use youi-tv build to build a React Native app, and then points you to information on deploying your app. You can also use youi-tv run to build, deploy, and launch your app all in one step. Note that youi-tv run is not yet supported on Roku.

Build Procedure

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 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 and build the application:
    1. For use on your local system, do:

      youi-tv build -p <platform> add -c Release if building a release version.

    2. For use on a system other than the one runnning the Metro Bundler:

      youi-tv build -p <platform> --remote <IP Address>

      Where <IP Address> is the IP address of the machine running the Metro Bundler. Your local development platform’s IP address is used if this otpion isn’t specified.

    3. If building for Android TV, do:

      youi-tv build -p android -d YI_ANDROID_TV=ON

    4. If deploying to a PlayStation 4 (PS4) create a the required .pkg file by running:

      youi-tv build -p ps4 -t <AppName>_packageWhere <platform> is one of the following: osx, ios, tvos, android, uwp, tizen-nacl, ps4, or linux. See a list of supported target platforms you can build from your current development environment with youi-tv build --help.

    Use the optional --local --file index.youi.js argument as required. For more details on using local, 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.

  4. 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 Target Platforms).
  5. To use the Metro Bundler ( yarn server), open a new Terminal or Windows PowerShell window, then do:

    cd <your application folder> e.g. cd MyApp

    yarn start

    The yarn server starts. Look for the following to appear in the window:

    Loading dependency graph, done.

    To stop the Metro Bundler, press Ctrl + C.

  6. Go back to your previous Terminal or shell window and 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 in Get Started > Customize to see the various parts of the code base.

Build System Customization

For more information on optional arguments for the build system, see youi-tv build.

If desired, you can 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, to the project’s package.json file:

"youi": {
	"entryFile": "index.youi.js",                                                                      
	"bundleFileName": "index.youi.bundle",
	"defaultBundleMode": "local",                          
	"platformSpecificBundleModes": { "osx": "local",

where:

  • entryFile sets a default value for the --file argument.

  • defaultBundleMode sets the default for --local , --ram_bundle, and --remote is the default if the key doesn’t exist.
  • platformSpecificBundleModes is a list of platforms for which you want to set a default bundle mode. The default specified is used by the generate command.
  • sourcemapOutput generates a JSON output at the given path for debugging dynamic JS module loading.
  • bundlerConfiguration allows you to supply a custom metro configuration for RAM bundling options.