So we set up D I.D. which is important.
Now let's also set up a starting project which will use for all at this course in the different course
modules.
So basically a project setup with which we can start every course module to then write our code there.
Now as you will see for all this cause writing code doesn't require a complex set up in general but
here I want to project where we can write code compile it and then immediately see the output of that
code in the browser.
And for that I'll first of all add a new index H TO MAIL file and you can add this in any empty folder.
The two other files or folders you see here are just config files for GID in case you're using version
control.
And for my editor which sets the same level so that's all I have here.
But in that index H html file I will now initialize it with a base skeleton and for data in visual pseudocode
you can just type h him l choose that H HTML5 option.
If you're not getting this menu just press the control in space choose the H HTML5 option and hit enter
and you'll get this skeleton there we could enter understanding typescript here as a title but that
does not matter to much more important.
Instead here you add a script tag in your head section and add a source and point at app J.S. here and
add the deferred attribute.
This tries to import an app as file which of course right now doesn't exist and it will then of course
also execute it if it finds it.
This allows us to view our changes our code changes directly on the screen in the browser or if we're
just logging something to the console in the browser dev tools.
Next I will add an app dot key as file that's the file a typescript file where we will write some code
and there for example you could console log your code goes here or whatever you want.
You can console log whatever you want here and if you do that you can compiled this file with typescript
which we installed earlier for Dad you can open the terminal integrated into the editor here and simply
write TSC app dot t.
This compiles this types could file and generates the app J.S. file now which is to file we're importing
here.
And if you now open this index H.M. file you'll see whatever happens in here you kick off the logic
you wrote in here and even that's logic that manipulate something on the dom or like in this case it's
logic which simply gets locked to the console.
So here in this case I opened does H smell file in the browser.
You can simply double click on it outside of the idea.
So in the normal windows explorer or the Mac finder and then maybe open your developer tools if you're
just logging something to the console and you'll see your log here.
Now that's nice but whenever we change something here in our code we have to manually recompile.
Well that is what it is for now.
It will change later in of course but we also have to manually reload this page here and to speed this
up and make sure that you don't have to do this whenever you change something will actually also add
another tool here to this dummy setup which we'll use for this course.
So that this happens automatically.
Now to install such a tool let's run NPM in it here in this project folder.
The NPM command is a way lable if you installed node J.S. make sure that for Dad you visit notorious
thought ORIC and download and install the latest version you find here for the moment we're not going
to write any note J.S. code but no chance comes to gather with the NPM tool which you can use to install
third party dependencies or useful tools that speed up our development and for that reason we need it
here.
So with that installed you can run NPM in it.
In this project folder simply at enter and you can answer all these questions here with the defaults
by simply hitting enter all the time and once this completes it gives you a package stuck Jason File
which looks something like this and now you can run npm install to install dependency which is exclusive
to this project.
So to install a tool you could say which you can use in this project dash dash safe dash death to market
as a development only dependency.
So a tool that helps us during development and does not contain any code which will execute as part
of our main code and the tool name is light dash server.
If you hit enter here does installs this extra tool and once this finishes just go into your package
stop Jason File and in the scripts part add a comma and add a new script which you named start and then
as a value between double quotes enter a light dash server so that name of the package which was added
here if you now hit Enter you can run NPM start here to start this start script and light server is
a simple development server which always serves the index H to mail file next to the package not Jason
fault.
So this file and it serves your application on this you are L you see your local host three thousand
by default and you can then just visit dislocation simply enter local host colon three thousand in the
browser.
And now your code runs here.
And why is this better.
Well this will not automatically reload the page whenever another file in this directory changes.
So if I for example add exclamation mark here and I save this and I then compiled is again with TSC
app dot t T.S. and you go back to the browser you'll see the latest output immediately because it automatically
reloaded and that simply saves us the extra work of reloading manually.
Not important about this NPM start process.
Definitely keep it running as long as you are working on your project as long as you are writing code
which you want to see execute in the browser.
Once you're done you can always quit this process with control C but once you do so your project is
no longer getting served under local host three thousands.
So keep it up and running as long as you are writing code and making changes.
With that I'll change it back.
But this is totally up to you.
And this is the project setup.
I will use fraud.
This course you'll also find it attached of course in the finished form.
Just one important note.
If you download the attached starting Project or any average course snapshot any other code snapshot
you'll find anywhere in the course.
Then you will get a download that does not include does note modules folder.
This is a huge folder which in the end stores all third party packages and their dependencies.
And since it is so huge I typically delete it because you can easily recreate it by running npm install.
So if you download one of my attachments navigate into the extracted folder and in that folder run npm
install and this will install all dependencies and recreate does node modules folder and once you did
this you can run NPM start or do whatever you want to do in this project and was dead.
We got this project set up we'll use for the course.
Now let's not waste any more time and let's just get started.