# Setup
This tutorial will walk you through setting up a basic development project for luma.gl applications using [Vite](https://vitejs.dev/) tooling. Later tutorials will build on this one, so we recommend going through it first.
**Note:** It is assumed for these tutorials that you have some basic knowledge of GPU APIs and JavaScript programming.
## A Minimal Application
Create a new folder on your file system to store your new project.
Then let's create a file `app.ts` in the project root folder and add the following to it:
```typescript
import type {AnimationProps} from '@luma.gl/engine';
import {AnimationLoop} from '@luma.gl/engine';
const loop = new AnimationLoop({
override onInitialize({device}: AnimationProps) {
// Setup logic goes here
},
override onFinalize({device}: AnimationProps) {
// Teardown logic goes here
},
override onRender({device}: AnimationProps) {
// Drawing logic goes here
}
});
loop.start();
```
This will be the basic structure of most luma.gl applications.
To make sure everything works, let's add a draw command:
```typescript
import {AnimationLoop} from '@luma.gl/engine';
import {clear} from '@luma.gl/webgl';
const loop = new AnimationLoop({
override onRender({device}) {
// Drawing logic goes here
clear(device, {color: [0, 0, 0, 1]});
}
});
loop.start();
```
Since this is a web application, you will also want to create a minimal `index.html` web page to start the app:
```html
```
## Build Tooling
We will need the following files in the project folder:
```
- package.json
- vite.config.ts
- app.ts
- index.html
```
From the command line, first run
```bash
mkdir luma-demo
cd luma-demo
npm init -y
```
to set up our project directory and initialize npm.
Next run
```bash
npm i @luma.gl/engine @luma.gl/webgl
npm i -D vite typescript
```
to install our dependencies.
Open the file `package.json` (created when we initialized npm), and add the following to the `scripts` block:
```json
{
"scripts": {
"start": "vite",
"serve": "vite preview"
},
"dependencies": {
"@luma.gl/engine": "^9.0.0",
"@luma.gl/webgl": "^9.0.0",
},
"devDependencies": {
"typescript": "^5.1.6",
"vite": "^4.4.9"
}
}
```
The full contents of the `package.json` should be the following (dependency version numbers might differ):
```json
{
"name": "luma-demo",
"version": "1.0.0",
"description": "",
"keywords": [],
"author": "",
"license": "ISC",
"main": "index.js",
"scripts": {
"start": "vite",
"serve": "vite preview"
},
"dependencies": {
"@luma.gl/engine": "^9.0.0",
"@luma.gl/webgl": "^9.0.0",
},
"devDependencies": {
"typescript": "^5.1.6",
"vite": "^4.4.9"
}
}
}
```
Create a file [`vite.config.js`](https://vitejs.dev/config/) in the project root and add the following to it:
```typescript
import { defineConfig } from 'vite'
export default defineConfig({
server: {open: true}
})
```
and run
```bash
npm start
```
from the command line. If all went well, a tab should open in your default browser,
and you should see a black rectangle at the top left of your screen.