1
00:00:01,640 --> 00:00:03,620
Now we've got partial bundler all set up.

2
00:00:03,620 --> 00:00:07,850
We're going to do a little bit of initialization for a new project and figure out how to make use of

3
00:00:07,850 --> 00:00:08,570
Passel.

4
00:00:08,810 --> 00:00:11,190
So to get started I'm going to flip back over to my terminal.

5
00:00:11,330 --> 00:00:16,310
You'll notice I'm still in that features directory so I gonna go up one folder back into a workspace

6
00:00:16,310 --> 00:00:17,270
directory of sorts.

7
00:00:17,680 --> 00:00:21,880
And then inside of here I'm going to generate a new project folder that I going to call maps.

8
00:00:21,910 --> 00:00:27,080
So that's gonna be the name of this application simply maps and then going to change into that folder

9
00:00:27,530 --> 00:00:31,180
and then start up my code editor inside their All right.

10
00:00:31,220 --> 00:00:35,480
So only tell you exactly how Passel works it might be kind of surprising.

11
00:00:35,500 --> 00:00:35,820
All right.

12
00:00:35,830 --> 00:00:41,500
So we're going to create a single file inside of our project directory to start the single file is going

13
00:00:41,500 --> 00:00:42,440
to be an index Dot.

14
00:00:42,460 --> 00:00:48,720
Each team l file inside this HMO file we are going to include a script tag for a file called index dot

15
00:00:48,730 --> 00:00:50,110
t yes.

16
00:00:50,170 --> 00:00:53,160
Notice the expense extension on there is not t us.

17
00:00:53,180 --> 00:00:57,460
Remember we can't have raw typescript code running inside the browser.

18
00:00:57,460 --> 00:00:59,710
So how does this actually work.

19
00:00:59,710 --> 00:01:03,760
Well we're going to start up that parcel tool and we're gonna feed the index dot each html file into

20
00:01:03,760 --> 00:01:04,650
it.

21
00:01:04,780 --> 00:01:09,160
Parcel is going to see that script tag with a source of index dot t yes.

22
00:01:09,280 --> 00:01:15,280
And as soon as it sees that dot t s extension partial is going to say Oh I see it is a typescript file

23
00:01:15,370 --> 00:01:21,550
I need to pass the code inside there compile it and turn it into javascript and then load that into

24
00:01:21,550 --> 00:01:26,550
the browser as opposed to the index dot t s file that we requested.

25
00:01:26,560 --> 00:01:29,080
It's like I said parcel is an awesome little tool.

26
00:01:29,140 --> 00:01:34,240
It has a lot of magic in it like this right here that makes setting up new types of projects really

27
00:01:34,300 --> 00:01:35,860
really easily.

28
00:01:35,860 --> 00:01:43,800
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

29
00:01:43,800 --> 00:01:48,700
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.

30
00:01:48,720 --> 00:01:57,520
tag I'll put a body inside there and then inside there I'll put in a script tag with a source of dot

31
00:01:57,520 --> 00:02:06,520
slash S C index dot t yes and I'll close off that script tag like so all right.

32
00:02:06,540 --> 00:02:11,050
So we are going to create an S R C directory inside of our root project folder that's going to hold

33
00:02:11,140 --> 00:02:17,830
all of our source code so inside of the maps directory I'm gonna make a new folder called s RC and then

34
00:02:17,890 --> 00:02:24,230
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

35
00:02:24,230 --> 00:02:31,280
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

36
00:02:31,280 --> 00:02:33,780
to save this file okay.

37
00:02:33,800 --> 00:02:38,510
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

38
00:02:38,510 --> 00:02:45,370
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

39
00:02:45,370 --> 00:02:51,530
to notice that it is a typescript file and so it's going to convert it into javascript for us automatically

40
00:02:52,370 --> 00:02:58,220
after it does that parcel is going to automatically update the script tag and change index dot t us

41
00:02:58,490 --> 00:03:04,350
essentially into index dot J as for us before we access this HDMI document inside of our browser.

42
00:03:04,610 --> 00:03:10,700
So let's try that out right now I'm gonna flip back over to my terminal inside of my maps directory

43
00:03:10,730 --> 00:03:16,370
I'll run partial index dot H team l now as soon as I run that you'll notice very briefly something right

44
00:03:16,370 --> 00:03:21,980
there that said installing typescript that means that partial saw that we had a script tag that include

45
00:03:21,980 --> 00:03:27,900
that dot t s file and installed a couple dependencies to work with typescript for us automatically now

46
00:03:27,910 --> 00:03:32,620
you'll notice I have a message right here that says my application is that local host 1 2 3 4 if you

47
00:03:32,620 --> 00:03:38,890
see any error message right now and you see anything that says like e adder or error address or something

48
00:03:38,890 --> 00:03:45,550
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

49
00:03:45,550 --> 00:03:52,050
anything running on Port 1 2 3 4 because if you do you will probably see an error message as a quick

50
00:03:52,050 --> 00:03:57,180
aside if you ever want to stop this running server you can just take control C and you can always start

51
00:03:57,180 --> 00:04:01,760
it back up very easily by running partial index dut HK mail again.

52
00:04:01,880 --> 00:04:06,040
All right so to test out this application I'm going to open up my browser and go to local host 1 2 3

53
00:04:06,060 --> 00:04:12,890
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

54
00:04:14,060 --> 00:04:15,900
I can see hi there right there.

55
00:04:15,910 --> 00:04:22,070
So that's the console log I'd put into my SRT file so it looks like everything is working as expected.

56
00:04:22,070 --> 00:04:28,280
Awesome one other quick thing you might find interesting if you go to the elements tab right here and

57
00:04:28,280 --> 00:04:33,140
then open up body you'll notice that our script tag that we had written inside that each team a file

58
00:04:33,350 --> 00:04:34,750
did get updated.

59
00:04:34,850 --> 00:04:41,530
So rather than referencing a dot test file parcel injected this new S.R. C tag right here with the new

60
00:04:41,530 --> 00:04:48,660
s RC property so that's the javascript file that parcel created for us out of our typescript code.

61
00:04:48,740 --> 00:04:49,030
All right.

62
00:04:49,030 --> 00:04:50,520
So now we've got everything working.

63
00:04:50,530 --> 00:04:54,130
Let's take a pause right here and we'll continue working on our application in the next video.