Deploying a Web App to a 2016 Samsung SmartTV

Lately I’ve been building a web app for my 2016 Samsung SmartTV using React Native for Web. It’s a Twitch client that looks like this:

Screenshot of Tizen TV web app

Deploying this app to the TV is a pain in the rear. You need to follow the steps outlined in Samsung’s quick-start guide to developing web applications. That guide is not particularly well written, and it’s missing some key details, so I’ve decided to document the steps I followed.

Prerequisites#

The only thing listed in the TV extension prerequisites is Java. I encountered errors with Java 11 on macOS Mojave, so it’s probably safer to stick with Java 8.

Tizen Studio#

Once Java is installed, the next thing to do is download and install Tizen Studio.

Installing Tizen Studio 3.0

It’s an Eclipse-based IDE, plus some other tooling, that Samsung provides to help you develop apps for its devices. (Yeah, Eclipse is still a thing in 2019. I was surprised too.)

Once the installation finishes, try starting Tizen Studio. If it fails to start, check the contents of ~/tizen-workspace/.metadata/.log. That’s how I discovered that Java 11 was causing issues.

Package Manager#

Now launch the Package Manager app that got installed with Tizen Studio:

Launching Package Manager

Switch to the Extensions SDK tab, and install both the Samsung Certificate Extension, and the TV Extensions-X.Y appropriate for the TV you’re going to be deploying to:

Switching to the Extensions SDK tab

I’m going to be deploying to a 2016 TV, but Tizen Studio 3.0 only allows us to install TV Extensions-4.0, which doesn’t support TVs that “old”. The solution is to download the TV Extension 3.1.2 image from the TV Extension archive:

Downloading the TV Extension 3.1.2 image

Once downloaded, go back to the Package Manager window, click on the Configuration cog, and expand the Extension SDK section at the bottom of that dialog:

The Extension SDK section of the configuration dialog

Click the plus sign to add a new repository, and choose the location of the zip file you downloaded earlier:

Adding the TV Extension 3.1.2 image as extension repository

Enable the new repository, and disable all others:

Enabling the new extension repository

If you close the dialog and go back to the Extension SDK tab, you’ll see the new extension. Now install it:

The Extensions SDK tab with TV Extensions-3.0

That was fun, wasn’t it? 😭

Enabling developer mode on the TV#

To be able to install your own apps on the TV, you’ll need to enable its developer mode. To do so, open your Apps screen:

The Apps screen on the TV

Then press 1, 2, 3, 4, 5 using your remote or the on-screen keypad. A dialog will show up. In that dialog, turn Developer mode to On, and enter the IP address of your computer. You may need to reboot the TV for the changes to take effect.

Device Manager#

Launch the Device Manager app that got installed with Tizen Studio, click the Remote Device Manager button, and then click the Scan Devices button in that dialog:

The Remote Device Manager dialog

The IP of your TV should be listed there. Toggle its Connection switch, and after a few seconds your TV will show up in the main window. You’ll now create a certificate and install it on the TV, so that you can deploy the app.

Certificate Manager#

Launch the Certificate Manager app that got installed with Tizen Studio, and dismiss the first dialog it shows you:

Dismissing the initial Certificate Manager dialog

Now click the plus sign to add a new certificate:

The Certificate Manager dialog

You’ll be creating a Samsung certificate:

Creating a new Samsung certificate

Device type will be TV:

Device type is TV

Name your certificate profile to whatever you want:

Profile name can be whatever you want

You’ll be creating a new author certificate:

Creating a new author certificate

Fill out the details of this new certificate:

Details of the new author certificate

Enter a path to store a backup of the certificate:

Backing up the new author certificate

You’ll also be creating a new distributor certificate:

Creating a new distributor certificate

In the next screen, you should see the DUID for your TV in the list:

Adding the DUID of your TV to the distributor certificate

If it’s not there, switch to the Device Manager app, right click your TV, and click the DUID option:

Copying the DUID of your TV

That will copy the DUID to your clipboard. Go back to the Certificate Manager app, paste it, and click Next.

The distributor certificate has been created successfully

Now the new certificate profile will show up as active:

The new certificate profile is active

Switch back to the Device Manager app, right click your TV, and click the Permit to install applications option:

Uploading your certificate to the TV

If everything goes well, you’ll see a success dialog:

Successfully installed the certificate on the TV

Now you should be able to run the app on your TV.

Deploying from Tizen Studio#

One way of deploying the app to your TV is to import the folder with all the assets for your app into Tizen Studio, and then right click on the project and select Run As > Tizen Web Application:

Running the app from Tizen Studio

However, that process takes a really long time for my app, especially with minified JavaScript bundles. I think it’s because it tries to parse the files to lint them, and whatever parser it’s using is terrible. So here’s an alternative.

Deploying from the command line#

There’s a way to package and deploy the app from the command line. You just need to add a folder to your PATH:

export TIZEN_STUDIO_HOME="$HOME/tizen-studio/tools/ide"
export PATH="$PATH:$TIZEN_STUDIO_HOME/bin"

You can check that the tizen binary is found by running tizen version:

$ tizen version
Tizen CLI 2.4.48

Assuming the production build for your app lives in a folder called dist, you’d package the app with:

tizen package -t wgt -- dist

You’d install the packaged app on your TV with:

tizen install -n MyApp.wgt -- dist

And finally you’d run the app on your TV with:

tizen run -p xxxxxyyyyy.MyApp -- dist

Every time you make a change, you’ll have to package and install, but at least you won’t have to interact with Tizen Studio…

Posted on by Daniel Perez Alvarez. Got any comments or suggestions? Send me a tweet or an email.