Developing a Tizen Web Application with the React Framework and Hot Module Replacement

This guide walks you through developing and deploying Web applications on the Tizen platform step-by-step. It also covers making development more efficient and productive by integrating the React library to your project and using Hot Module Replacement (HMR) to swap out modules without needing to refresh the user interface.

Getting Started with the React Framework

To install NodeJS and get started building a React Web application:

1. Install NodeJS

Download and install NodeJS (https://nodejs.org/en). NodeJS includes the npm package manager for installing packages and their dependencies and the npx package runner for running packages without needing to install them.

2. Create Your Project

Create your application using the 'create-react-app' boilerplate package (https://create-react-app.dev/).

To create your application, run the 'npx create-react-app my-react-app' command in the command line. You can also run the 'create-react-app' package without installing it, by using the 'npx create-react-app my-react-app' command. This creates a 'my-react-app' folder for the application.

When the npx installation log is shown as in the image below, the application has been successfully created.

3. Test Your Application

To test your new application, start the development server with npm:

1. Run 'webpack-dev-server' with the 'npm run start' command.
   

   

2. Once the development server has been started, you can access your application at the Web address provided. If the following sample page is displayed, the application is running correctly.
   

---

Getting Started with a Tizen Web Application Project

To install Tizen Studio and build your first Tizen Web application project:

1. Install Tizen Studio

Download and install Tizen Studio (https://developer.tizen.org/development/tizen-studio/download?langredirect=1).

2. Install SDKs

Use the Tizen Studio Package Manager to install the following packages:

• Tizen 8.0 and Tizen SDK tools (Baseline SDK, Native CLI, Native IDE, Web CLI, and Web IDE) in the Main SDK.
• TV Extensions-8.0, Samsung Certificate Extension, and TV Extensions Tools in the Extension SDK.

3. Create a Certificate Profile

Create a certificate profile using the Tizen Studio Certificate Manager. For more information, see the following guide: https://developer.samsung.com/smarttv/develop/tools/additional-tools/vscode-extension.html

4. Create a Tizen Web Application Project

To create a new Web application project in Tizen Studio:

1. In Tizen Studio, select File > New > Tizen Project. The Project Wizard opens. Click Sample in the Project Wizard and then click Next.
   
2. In the Profile & Version tab, select the TV application profile and use the version drop-down menu to choose Tizen 8.0. Then click Next.
   
3. In the Application Type tab, select Web Application and click Next.
   
4. In the Template tab, select Basic Project and click Next.
   
5. In the Project Properties tab, enter a name for your project and click Finish to complete the Project Wizard.
   

5. Connect Your Device and Run the Sample Application

To connect to your test device and testing your sample application:

1. In the Tizen Studio Remote Device Manager, connect to the IP address of your device, using port 26101.
   
2. Run your sample application on the device. The following image shows a successful result.
   

---

Running Your React Project in a Tizen Web Application

To run your React project in a Tizen Web application:

1. Edit the package.json File

To make sure all assets provided with a relative path work correctly once deployed on the server, it's necessary to add the "homepage": "." element to the 'package.json' file, as shown in the image below.

2. Build Your React Project

To build your React project, run the 'npm run build' command. React code is built using webpack, which changes it to Vanilla JavaScript code that the browser can execute using Babel. Webpack also compresses the code.

3. Copy the Build Folder

Copy the 'build' folder of your React project to the Tizen Web application project folder.

4. Update the Tizen Web Application Entry Point

Update the entry point of your Tizen application by editing the 'config.xml' file and change 'index.html' to 'build/index.html'.

5.Connect to Your Device and Run the Tizen Web Application

To connect to your test device and run your sample application:

1. In the Tizen Studio Remote Device Manager, connect to the IP address of your device, using port 26101.
2. Run your Tizen Web application on the device. The following image shows a successful response.
   

You can also move your React projects to Tizen Web application projects and only build them afterwards. This way, you can skip the Copy the Build Folder step above.

---

Using Hot Module Replacement (HMR) in a Custom Tizen Web Application

HMR is a development method where components of a Web application can be modified without needing to fully refresh the page each time. When a component is modified, only that component is changed.

Using the traditional Live Reload method in which the entire screen is reloaded, we lose the status value of the page. As we proceed with the development, we need to reproduce the entire specific page status again. On the other hand, with HMR only the necessary components are reloaded, so the state is maintained and development can be done quickly.

1. Download and Edit the HMR Template HTML

To get started implementing HMR in your own custom application, download hmr.html. This test file accesses the local development server and receives data (this data can be connected to the web socket). The file is also responsible for running that data.

Once you have downloaded the file, edit it and change the address 'localhost' to match the development server IP obtained earlier.

2. Edit the config.xml File

In the 'config.xml' file of your Tizen Web application, make the following changes:

1. Modify the entry point line as shown in the image below.
   
2. Add the correct Tizen privileges to allow your Web application to connect to the Internet.
   • <access origin="*" subdomains="true"></access>
   • <tizen:privilege name="http://tizen.org/privilege/internet"/>
     

3. Edit the index.html File

Replace the content of the index.html file of your Tizen Web application with the content of the hmr.hrml file you downloaded in step 1, as shown below.

4. Eject the react-scripts Package

For convenience the 'create-react-app' boilerplate package we used to create our React application earlier packages all the React scripts together into a single package. For creating a custom application, we need to separate the 'react-scripts' package into its constituent parts using the 'eject' command.

5. Set the Websocket Path for the React Application Project

Create a '.env ' file for your React application and edit it as below to set the websocket path:

• WDS_SOCKET_HOST="${devserver IP}" // . websocket server URL is decided for HMR
• PUBLIC_URL="http://${devserver IP:PORT}/"
  

6. Set the Bundler File Path

Edit the 'config/paths.js' file to set the 'publicUrlOrPath' constant as below:

• const publicUrlOrPath = process.env.PUBLIC_URL;

7. Start the Development Server

Before testing your application, you need to start the development server with the 'npm run start' command.

8. Connect to Your Device and Run the Tizen Web Application

To connect to your test device and test your sample application:

1. In the Tizen Studio Remote Device Manager, connect to the IP address of your device, using port 26101.
2. Run your sample application on the device. The following image shows a successful result.
   
3. You can now modify the React code and see that it is modified in real time on the device screen.

The following example shows HMR operating in real time when installed on the device.
Example of HMR in action

Advantages of using HMR

HMR has a number of advantages for development:

• The pepper plugin can be used in an HMR environment, such as tvplusapi, webapis, etc.
• React code webpack build + Tizen widget build + installation time takes 70 seconds based on the TVPlus application and 25 seconds on the CRA application.
• Traditional Tizen development requires tens of seconds of build time after each change to the code, but using HMR, you can maintain the application status and check the changed UI immediately, enabling rapid development.
• You can use RWI to query logs and object values in real time.