Babylon.js TypeScript Project Setup for the Impatient

Photo by Jusdevoyage on Unsplash

Quick Start

It requires some proper setup to start a babylon.js project in TypeScript. The easy way is to clone a template from GitHub. I made one here:

icezee/babylonjs-ts-template

After unzip and name it as you like, open the folder with VS Code. Run the following under Terminal.

npm install
npm run build
npm run watch

You can right-click on index.html to Open with Live Server, and start coding and testing. TypeScript will rebuild automatically when you save the file.

This is really what you need to start a TypeScript project in Babylon JS. I highly recommend TypeScript, as you can have a much better experience in comparison with JavaScript.

If you are curious about how exact a TypeScript project is set up, you can continue reading the rest of the article.

Behind the Scene

Project Setup

You should have npm set up already. If not, go to the official site to install it.

Create a folder for the project. Open the folder with Visual Studio Code.

In Code, [Terminal] -> [New Terminal]

npm init
npm install --save-dev typescript webpack ts-loader webpack-cli
npm install --save babylonjs@preview babylonjs-loaders@preview babylonjs-gui@preview

Create a file called webpack.config.js

Create tsconfig.json