Now that we've got parcel 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 parcel.
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'm going to 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'm going to call maps.
So that's going to be the name of this application, simply maps and then going to change into that
folder and then start up my code editor inside there.
All right.
So let me tell you exactly how parcel 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 indexed HTML file.
Inside this HTML file, we are going to include a script tag for a file called indexed CSS.
Notice the extension on there is dots.
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 partial tool, and we're going to feed the indexed HTML file into
it.
Castle is going to see that script tag with a source of indexed and is as soon as it sees that dots
extension parcel is going to say, Oh, I see it is a typescript file, I need to parse the code inside
there, compile it and turn it into JavaScript and then load that into the browser as opposed to the
indexed file that we requested.
So 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 TypeScript projects really,
really easily.
So let's get to it.
Back inside my editor, I'm going to create a new file called Index HTML.
And then inside of here, we're going to put down some very, very basic HTML.
I'm going to put in an HTML 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 Z index dot pts, and I'll
close off that script tag like so.
All right.
So we are going to create an CRC 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 going to make a new folder called CRC.
And then inside there we're going to create our indexed file.
So inside of SC, I'll make index dots.
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 going to feed in
this HTML file.
As soon as Parcel sees this CRC right here, it's going to find our indexed 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 indexed PTS essentially
into indexed JS for us before we access this HTML document inside of our browser.
So let's try that out.
Right now, I'm going to flip back over to my terminal inside of my maps directory.
I'll run parcel indexed HTML.
Now, as soon as I run that, you'll notice very briefly something right there that said installing
TypeScript, that means that parcel saw that we had a script tag that included that file and installed
a couple of 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 One, two,
three, four.
If you see any error message right now and you see anything that says like E adder or air address or
something like that, chances are port one, two, three, four on your machine is in use, so you'll
want to make sure you don't have anything running on port.
One, two, three, four.
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 hit control C and you
can always start it back up very easily by running parcel index HTML again.
All right, So to test out this application, I'm going to open up my browser and go to local host.
One, two, three, four.
So look close.
One, two, three, four.
Once here, I'm probably going to 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 had put into my SRC file.
So it looks like everything is working as expected.
Awesome.
One other quick thing you might find interesting.
If we 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 HTML file did get updated.
So rather than referencing a file.
Passel injected this New York tag right here, the new SRC property.
So that's the JavaScript file that Passel 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.