Build Your App

​

Build an app with Vega Studio

​

Prerequisites

1. Install the Vega SDK.

​

Step 1: Create a Vega project

1. Open Visual Studio Code (VS Code).
2. Select the Vega extension icon from the activity bar to open the Kepler Studio panel.
3. Click the + (Create Vega Project) icon from the Projects section.
4. Choose a project template.
   • hello-world - Use this project template to create an app that depends on React Native v0.72.
   • basic-turbo-module - Use this project template to create a custom Turbo Module.
   • idl-turbo-module - Use this project template to create an app compatible with all supported React Native versions and native IDL APIs.
5. Select a directory for your project.
6. Provide a project name for your app (no spaces or special characters). For example: My3PSample Press Enter after entering your project name.
7. Enter a package name for your project in this format <top-level domain>.<company_name>.<app_name>. For example: com.org.vegaproject Press Enter after entering a package name for your project. Vega Studio creates your project based on your selected template. When you select a basic-turbo-module or idl-turbo-module template with an open project, Vega Studio creates a multi-root workspace. The new project appears as a folder, so you can use the Turbo Module as a dependency and develop both in the same VS Code window. Vega Studio adds the new basic-turbo-module as a dependency to your open project. If you have multiple Vega apps open during basic-turbo-module creation, the extension prompts you to select the target app.

​

Step 2: Build a Vega app

1. Select your project from Kepler > Projects.
2. Choose your build mode (debug or release) from the Build Mode section.
3. Select the play button from the Devices section to start the target virtual device.
4. Select the build button next to your project name to start the build process.

​

View the build output

1. Go to the integrated terminal panel in VS Code.
2. Select the Output tab.
3. Choose Kepler from the drop-down list. You should see info build-kepler completed. If the build fails, identify the issue by expanding the error messages.

​

Step 3: (Optional) Configure a custom port

1. Go to Code > Settings > Settings in VS Code.
2. Enter React Native Port in the search box.
3. Enter your port number.
4. Reload VS Code when prompted. When you start a debug session, Vega Studio automatically configures shared preferences on the device in /data/shared_preferences.json.

​

Step 4: Run and test a Vega app

1. Navigate to Kepler Studio > Devices and select VirtualDevice:Tv.
2. Select the play button to start the virtual device.
3. Wait for the VVD window to open and the device to finish loading (VirtualDevice:Tv status should be ready, not ‘Loading…’)
4. Select the play button next to your project name. For details, see Vega Virtual Device. On Fire TV Stick:
5. Select your Fire TV Stick device from Kepler Studio > Devices.
6. Click the “play” button next to your project name. For details, see Fire TV Stick.

​

Step 5: (Optional) Stop the React Native Packager

1. Open Command Palette: Mac: Cmd+shift+P Linux: Ctrl+Shift+P
2. Enter and select React Native: Stop Packager. After stopping the Packager (using either option), restart your app from Kepler Studio > Projects. Select the play button to the right of your app name.

​

Step 6: Debug a Vega app

​

Step 7: Analyze app performance

• Measure Your App KPIs
• Measure Your App’s UI Fluidity and Foreground Memory
• Identify UI Rendering App Performance Issues
• Monitor and Record Your App Performance
• Monitor and Record Your App Memory
• Configure App Overdraw Detection