Building and Running a Roku App

These instructions provide a step-by-step guide to build, deploy, and run a basic Roku app using You.i Roku Cloud. See also Build and Deploy the RN Sample App on Roku.

You can develop on either Linux or macOS.

Important

The Roku device and your computer must be able to communicate on the same network. They must be either:

On the Wi-Fi network with the same name.
On the same IP subnet.

Create and run the server

Open a terminal window and navigate to where you want to create your app.

youi-tv init firstRokuApp

Build the new app.

Mac
Linux

cd firstRokuApp
youi-tv build -p osx -d YI_BUILD_CLOUD_SERVER=ON

cd firstRokuApp
youi-tv build -p linux -d YI_BUILD_CLOUD_SERVER=ON

You’ll find the executable in either youi/build/osx or youi/build/linux.

Pro tip

You can also launch the server from Xcode.

Open a new terminal window and navigate to the firstRokuApp folder.

cd firstRokuApp
yarn start

The Cloud server app is now ready for a Roku client to connect.

Connect the client to the server

Open a new terminal window and navigate to the firstRokuApp/client folder.

cd firstRokuApp/client
youi-tv roku-client -l -s <Roku device IP address> -u rokudev:<password>

Note

Remember that the password required for this command was set back at the end of Step 1, when you put the Roku device into developer mode.

To get your Roku device IP address, go to Home > Settings > Network > About on your device.

Note

If you have multiple network interfaces available on your computer, or you’re using a VPN, you need to remove the -l option from the youi-tv command. Instead, add the --host <server IP address>:54322 option. The server IP address must be the IP address of your computer, where the server is running, and that IP address must be on the same subnet as the Roku device. The port number must be 54322.

The youi-tv roku-client command:

Packages the client, creating the file RokuClient.zip.
Side-loads the zip file onto your Roku device.
Executes the client on your Roku device.
Connects the client to the server.
Displays the basic You.i app screen on your Roku device.

Make a change and see the result

Make a simple change in your firstRokuApp code. This step is to give you confidence in the rapid development process, where you make a change in JavaScript code and see that change reflected immediately in the output from the client.

In the firstRokuApp folder, open the index.youi.js file in a text editor.
Find the text string: Welcome to your first You.i React Native app!.
Change the string to: Hello World!!!.
Save the file and notice that your Roku device now displays “Hello World!!!”

The Metro Bundler has picked up the change to the JavaScript file and updated the running app. Since the text change affects the You.i SceneTree, the Cloud SDK has forwarded this change to the client.