Skip to main content

Quick start

How to set up the development environment​

Execute the following steps to bootstrap your development environment. At the end of the tutorial, you'll run the whitelabel Deltatre App within your local Roku device.

1. Development environment setup​

  1. Node 16+ LTS

  2. VSCode (Text Editor/ IDE)

  3. VSCode extension BrightScript Language

  4. Roku device in Developer mode.

2. Create and clone your repository from the d3studio template​

  1. Visit your organization's GitHub page.

  2. Click on the New button to create a repository.

  3. Choose d3studio-roku-template from the Repository template dropdown.

  4. Enter a Repository name (ie. using the following naming convention client-x-roku), add a Description, adjust visibility, then click Create repository.

  5. Open a terminal and clone the just created repository locally:

   git clone <repository-url>

  1. Open the local project in VSCode and perform a codebase search for these markers:

    • Replace readable_project_name with the actual project name (i.e., Client X)
    • Replace project_code with the actual project code name (i.e., clientx with no spaces and letters only)
    • Replace project_file_name_prefix with the package application name prefix (i.e., Client_x can support spaces, dashes, and underscores)
    • Replace repo-name with the project's GitHub name (i.e., client-x-roku should match the GitHub repo name; convention is to include the platform)
    • Also rename the project/project_code folder with the actual project code name (ie. project/clientx)

3. Generate the GitHub PAT (Personal Access Token)​

  1. Access to the core project

    • Confirm you have (or request) read access to the d3studio-roku (core) project.

  2. Navigate to GitHub Developer Settings

  3. Configure Token Settings

    • Name the token (e.g., "{project_code}_PAT").
    • Set Resource owner deltatre-vxp.
    • Set an expiration date (recommended for security).
    • Set Repository access Only select repositories: {repo-name}-roku and d3studio-roku.
    • Select the necessary permissions (scopes):
      • Repository permissions:
        • Read and Write access to actions, contents, and environments
        • Read access to codespaces metadata and metadata
      • Organization permissions:
        • Read and Write access to custom properties

  4. Generate and store the Token

    • Click "Generate token".
    • Copy and store the token
    • In the d3studio-roku (core) project Actions secrets and variables, use the {project_code}_PAT naming convention.
    • In the project_code (shell) project Actions secrets and variables, use the {project_code}_PAT naming convention.
    • Store the token on your local drive as it will be needed to configure the project_code (shell) project

4. Installing tooling and dependencies​

  1. Install the Node tools and dependencies:

    Within a Command line tool (bash), navigate to the cloned project root folder locally and run:

    npm install

    Also, within the same folder, run:

    npm run vscode setup

  2. Within the project, open the newly created .env file in VSCode and update the following params:

    • Replace {YOUR_ROKU_DEVICE_DEV_PASSWORD} with your Dev enabled Roku device Dev password
    • Replace {YOUR_ROKU_DEVICE_IP_ADDRESS} with your Dev enabled Roku device IP address
    • Replace {YOUR_MAC_PC_LINUX_IP_ADDRESS} with your development machine IP address. This enables Charles' proxy support. Note: Comment/uncomment this line to enable/disable the Charles support.
    • Replace {YOUR_GITHUB_PERSONAL_ACCESS_TOKEN} with your Personal Access Token.

  3. Checkout a specific d3studio-roku (core) project version

    Open d3studio-roku core project tags or releases Url and make a note of the tag version you would like to support on your shell project. (ie. D3studio-Roku 1.0.0 is tagged at 1.0.259)

    To checkout that core project version, within the Command line tool (bash), navigate to the cloned project root folder locally and run:

    npm run update:coreApp -- --tagName 1.0.259

    The coreApp script will checkout the following folders based on that tagName version:

    1. /lib
    2. /project/common
    3. /src

    Note: Folders above are blocked from source control changes (.gitignore) and show up in a VSCode codebase-wide search. They're not intended to be editable. You can make local changes to diagnose bugs. Any permanent changes must be made to the d3studio-roku (core) project codebase.

    For Continuous integration (CI) builds, the tagName is stored in Actions secrets and variables under REF_APP_TAG_NAME.

5. Run the project​

Sideload the project to your Roku device via Run and Debug menu in VSCode. The enviroment defaults to Axis Stable.

Tell us if the article helped you