# Build apps with TypeScript

> Build NOVA TypeScript apps locally and deploy them to your instance via containers.

This guide is for experienced developers who prefer working locally.
The instructions assume you’re comfortable setting up your environment, installing tools, and deploying software.

NOVA provides a platform to develop, deploy, and manage custom apps for controlling robots.
You'll build locally using the Wandelbots NOVA TypeScript SDK, push your app to a registry,
and deploy it to your NOVA instance using the NOVA CLI.

## What this guide covers

- Scaffolding a TypeScript app from the Next.js template (so you start with a minimal, working full-stack project)
- Implementing your UI and API routes with Typescript
- Deploying the app to a cell and verifying it at `/cell/<your-app-name>`

> **Info:** If you’re looking for the fastest and easiest path, [developing on a Wandelbots NOVA cloud instance](/developer/quickstart)
> remains the quickest way to start prototyping.
> This document focuses on the local workflow and takes you from a template to a running app on NOVA.

## Prerequisites

- You have a NOVA cloud instance running including a robot: create the instance in the [NOVA Cloud quickstart](/nova-cloud/quickstart), then add a robot with the [Wandelbots NOVA quickstart](/nova/latest/quickstart).
- You completed the [local development setup](/developer/local-development) and have the NOVA CLI installed.

## Create an app

Now that you have everything installed and configured, let's create an app.

### Step 1: Create project with TypeScript template

It scaffolds a Next.js project with ready-to-use dev, build, and lint scripts, and it works seamlessly with the [Wandelbots React components](https://github.com/wandelbotsgmbh/wandelbots-js-react-components).

```bash
nova app create my-typescript-app -g "nextjs_app"
```

Develop in your preferred editor (Visual Studio Code works especially well).

### Step 2: Install pnpm & dependencies

[pnpm](https://pnpm.io/) is the default package manager suggested by Next.js, and is used in this template to manage the installed Node.js version as well as the dependencies.

```bash
curl -fsSL https://get.pnpm.io/install.sh | sh -
pnpm install
```

When successful, you will see the available scripts in the `package.json` file, including `dev`, `build`, and `lint`.

### Step 3: Update .env.local file

Connect the template to your NOVA instance by editing the `.env.local` file with the required values:

```bash
NOVA_DEV_INSTANCE_URL=http://my.instance.wandelbots.io
NOVA_DEV_ACCESS_TOKEN=token
CELL_ID=cell
```

## Start app

Start the development server with:

```bash
pnpm run dev
```

You can then visit `http://localhost:3000` to test the app locally.

![TypeScript app](/assets/nova/local-ts-app.webp)

## Discover available components

If you prefer to jump into cold waters on your own, here's an overview on available components.

| Component | Description | Location | Language |
| - | - | - | - |
| nova-js | A JavaScript library providing convenient access to the Wandelbots NOVA API. | [Github](https://github.com/wandelbotsgmbh/nova-js) [npmjs](https://www.npmjs.com/package/@wandelbots/nova-js) | TypeScript |
| wandelbots-js-react-components | A collection of ready-made React UI components based on MaterialUI and React Three Fiber to use with Wandelbots NOVA. | [Github](https://github.com/wandelbotsgmbh/wandelbots-js-react-components) [npmjs](https://www.npmjs.com/package/@wandelbots/wandelbots-js-react-components) | TypeScript |

## Deploy your programs and apps

Once your app works locally, deploy it to your NOVA instance to make it permanently available.
The [deployment guide](/developer/custom-apps/deploy-app) walks you through setting up Docker, connecting a container registry, and pushing the app with the NOVA CLI.

## Further steps

To see the functionalities of the NOVA system available to TypeScript, refer to the [nova-js documentation](https://github.com/wandelbotsgmbh/nova-js).

Explore the [wandelbots-js-react-components storybook](https://wandelbotsgmbh.github.io/wandelbots-js-react-components) for examples of how to visualize robot motion and state.

To create FastAPI servers that expose robot programs as REST APIs for other frontend frameworks to consume, refer to the [NOVAx framework](https://github.com/wandelbotsgmbh/wandelbots-nova?tab=readme-ov-file#novax).