Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions docs/developer/typescript/01_gettingStarted/02_hello/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ This is a brief overview. Skim through this page without focusing on details—t
At this stage, our project contains the following code:

:::codeblocktabs
ir-tutorial-hello/src/Hello.ts
ir-tutorial-hello/src/Hello0.ts

```typescript
import { ECS } from '@ir-engine/packages/ecs'
Expand Down Expand Up @@ -45,7 +45,12 @@ From a technical perspective, this code:
- Uses the **Entity-Component-System (ECS) pattern**.
- Creates an **entity**.
- Adds **components** to the entity.
- Integrates the code into the engine via the `xrengine.config.ts` file.

This code is integrated into the engine via the <a href="https://github.com/ir-engine/ir-tutorial-hello/blob/dev/xrengine.config.ts" target="_blank">`xrengine.config.ts`</a> file, which contains the following line of code:

```typescript
worldInjection: () => import('./src/Hello') // Connects Hello.ts to the engine
```

## What’s next?

Expand Down
50 changes: 38 additions & 12 deletions docs/developer/typescript/01_gettingStarted/index.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,18 @@
# TypeScript quickstart

This guide walks you through the basics of iR Engine and how to install and run it for the first time.
Welcome to the TypeScript quickstart. This guide prepares you for your first experience with the engine as a TypeScript developer. By the end of this guide, you will have:&#x20;

1. Installed the iR Engine in your local environment
2. Accessed the default projects to start developing
3. Get your first hands-on experience with the introduction of a tutorial project

## Installation

Before you begin, note that iR Engine is a web application. The following steps will help you install and run a local version, which may differ from how you use the engine in production.
The iR Engine is a web application; the following steps will help you install and run a local version. Note that some steps of this tutorial may differ from how you use the engine in production.

:::hint{type="info"}
ℹ️ **Info**

These instructions are for Ubuntu Linux. For Windows, macOS, or other Linux distributions, refer to the [installation manual]().
:::

Expand All @@ -20,25 +26,42 @@ To install and run a local version of iR Engine on Ubuntu, follow these steps:
wget https://raw.githubusercontent.com/ir-engine/ir-engine/dev/scripts/ubuntu-install.sh && bash -i ./ubuntu-install.sh
npm run reinit && npm run dev
```
3. Once the installation is complete, open [https://localhost:3000](https://localhost:3000) in your web browser to access iR Engine.
3. Once the installation is complete, open [https://localhost:3000](https://localhost:3000) in your web browser to access the engine.

## Introduction to Projects

## Projects
Projects are folders that contain all your custom code, assets, and scenes. Working with projects is the way you extend the engine's functionalities.&#x20;

iR Engine includes default projects and scenes that are pre-installed. You can explore them through the Studio.
These projects are hosted in the following directory:&#x20;

### Default projects
```shell
packages/projects/projects/
```

To access the default project and test its functionality:
### Access default projects

iR Engine includes default projects and pre-installed scenes, which you can explore with Studio, the engine's editor and asset management interface.

**To access the default project:**

1. Open the Studio by navigating to [https://localhost:3000/studio](https://localhost:3000/studio).
2. Click on the default project card.
3. Select a scene to open it.
4. Click the **Play** button to enter the scene with an avatar.
5. Move around using the **WASD** keys or by clicking on the ground.

### Install and run the tutorial project
**To test the project's functionality:**

1. Click the **Play** button to enter the scene with an avatar.
2. Move around using the **WASD** keys or by clicking on the ground.

To follow the introductory tutorial, you need to install the **Hello World** project. This project provides a step-by-step introduction to iR Engine’s features.
Your project is now ready for editing.

## Next steps

You can now start working with the engine and extend its functionality by following the ECS pattern. We suggest you run through the [Hello World tutorial](./02_hello/index.md)&#x20;

## Install and run the tutorial project

To learn the basics of the engine, you can start by cloning the introductory tutorial project, which we cover in the [Hello World in iR Engine](./02_hello/index.md) tutorial. This project provides a step-by-step introduction to iR Engine’s features.

:::hint{type="danger"}
This tutorial project should only be installed locally. Do not install it in a remote deployment.
Expand All @@ -52,7 +75,7 @@ This tutorial project should only be installed locally. Do not install it in a r
```
3. Open [https://localhost:3000/studio](https://localhost:3000/studio), and you should see the **ir-tutorial-hello** project listed.

## Verify the installation
### Verify the installation

To confirm that the Hello World project is running correctly, follow these steps:

Expand All @@ -64,3 +87,6 @@ To confirm that the Hello World project is running correctly, follow these steps
You can also enter the scene and move around with an avatar by pressing the **Play** button in the editor.
:::

## Next steps

With your tutorial project running, you can go through the [Hello World in iR Engine](./02_hello/index.md) tutorial to learn how the engine works and the basics of the ECS pattern. You will also create your first component and more.