
## Adding Project To Workspace

By default, a newly created workspace contains one project. Per workspace, it is possible to manage multiple
projects in order to, for example, split levels of a game.

A newly created project is always empty and ready to receive new assets etc.

## Creating A New Project
To create a new project in the workspace, just go to the `File` menu in the toolbar and select `Add New Project...`.

![CreateNewProjectToolbar](/img/extensions/Editor/CreatingProject/create-new-project.png)

Once clicked, a popin appears to ask for the name of the project. Once the button `Finish` is clicked,
the new project is being created on the file system. Then, the Editor will ask to load continue working
on the current project or load the new one.




## 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, () => {
	...
});
```



## Creating a workspace.

## Creating an empty workspace
Using the Editor, the first step consists on creating a new workspace. The workspace will allow to manage workspace-based settings and multiple projects.
It is important to understand that the Editor can't work without a workspace as it'll allow to link scene with code, export final scenes at the right place etc.

Once the Editor started, a welcome page appears and allows to:
* Open an existing workspace
* Open a recent project (contains the last 3 opened workspace)
* Create a new workspace.

Let's create a new Empty workspace. This will ask for:
* A port for local webserver. Any port can be chosen and the game will be served in `http://localhost:PORT/index.html`
* Watch project using Webpack: the projects made using the Editor use the latest ES6 modules of Babylon.JS. The workspace comes with a default configuration using Webpack to build the final dist files. This configuration can be customized. Enabling this option will make the Editor to automatically watch the project's source files for us. This is especially useful when we don't need to open any code editor or terminal and just use the Editor.

Finally, let's select and empty folder where to create the workspace and the Editor will load the newly created workspace:

![CreatingEmptyWorkspace](/img/extensions/Editor/CreatingWorkspace/create-workspace.gif)

## Understanding the first launch of a workspace
By default, a newly created workspace contains only basic files (assets, source files, etc.). But, to be able to build the project and compile the source files, the dependencies must be installed using npm.

At the first launch of a workspace, the editor will install the dependencies (TypeScript, WebPack, Babylon.JS, etc.) and then build the project (using WebPack). This can take a while according to the machine where the Editor is running.

## Understanding the workspace architecture

![CreatingEmptyWorkspace](/img/extensions/Editor/CreatingWorkspace/architecture.png)

The architecture of a workspace follows basics of Web projects:
* `package.json` describes the workspace and enumerates its dependencies
* `webpack.config.js` describes the configuration of the builder (here using WebPack)
* `tsconfig.json` describes the TypeScript configurations
* `src` folder contains all TypeScript files. In other words, this folder contains all the application's sources
* `projects` folder contains the list of all available projects in the workspace
* `scenes` folder contains all the final scenes (with their files) exported by the Editor. In other words, these exported scenes will be the ones loaded when running the application/game made using the Editor.

## Understanding package.json
The `package.json` file is the main entry point of the project. It contains the list of all dependencies and a list of predefined scripts for the project.

Of course, all these dependencies and scripts can be modified/customized/removed to satisfy the project's requirement(s). For example, having a multiplayer game, the package `socket.io` (this is just an example) can be added to the dependences and the `"webserver`" script can be modified to run a custom webserver instead of using simple `http-server` command.

**Only** the `"build"` script is mandatory and must be available in the `package.json` file. Also, it must keep its job which is to build the project event if the project is fully customized.

## Understanding webpack.config.js
As well as the `pacakge.json` file, the Webpack configuration file can be customized to include whatever needed by the project. By default, it just packs the project into one single file (`"bundle.js"`) ready to be imported/called by the `index.html` file.

It is free, accoding to the user's preferences, to use Webpack plugins (including custom plugins) like the dev server (more informations here: https://webpack.js.org/configuration/dev-server/).

In fact, the `webpack.config.js` file must support both "build" and "watch" modes as the Editor allows to automatically build/watch the project instead of typing the commands by ourself. Of course, build and watch commands can be handled by ourself if needed using custom commands. For example:

```bash
npm run watch
```
Or
```bash
npm run build
```


Creating and understanding projects

Adding Project To Workspace

Creating A New Project