Creating an iTwin Studio App

In this guide, we will explore how to create a new iTwin Studio app from scratch. But before we dive into steps, you need to know about some key concepts.

What is an iTwin Studio App?

An iTwin Studio app is a set of iTwin-based functionality that is loaded into an instance of iTwin Studio, creating full workflows for an end user. Apps are loaded after iTwin Studio startup. They can customize startup options, and provide functionality through activation events in the frontend and in the backend.

Template support in studio-cli

The iTwin Studio CLI contains app templates that contain basic activation events, pre-loaded developer tooling and package.json scripts, along with VS Code configuration to aid in the development and debugging of iTwin Studio apps.

Each template contains the necessary npm packages to get started, along with default package.json scripts for developing, bundling, and publishing an iTwin Studio app. It also includes stubs for each type of configuration that is required to create an App and load it into the iTwin Studio framework.

What kind of templates are available with studio-cli?

Studio CLI provides several templates to start development with, organized into two categories:

Standalone Apps Templates

These templates create complete, standalone iTwin Studio applications:

• Basic App

  The Basic template provides a mostly-empty code template, with the functions that are required by iTwin Studio, as well as the scripts, tooling, and configuration to aid in app development. You can consider it the “Hello world” iTwin Studio app.

• Viewer App

  This template provides everything that the Basic template provides, but also includes a Viewer and an iModel Selection frontstage. Use this template if you are building an App that requires viewing iModels.

• Editing App (Alpha)

  This template extends the Viewer template with editing capabilities, allowing you to create and modify iModel data. Use this template if you need to build applications with editing workflows.

Modular Templates

These templates are for developing reusable code modules that can be published and imported into other iTwin Studio apps. They are intended for more advanced setups, and are usually not needed.

• Basic Module

  Creates a single module project with a structure optimized for creating reusable frontend and backend code. Use this when you want to share functionality across multiple apps.

• Modular Monorepo

  Creates a monorepo workspace containing both a reusable module and a sample app. The sample app demonstrates how to consume the module and serves as a development environment. Use this for developing and testing modules alongside a working app.

Steps For Creating an iTwin Studio App

Now that you know the basic concepts, let’s see how we can create an iTwin Studio app.

Prerequisites

• Node.js v20.x or newer

App creation

From a terminal, execute (Mac/Linux):

npm_config_registry=https://pkgs.dev.azure.com/bentleycs/_packaging/Packages/npm/registry/ npx @bentley/studio-cli@latest apps init

or on Windows cmd or PowerShell:

npx --registry="https://pkgs.dev.azure.com/bentleycs/_packaging/Packages/npm/registry/" @bentley/studio-cli@latest apps init

Say yes to the prompt seeking your approval to install studio-cli package. The CLI will then guide you through:

1. App Name: Enter a name for your app (must follow npm package naming conventions - lowercase, can contain hyphens). This won’t be the user-facing app name, but rather a unique app identifier, similar to a npm package name.
2. Template Selection: Choose from the available templates, organized by category:
   • Standalone Apps Templates: Basic, Viewer, or Editing templates
   • Modular Templates: Module and Modular Monorepo templates

Note

Your app will be created in a new folder, in the directory where apps init command was executed. The folder will use the same app name as was given to apps init command.