
## Running the project

Since Babylon.JS Editor v4.0.0-rc.3, it is possible to play directly the scene that is being edited in the Editor. This means the scene, as it is in the Editor, can be played directly including all scripts that are attached in the scene. This is particularely useful to test the scene itself and see if the scripts/components are working as intended.

## Playing the scene
At the middle of the tools toolbar, there are 2 buttons:
- Play / Stop (on the left) that generates the scene and plays the scene in the Editor's preview panel.
- Restart (on the right) that simply reloads the scene to be played.

![PlayStopButtons](/img/extensions/Editor/RunningProject/play-stop-buttons.png)

Once the play button is clicked, the scene being edited in the preview panel disappears to let the test scene being visible. Once the scene to test is loader, you can play the scene and see if all scripts are working as intented.

![PlayScene](/img/extensions/Editor/RunningProject/playing_scene.gif)

## Debugging the scene
All templates in the Editor offer the way to debug TypeScript code directly in VSCode. Just type F5 and place break points or "debugger;" in your code.

**Note: type F5 before running the scene as the remote debugger will not (sometimes) be able to attach the process created on the fly to run the scene.**

Once VScode is attached to the Editor, let's run the scene and debug your code using your favorite shortcuts and debugging tools:

![DebugScene](/img/extensions/Editor/RunningProject/debugging.gif)


## Running the application/game

Once all dependencies have been installed and the game built, the game be ran using 2 methods:
* In an integrated browser: simply opens a new window with the application/game rendered in it
* In the default browser of the user: will start a local webserver and open the default browser of the user (FireFox for example).

For developers, running the game in the default browser of the user will allow to easily open the devtools (using F12) and debug the game.

By default, the Editor will open the integrated browser. To have options drawn in the Editor, simply `right-click` the `Play` button in the toolbar and select `Play in my browser`:

![PlayApplicationOrGame](/img/extensions/Editor/RunningWorkspace/run.gif)

# Using custom webserver
In case of a custom webserver (for example using the dev server of Webpack or a completely handled webserver with custom APIs etc.), we'll have to manually open the browser pointing to the desired Url.

In fact, when clicking on the button `Play`, the editor will launch a basic webserver (that serves only files) to run the project. Once the basic webserver is started, the preview loads the Url `http://localhost:port/index.html`. That means, in case of a fully customized webserver/environment, that the preview feature should not be used anymore as the project is set to run in a fully customized environment.



Descriptions of how to run/debug workspaces/projects in Babylon.js Editor.



## Renaming A Project

To rename a project, just go to the `File` menu in the toolbar, select `Rename Project...` and provide the new name of the project:

![RenameProjectToolbar](/img/extensions/Editor/RenamingProject/toolbar.png)

Once accepted, the following folders will be renamed:
- *`workspacePath`/projects/`oldname`* ->  *`workspacePath`/projects/`newname`* 
- *`workspacePath`/scenes/`oldname`* -> *`workspacePath`/scenes/`newname`*
- *`workspacePath`/src/scenes/`oldname`* -> *`workspacePath`/src/scenes/`newname`*

In case the folders already exists (in other words, if the project already exists) then the operation is aborted.

## Renaming imports in sources

Once a project has been renamed, the paths set in the code must be updated.

For example, a scene named `scene1` renamed to `scene2`, the following import must be updated:
```typescript
import { runScene } from "./scenes/scene1";
```

should be renamed to:
```typescript
import { runScene } from "./scenes/scene2";
```

Do the same for all other imports that are not valid anymore. Once done, webpack build will be valid
and the project will be up to work.

## Renaming paths in loaders in sources
As well as the TypeScript imports, paths to scenes being loaded in the code must have their paths updated.

For example:
```typescript
const rootUrl = "./scenes/scene1/";

SceneLoader.Append(rootUrl, "scene.babylon", this.scene, () => {
	...
});
```

should be renamed to:
```typescript
const rootUrl = "./scenes/scene2/";

SceneLoader.Append(rootUrl, "scene.babylon", this.scene, () => {
	...
});
```


Running workspaces and projects in Babylon.JS Editor

Coming next

Running/playing a workspace

Understanding how to play a workspace

Running/playing a project

Understanding how to play a single project in the Babylon.js Editor