Default files

Once a project template has been selected, WebStorm will create a default project directory tree, and download the required files in order for us to start using this template. For a Bootstrap project, note that Webstorm has conveniently created a css and js directory, and downloaded and included the relevant CSS and JavaScript files automatically. Note that the project template has not created an index.html file for us, nor has it created any TypeScript files. So let's create an index.html file.

Simply click on File | New and select HTML file, enter index as a name, and click OK.

Next, let's create a TypeScript file in a similar manner. Select File | New, and then TypeScript file. We will call this file app (or app.ts), in order to mirror the Visual Studio project that we created earlier. As we click inside the new app.ts file, WebStorm will pop up a message at the top of the file, with a suggestion reading Compile TypeScript to JavaScript?, with three options – OK, No, and Configure, as shown in the following screenshot:

Clicking on Configure will bring up the Settings panel for TypeScript. There are a number of options on this panel, but, for the time being, we can simply accept the defaults, and click Ok.