📝 Add installation instructions and Tizen configuration

README.md

@@ -1,68 +1,54 @@
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-
-## Available Scripts
-
-In the project directory, you can run:
-
-### `yarn start`
-
-Runs the app in the development mode.<br />
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.<br />
-You will also see any lint errors in the console.
-
-### `yarn test`
-
-Launches the test runner in the interactive watch mode.<br />
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `yarn build`
-
-Builds the app for production to the `build` folder.<br />
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.<br />
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `yarn eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
-
-### Analyzing the Bundle Size
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
-
-### Making a Progressive Web App
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
-
-### Advanced Configuration
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
-
-### Deployment
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
-
-### `yarn build` fails to minify
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
+# React Tizen
+
+This project is based on [Create React App](https://github.com/facebook/create-react-app) and demonstrates a simple React project for Samsung Tizen TVs.
+
+There are a few steps to make this project work on a Tizen-compatible TV. First, we will see how to connect your TV to the development environment and allow applications to be installed on it. Then, we will see how to build this project and install it on the TV.
+
+## Configuring Tizen Studio and your device
+
+- Install [Tizen Studio](https://developer.tizen.org/development/tizen-studio/download)
+- In Tizen Studio, use the Package Manager (Tools › Package Manager or <kbd>Alt + Shift + P</kbd>) to install "Samsung Certificate Extension" and "TV Extensions" (you can find them in the "Extension SDK" tab)
+- Close the Package Manager and launch Tizen Studio (it might request you to set your workspace folder, you can choose any folder you want)
+- Connect your TV to Tizen Studio by following [these instructions](https://developer.samsung.com/smarttv/develop/getting-started/using-sdk/tv-device.html).
+- Generate a new Samsung certificate using the Certificate Manager (Tools › Certificate Manager or <kbd>Alt + Shift + C</kbd>).
+  - Select "Samsung" certificate
+  - Select "TV" device type
+  - Select "Create a new certificate profile" and name it (we will need this name later)
+  - Select "Create a new author certificate"
+  - Input a name and a password
+  - It will ask you to connect or create a Samsung Account.
+  - If you want, select a backup path for the certificate and click next
+  - Select "Create a new distributor certificate"
+  - Make sure the connected TV DUID is in the DUID list and click next
+  - Click finish and close the Certificate Manager
+- Go to the Device Manager (Tools › Device Manager or <kbd>Alt + Shift + V</kbd>), right-click the emulator and click "Permit to install applications". You should be prompted with "Suceeded to upload a certificate". You can then close the device manager.
+
+## Building and installing this project
+
+- Make sure that the `tizen` or `tizen.bat` CLI is available in your shell path
+- Create a `config.xml` in the `tizen` folder. This can be done by creating a new Tizen project in Tizen Studio.
+  - Create a new Tizen Project
+  - Select "Template"
+  - Select "TV"
+  - Select "Web Application"
+  - Select "Empty" project
+  - Choose a name and click finish
+  - Once the project is generated, copy the `config.xml` file to the `tizen` folder of this project
+- Before building the project for the first time, edit the `build` and `deploy` scripts in the `package.json` file:
+  - Replace `tizen.bat` with `tizen` if necessary (if you are running a unix system)
+  - In the `tizen.bat package -t wgt -s default -- build/.buildResult` command, replace `default` with the name you gave to your certificate
+  - In the `tizen.bat install -n ReactTizen.wgt -- build/.buildResult` command, replace `ReactTizen.wgt` with the name you gave to your application in the `config.xml`
+- Run the following command to build the project:
+  ```bash
+  yarn build
+  ```
+  This will perform the following actions:
+  - Build the React project in the `build` folder
+  - Copy the Tizen `config.xml` file from the `tizen` folder to the `build` folder
+  - Build the `build` folder as a Tizen web app in the `build/.buildResult` folder
+  - Package and sign the app as a `*.wgt` file
+- Run the following command to install the project on the connect TV:
+  ```bash
+  yarn deploy
+  ```
+  This will upload the `*.wgt` to the device and install it. You can then find the app in the "Apps" section of your TV to launch it.

package.json

@@ -7,12 +7,14 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "react": "^16.13.1",
+    "react-app-polyfill": "^1.0.6",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1"
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "react-scripts build && cp tizen/* build && tizen.bat build-web -- build && tizen.bat package -t wgt -s default -- build/.buildResult",
+    "deploy": "tizen.bat install -n ReactTizen.wgt -- build/.buildResult",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

src/index.js

@@ -1,14 +1,16 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+// This must be the first line in src/index.js
+import "react-app-polyfill/stable";
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+import "./index.css";
+import * as serviceWorker from "./serviceWorker";
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById("root")
 );
 
 // If you want your app to work offline and load faster, you can change

tizen/config.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<widget xmlns:tizen="http://tizen.org/ns/widgets" xmlns="http://www.w3.org/ns/widgets" id="http://yourdomain/ReactTizen" version="1.0.0" viewmodes="maximized">
+    <access origin="*" subdomains="true"/>
+    <tizen:application id="LQ3mgTpq3r.ReactTizen" package="LQ3mgTpq3r" required_version="2.3"/>
+    <content src="index.html"/>
+    <feature name="http://tizen.org/feature/screen.size.normal.1080.1920"/>
+    <icon src="icon.png"/>
+    <name>ReactTizen</name>
+    <tizen:privilege name="http://tizen.org/privilege/internet"/>
+    <tizen:profile name="tv-samsung"/>
+    <tizen:setting screen-orientation="landscape" context-menu="enable" background-support="disable" encryption="disable" install-location="auto" hwkey-event="enable"/>
+</widget>