
## Customize Your Build

The Workloads that you might have known are gone in 4.0.0 in favor of [ES6 packages](/setup/frameworkPackages/npmSupport#es6). You do not need anymore to customize the output of the build as you can rely on [tree shaking](https://webpack.js.org/guides/tree-shaking/) on our npm packages externally.



# Visual Studio Code

VSCode is one of several integrated development environments that can be used to develop projects using Babylon.js. It has the advantage of Git integration built-in and a plugin to display .babylon files.

You can install VSCode from their site: [https://code.visualstudio.com/](https://code.visualstudio.com/)

## Useful plugins

Once installed, a few plugins will help you have the best experience. You can search for them in the extension tab (Ctrl+Shift+d):

1. [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) as well as the chrome browser
2. [Shader languages support for VSCode](https://marketplace.visualstudio.com/items?itemName=slevesque.shader) for syntax highlighting and autocompletion in glsl shader
3. [Babylon.js file viewer](https://marketplace.visualstudio.com/items?itemName=julianchen.babylon-js-viewer) can be used to display the content of a .babylon file directly in VSCode. It can be useful if you want to quickly check if your artist did a good job with an object and their names :)

## Keybindings setup

Finally, I would recommend adding a few shortcuts to your environment. Follow the [guide](https://code.visualstudio.com/docs/getstarted/keybindings#_custom-keybindings-for-refactorings):

1.  To configure keyboard shortcuts the way you want, go to the menu under File > Preferences > Keyboard Shortcuts. (Code > Preferences > Keyboard Shortcuts on Mac)
2.  Click ```Open Keyboard Shortcuts (JSON)``` on the right side and add:

```
// Place your key bindings in this file to overwrite the defaults
[
    { "key": "ctrl+shift+alt+s", "command": "workbench.action.files.saveFiles" },
    { "key": "ctrl+shift+alt+k", "command": "workbench.action.tasks.terminate" },
    { "key": "ctrl+shift+alt+t", "command": "workbench.action.tasks.test" },
    { "key": "ctrl+shift+alt+l", "command": "workbench.action.tasks.showLog" },
    { "key": "ctrl+shift+alt+r", "command": "workbench.action.tasks.runTask" }
]
```

This will make the main commands quicker to access. Do not hesitate to adapt the bindings to your preferences.

![keybindings](/img/how_to/howToStart/keybindings.png)

## Debugging code

Also, in VSCode there is a `Debug` tab on the menu. To use it with Babylon.js you need to install an extension, find out more from [Debugger for Chrome](https://code.visualstudio.com/blogs/2016/02/23/introducing-chrome-debugger-for-vs-code).

With the test task running from the VSCode debug tab, chose the section you want to debug and launch the debugger.
![debug](/img/how_to/howToStart/debug.png)

Debug session will debug all the Typescript and JavaScript in Chrome and stop on your breakpoints set up in files in VSCode. It debugs all the code from src, materialsLibrary, procceduralTexturesLibrary, postprocessLibrary, etc.

_Hint_: If another chrome session is already running on remote debug on port 9222 the debugger will fail to attach as the port is already open. You will have to close the other remote debug first.



This tutorial:

- Is for you, if you have no or limited experience with web development or servers in general.
- Will show you how to setup and start a simple, local, NodeJs web server for your BabylonJs application.
- Is primarily focused on Windows.

## Nodejs & NPM

If you already have NodeJs and NPM installed, skip to **Sample** section.

Download the latest (LTS) Nodejs installer from https://nodejs.org/en/download/

Run the installer and follow the NodeJs setup Wizard. The default settings are fine for our use.

NPM is included in this installation.

## Sample

Having installed NodeJs and NPM, we're now ready for our server code.

- Create a folder for your project

In this tutorial, we'll use **C:\babylon**

- Download the sample server [master.zip](https://github.com/aWeirdo/babylonJs_sample_server/archive/master.zip)
- Extract the .zip file content to C:\babylon

Your **C:\babylon** folder should now look something like this:

```shell
C:\babylon\public\
C:\babylon\public\index.html
C:\babylon\public\babylonScene.js

C:\babylon\package.json
C:\babylon\readme.md
C:\babylon\server.js
C:\babylon\Windows_NPM_INSTALL.BAT
C:\babylon\Windows_START.BAT

```

**On windows**

- Navigate your file explorer to C:\babylon
- Double-click **Windows_NPM_INSTALL.BAT**
- Wait for BAT window to finish running and close itself. This executes `npm install --save`

A new folder "node_modules" should be created.

- Double-click **Windows_START.BAT**. This executes `node server.js`
- A new BAT window should open:

```shell
C:\babylon>node server.js
Server is listening on port 80
```

- Your server should now be running. Note: Closing this window will shutdown the nodeJs server again.
- In your browser, navigate to http://localhost/
- If the BAT immidiately closes again, please re-check previous steps were done correctly.
- To view errors, in a CMD or PowerShell window run `C:\babylon> node server.js`

**Other OS**

- See NpmJs.org and NodeJs.org documentations for instructions.
- Execute "npm install --save" on C:\babylon
- Execute "node server.js" on C:\babylon

_If anyone wish to expand this section, feel free to PR_

## Public Folder

In the Public folder you'll find a sample scene consisting of a index.html and a babylonScene.js file.

The browser's access is restricted to this folder and it's files & sub-folders.

You're now ready to start your project.


Workloads (legacy)

Customize Your Build

Further reading

Framework Versions

Learn about the different versions of Babylon.js.

Babylon.js ES6 support with Tree Shaking

Learn about tree shaking and package management in Babylon.js.