---
title: "Getting Started with the NavVis IVION Frontend API"
slug: "getting-started-1"
description: "Learn how to confirm your NavVis IVION version, set up your development environment, and troubleshoot common issues with our comprehensive guide."
tags: ["API Integration", "Frontend API"]
updated: 2025-04-16T07:31:38Z
published: 2025-04-16T07:31:38Z
canonical: "knowledge.navvis.com/getting-started-1"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://knowledge.navvis.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Getting Started

## Confirming your NavVis IVION Version

### Procedure

1. On the NavVis IVION Instance dashboard, click the hamburger icon in the top left corner of your screen.
2. Click **About**in the bottom left corner of your screen.

The box that opens will show which version of NavVis IVION you are currently running.

## Setting Up

Follow these steps to set up your development environment.

### Procedure

> [!NOTE]
> **Note:**We recommend using a modular package management system and code bundler. We are using [Node Package Manager](https://nodejs.org/) (NPM) and [Webpack](https://webpack.js.org/) as examples here.

1. Optionally, install a package manager and code bundler such as [NPM](https://nodejs.org/en/download/) and [Webpack](https://webpack.js.org/guides/installation/).
2. If you have installed NPM and Webpack, verify the installation by running:

```plaintext
$ npm -v

$ webpack -v
```

If NPM and Webpack are installed correctly, running these commands should return the version.
3. Optionally, [download the scaffold project](https://ivion-api.docs.navvis.com/latest/samples/_base.zip). The scaffold project package contains a simple TypeScript-based NodeJS application to help you get started.
4. Download the NavVis IVION Frontend API [NPM package](https://ivion-api.docs.navvis.com/latest/npm/navvis-ivion.tgz).
5. Place a copy of the NPM package into your project folder:

```plaintext
├── navvis-ivion-VERSION.tgz <---
├── package.json
├── src
│   ├── image
│   │   └── favicon.ico
│   ├── index.html
│   ├── index.scss
│   └── index.ts
├── tsconfig.json
└── webpack.config.js
```
6. If you are not using the scaffold project, add the NPM package to the project dependency by running:

```plaintext
  },
  "dependencies": {
    "@navvis/ivion": "file:navvis-ivion-VERSION.tgz"
  }
}
```

> [!NOTE]
> **Note:**Replace `VERSION` with the version number of the NPM package
7. Install dependencies by running:

```plaintext
$ npm install
```

## Checking the Code

### Procedure

1. Open `./src/index.ts `in your code editor. You should see:

```plaintext
// index.ts
import "./index.scss";
import {getApi, ApiInterface} from "@navvis/ivion";

class TestApp
{
  public ivApi: ApiInterface;

  constructor()
  {
    getApi("https://iviondemo.iv.navvis.com/")
      .then((iv: ApiInterface) => {
        this.ivApi = iv;
        // Code added here will execute after NavVis IVION is completely loaded.
      })
  }
}

(<any>window).TestApp = new TestApp();
```

## Initializing NavVis IVION

To initialize NavVis IVION, run:

```plaintext
getApi("https://iviondemo.iv.navvis.com/").then((iv: ApiInterface) => { /* run after IV loads. */ });
```

`getApi(instanceUrl [, configuration])` instantiates NavVis IVION and returns a [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise), which is used to run code after NavVis IVION is completely loaded.

The first argument of `getApi()` is the URL of your NavVis IVION instance.

The second, optional argument allows you to [configure](https://ivion-api.docs.navvis.com/latest/reference/interfaces/configurationinterface.html) the behavior and appearance of NavVis IVION on startup. For example, if you want NavVis IVION to be in German, set the option to:

```plaintext
getApi("https://iviondemo.iv.navvis.com/", { "lang=de"}).then((iv: ApiInterface) => { /* run after IV loads. */ });
```

## Embedding NavVis IVION

### Procedure

1. Open `./src/index.html` in your code editor. You should see:

```plaintext
<!DOCTYPE html>
<html>
<head>
  <title>IV API Testing App</title>
</head>
<body>
  <ivion></ivion>
</body>
</html>
```

The `&lt;ivion&gt;` tag is used by NavVis IVION to bootstrap and dynamically inject DOM elements and scripts into your application. This tag can be placed anywhere within your DOM structure.

## Running the Application

### Procedure

If you are using the scaffold project, run:

```plaintext
$ npm run serve
```

This will compile your code, start your default browser, and load the application.

## Fetching Failed

If you receive an error similar to the following, your NavVis IVION instance is not reachable.

![](https://cdn.document360.io/bf174766-fa1a-4fe1-a4d7-b1db1e7cb996/Images/Documentation/fetching-failed-image-8pagyi8f.png)

1. Verify that:
  - The instance URL is correct.
  - You have network access to the instance.

## CORS Disabled

If you receive the following error, you have to revise your CORS security settings.

![](https://cdn.document360.io/bf174766-fa1a-4fe1-a4d7-b1db1e7cb996/Images/Documentation/cors-disabled-image-dzhwdq45.png)

1. Go to **Instance Settings** > **Instance Configuration**.
2. Revise your CORS security settings.

---

### FAQ

#### How can I confirm the version of NavVis IVION I am using?

To confirm your NavVis IVION version, click the hamburger icon on the dashboard, then select 'About' in the bottom left corner.

#### What package management system is recommended for setting up the development environment?

It is recommended to use a modular package management system like Node Package Manager (NPM) along with a code bundler like Webpack.

#### What should I do if I encounter a fetching error?

If you receive a fetching error, verify that the instance URL is correct and that you have network access to the instance.

#### Is it necessary to install NPM and Webpack?

While it is optional, installing NPM and Webpack is recommended for managing packages and bundling your code.

#### How do I initialize NavVis IVION in my application?

To initialize NavVis IVION, use the getApi function with the URL of your NavVis IVION instance.

#### Can I customize the language settings for NavVis IVION?

Yes, you can customize the language settings by passing an optional configuration argument to the getApi function.

#### What should I do if I receive a CORS error?

If you receive a CORS error, go to Instance Settings and revise your CORS security settings.

#### How do I run the application if I am using the scaffold project?

If you are using the scaffold project, run the command '$ npm run serve' to compile your code and start the application.

A NavVis IVION instance is a copy of the NavVis IVION software running on a hosting server. An instance has a database which contains the associated datasets, users, and more. That data is accessible via the instance URL.

Application Programming Interface

Cross-origin resource sharing