Create a new Vite Project

[00:00] One of the first things I did when I started learning ThreeJS was to build my own boilerplate. So I could remove the set of friction and focus purely on experimenting and following new lessons. In this first module of the course, you will learn how to create your own modern 3GS boilerplate powered with Bit, completely typed, well structured, and designed to provide you a great developer experience. Let's open the terminal and use pnpm create-bit to start the wizard. Let's name our project something like modern3ds-starter And then you can select the framework of choice, but in this case for this course we're gonna use vanilla We're gonna select TypeScript and yeah, why not?

[00:57] We're gonna use roll down beat Then choose install and wait for the installation to finish Open the project in your IDE of choice. In this case, I'm using cursor and Here we have a pretty simple bit application that is using TypeScript for the models So we have an entry point which is the index.html that contains a div with an idea of app. Then in the main TS which is the entry for TypeScript we're replacing the content with this inner HTML while doing document query selection. So this is the default content that comes with the installation, so we're gonna remove everything that we don't need. We're gonna remove this, and for now, we're just going to say, hello egghead.

[01:49] We probably also want to remove this one and we can get rid of the counter TS since we're not gonna use it. We hit save, We open the terminal and then let's see if everything works. So let's use pnpm run dev to run the local server. When opening the browser, you should be seeing something like this. To confirm that the hot model replacement is working, we're going to add something like this to our string.

[02:19] And voila, we have our project set up.