Now we've got partial bundler all set up.
We're going to do a little bit of initialization for a new project and figure out how to make use of
Passel.
So to get started I'm going to flip back over to my terminal.
You'll notice I'm still in that features directory so I gonna go up one folder back into a workspace
directory of sorts.
And then inside of here I'm going to generate a new project folder that I going to call maps.
So that's gonna be the name of this application simply maps and then going to change into that folder
and then start up my code editor inside their All right.
So only tell you exactly how Passel works it might be kind of surprising.
All right.
So we're going to create a single file inside of our project directory to start the single file is going
to be an index Dot.
Each team l file inside this HMO file we are going to include a script tag for a file called index dot
t yes.
Notice the expense extension on there is not t us.
Remember we can't have raw typescript code running inside the browser.
So how does this actually work.
Well we're going to start up that parcel tool and we're gonna feed the index dot each html file into
it.
Parcel is going to see that script tag with a source of index dot t yes.
And as soon as it sees that dot t s extension partial is going to say Oh I see it is a typescript file
I need to pass the code inside there compile it and turn it into javascript and then load that into
the browser as opposed to the index dot t s file that we requested.
It's like I said parcel is an awesome little tool.
It has a lot of magic in it like this right here that makes setting up new types of projects really
really easily.
So let's get to it I can send my editor I'm going to create a new file called index dot H team L and
then inside of here we're going to put down some very very basic h t mail I'm gonna put in an H G.M.
tag I'll put a body inside there and then inside there I'll put in a script tag with a source of dot
slash S C index dot t yes and I'll close off that script tag like so all right.
So we are going to create an S R C directory inside of our root project folder that's going to hold
all of our source code so inside of the maps directory I'm gonna make a new folder called s RC and then
inside there we're going to create our index dot t s file so inside of s our c I'll make index dot t
s and then to get started inside of here I'll do a quick console log of hi there like so now I'm going
to save this file okay.
So like I said we're now going to take parcel at our command line and we're gonna feed in this h t mail
file as soon as parcel sees this as our C right here it's gonna find our index dot t s file it's going
to notice that it is a typescript file and so it's going to convert it into javascript for us automatically
after it does that parcel is going to automatically update the script tag and change index dot t us
essentially into index dot J as for us before we access this HDMI document inside of our browser.
So let's try that out right now I'm gonna flip back over to my terminal inside of my maps directory
I'll run partial index dot H team l now as soon as I run that you'll notice very briefly something right
there that said installing typescript that means that partial saw that we had a script tag that include
that dot t s file and installed a couple dependencies to work with typescript for us automatically now
you'll notice I have a message right here that says my application is that local host 1 2 3 4 if you
see any error message right now and you see anything that says like e adder or error address or something
like that chances are port 1 2 3 4 on your machine is in use so you'll want to make sure you don't have
anything running on Port 1 2 3 4 because if you do you will probably see an error message as a quick
aside if you ever want to stop this running server you can just take control C and you can always start
it back up very easily by running partial index dut HK mail again.
All right so to test out this application I'm going to open up my browser and go to local host 1 2 3
4 so look closed one two three four once here I'm probably in see a blank page but if I open up my console
I can see hi there right there.
So that's the console log I'd put into my SRT file so it looks like everything is working as expected.
Awesome one other quick thing you might find interesting if you go to the elements tab right here and
then open up body you'll notice that our script tag that we had written inside that each team a file
did get updated.
So rather than referencing a dot test file parcel injected this new S.R. C tag right here with the new
s RC property so that's the javascript file that parcel created for us out of our typescript code.
All right.
So now we've got everything working.
Let's take a pause right here and we'll continue working on our application in the next video.