Set Up your Vega Web App

​

To set up your Vega Web App to develop your app

1. Add an app template by following the directions in the Vega SDK topic Create an app from a template.
2. To install WebView, at the command prompt, run the following command.
   npm install @amazon-devices/webview@^3.3.0
   
3. In your app folder, open the manifest.toml file, and then add the following services and privileges.
   # If the app needs video playback
   [[wants.service]]
   id = "com.amazon.media.server"
   [[wants.service]]
   id = "com.amazon.mediametrics.service"
   
   [[wants.service]]
   id = "com.amazon.mediabuffer.service"
   [[wants.service]]
   id = "com.amazon.mediatransform.service"
   
   # If the app needs audio playback
   [[wants.service]]
   id = "com.amazon.audio.stream"
   [[wants.service]]
   id = "com.amazon.audio.control"
   
   # If the app needs DRM playback
   [[wants.service]]
   id = "com.amazon.drm.key"
   [[wants.service]]
   id = "com.amazon.drm.crypto"
   [[needs.privilege]]
   id = "com.amazon.privilege.security.file-sharing"
   
   # To enable accessibility support for your app,
   # it's highly recommended you add UCC service with SR
   [[wants.service]]
   id = "com.amazon.kepler.ucc.publisher"
   
   # Enable Group-IPC to access media services.
   [wants]
   [[wants.service]]
   id = "com.amazon.gipc.uuid.*"
   
   [offers]
   [[offers.service]]
   id = "com.amazon.gipc.uuid.*"
   
   # You may add other services as needed
   
4. Add the following to your JavaScript XML (JSX) file.
   import { WebView}  from "@amazon-devices/webview";
   
5. In your src/App.tsx file, add the following code, which includes the hasTVPreferredFocus={true} prop, to render WebView.
   import { WebView } from "@amazon-devices/webview";
   import * as React from "react";
   import { useRef } from "react";
   import { View, StyleSheet } from "react-native";
   
   export const App = () => {
     const webRef = useRef(null);
     return (
       <View style={styles.container}>
         <WebView
           ref={webRef}
           hasTVPreferredFocus={true}
           source={{
             uri: "https://www.example.com",
           }}
           javaScriptEnabled={true}
           onLoadStart={(event) => {
             console.log("onLoadStart url: ", event.nativeEvent.url)
           }}
           onLoad={(event) => {
             console.log("onLoad url: ", event.nativeEvent.url)
           }}
           onError={(event) => {
             console.log("onError url: ", event.nativeEvent.url)
           }}
         />
       </View>
     );
   };
   
   // Styles for layout, which are necessary for proper focus behavior
   const styles = StyleSheet.create({
     container: {
       flex: 1,
     }
   });
   

​

Related topics

• Vega Web App Overview
• Develop Your Vega Web App
• Vega Web App Performance Best Practices