
## Customize Your Build

The workloads you may have known were removed in 4.0.0 in favor of [ES6 packages](/setup/frameworkPackages/npmSupport#es6). You no longer need to customize the build output, because you can rely on [tree shaking](https://webpack.js.org/guides/tree-shaking/) with our npm packages.



# Visual Studio Code

VSCode is one of several integrated development environments that can be used to develop Babylon.js projects. It has built-in Git integration and a plugin for displaying `.babylon` files.

You can install VSCode from its 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 Extensions view (default shortcut: Ctrl+Shift+X on Windows/Linux, Cmd+Shift+X on macOS):

1. [Shader languages support for VSCode](https://marketplace.visualstudio.com/items?itemName=slevesque.shader) for syntax highlighting and autocompletion in GLSL shaders
2. [Babylon.js file viewer](https://marketplace.visualstudio.com/items?itemName=julianchen.babylon-js-viewer) can be used to display the contents of a `.babylon` file directly in VSCode. It can be useful if you want to quickly check whether your artist did a good job with an object and its 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.webp)

## Debugging code

VSCode also has a `Run and Debug` tab in the left pane. Select the launch configuration you want to use, then press the `Start Debugging` button (F5).

With the test task running from the VSCode `Run and Debug` tab, choose the section you want to debug and launch the debugger.

The 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, proceduralTexturesLibrary, postprocessLibrary, etc.

_Hint_: If another Chrome session is already running with remote debugging on port 9222, the debugger will fail to attach because the port is already in use. You will need to close the other remote debugging session 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 set up and start a simple, local Node.js web server for your Babylon.js application.
- Is primarily focused on Windows.

## Nodejs & NPM

If you already have Node.js and NPM installed, skip to the **Sample** section.

Download the latest LTS Node.js installer from https://nodejs.org/en/download/

Run the installer and follow the Node.js setup wizard. The default settings are fine for our use.

NPM is included in this installation.

## Sample

Now that Node.js and NPM are installed, we're ready for the 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 contents 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**

- In File Explorer, navigate to C:\babylon.
- Double-click **Windows_NPM_INSTALL.BAT**
- Wait for the BAT window to finish running and close itself. This executes `npm install --save`.

A new `node_modules` folder 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 shut down the Node.js server again.
- In your browser, navigate to http://localhost/
- If the BAT file closes immediately, please check that the previous steps were completed correctly.
- To view errors, in a CMD or PowerShell window run `C:\babylon> node server.js`

**Other OSes**

- See the npmjs.org and nodejs.org documentation for instructions.
- Execute "npm install --save" on C:\babylon
- Execute "node server.js" on C:\babylon

_If anyone wishes to expand this section, feel free to open a PR._

## Public Folder

In the Public folder, you'll find a sample scene consisting of an _index.html_ file and a _babylonScene.js_ file.

The browser's access is restricted to this folder and its files and subfolders.

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.