Get Started on Roku Cloud Solution

Roku is just one of the many target platforms for You.i React Native apps. Use the instructions below to run our quick start app on a Roku device.

Our Cloud Solution uses a combination of a small client application that’s distributed through the Roku store and a server-side application that resides in the cloud. While developing your app, you’ll side-load the client application to your test device and use your local macOS or Linux machine instead of the cloud.

Before You Start

You can build a You.i React Native app for Roku on Linux or macOS, but macOS is only supported for development. Linux is needed to build your final package.

Consult the Environment Setup topic for your chosen development platform to verify that everything is set up properly.

Once your dev environment is all set up, we recommend running through our Quick Start Guide. But if our Quick Start isn’t quick enough for you, here’s an even quicker start.

Install the You.i TV command line interface tool, You.i Platform, and any required dependencies youi-tv doctor requests.

yarn global add youi-cli
youi-tv login    # Enter your product key when prompted.
youi-tv install 6.15.0  # If asked, accept most recent version of Babel or other dependencies
youi-tv doctor   # Resolve any missing components (but don't worry about Android for now)

Set up scaffolding for your app with youi-tv init.

youi-tv init MyApp  # Create a folder called MyApp for your project
cd MyApp

Configure Environment Variables

To build a Roku app, your Bash profile (.bashrc for Linux, or .bash_profile or .zshenv for Mac) needs to include the YI_CLOUD_SERVER_PORT environment variable. The YI_CLOUD_SERVER_PORT environment variable contains the port number used for communication between your local app development server and the Roku client.

Use a port greater than 50000 when testing against a local HTTP server. Note that the default port is 54322 and covers this use case.
Use port 50000 or less when testing against an Amazon S3 server.
Use port 80 when deploying the Release version of the app.

Pro tip

If your Mac is running macOS Catalina and you’re using the default shell, you’ll need to set environment variables in ~/.zshenv. If you’re not sure which shell you’re using, you can check with this query from a terminal window.

echo ${SHELL}

Open your environment configuration file (for example ~/.bash_profile, ~/.zshenv or ~/.bashrc).

Add the following environment variable as needed, and save the file: export YI_CLOUD_SERVER_PORT=<port>

Open a new terminal window or update your current shell with the changes: source ~/.bash_profile, source ~/.zshenv, or source ~/.bashrc.

Validate Your Config

Use youi-tv doctor to validate your configuration. Make any changes needed to meet the requirements.

Run Your App

Build the Server Application

Connect your Roku device to the same network as your development computer.

Put your Roku into developer mode. Take note of your Roku device’s IP address and developer password; you’ll need these below.

Build the Roku server application from the application folder.

Note

When you’re moving between builds that run on your development computer (osx or linux targets) and server builds for Roku, call youi-tv clean before your first build to get a clean configuration.

Mac
Linux

youi-tv clean osx
youi-tv build -p osx -d YI_BUILD_CLOUD_SERVER=ON

youi-tv clean linux
youi-tv build -p linux -d YI_BUILD_CLOUD_SERVER=ON

Note

Our youi-tv run shortcut command isn’t yet supported for Roku.

Run the server application. First, start the Metro Bundler.

yarn start

Open a second terminal window. In that window, go to your app folder (cd MyApp) and start the server application.

Mac
Linux

cd youi/build/osx/Debug
./MyApp

cd youi/build/linux/Debug/bin
./MyApp

Unlike other platforms, the Roku server application doesn’t launch a graphical component immediately. The graphical interface opens after the client connects.

Build the Client Application

Build and side-load the client application on your Roku device.

Open a third terminal window to run the following commands.

cd MyApp/client
youi-tv roku-client -u rokudev:<roku_password> -l -s <roku_IP_address>

Note

The -l option for the Roku client build script uses the default network IP address for your development computer.

The -s <server_IP_address> option is used to specify the IP address of the Roku device on the youi-tv command line. The youi-tv command connects to that IP address and sideloads the client app into the Roku device.

If you need to specify a different IP address - for example, you have multiple network interfaces - use --host <cloud_server_IP_address:port> to tell the Roku device where it can find the running Cloud Server. The port must match the YI_CLOUD_SERVER_PORT environment variable value - it defaults to 54322.

After a few seconds, the server application appears on your development computer and is mirrored by the client on your Roku device. Notice the platform name is RokuOS!

Image of a TV running the quickstart application via the You.i Roku Cloud Solution

Interact with the application with your Roku remote. Continue development activities like using Ctrl-R to reload or open the dev panel from the server app on your development computer.

If You Had Issues

If you had any issues with this tutorial, you can download a zip file with the completed JavaScript and C++ files. The files contain updates for the entire tutorial and won’t run for all the steps, but they’re useful guides for adding lines of code.