1
00:00:00,210 --> 00:00:01,470
- In this video, I'll be showing you

2
00:00:01,470 --> 00:00:04,140
how to use Vite to initialize
a TypeScript project,

3
00:00:04,140 --> 00:00:05,940
which is a bundler that
makes it a lot easier

4
00:00:05,940 --> 00:00:07,440
to handle some of the most common things

5
00:00:07,440 --> 00:00:09,240
you're going to do in TypeScript.

6
00:00:09,240 --> 00:00:11,220
Now, Vite is not the
only bundler out there.

7
00:00:11,220 --> 00:00:13,050
It just happens to be the most popular one

8
00:00:13,050 --> 00:00:14,850
at the time that I'm recording this video.

9
00:00:14,850 --> 00:00:17,460
So if in the future a different
bundle is more popular,

10
00:00:17,460 --> 00:00:18,990
just make sure you use that one instead,

11
00:00:18,990 --> 00:00:20,370
or you can follow along with Vite.

12
00:00:20,370 --> 00:00:22,800
They all pretty much
work exactly the same.

13
00:00:22,800 --> 00:00:24,240
Now for Vite, what we
need to do is we need

14
00:00:24,240 --> 00:00:28,230
to run npm create Vite at latest.

15
00:00:28,230 --> 00:00:30,780
Make sure you just put a
period or the actual file name

16
00:00:30,780 --> 00:00:31,800
you want to install this in.

17
00:00:31,800 --> 00:00:33,780
In my case, I want to install
in the current folder,

18
00:00:33,780 --> 00:00:35,330
so I'm gonna be using a period here.

19
00:00:35,330 --> 00:00:37,500
If I click enter, it's
going to ask me what type

20
00:00:37,500 --> 00:00:38,490
of project I want to create.

21
00:00:38,490 --> 00:00:39,690
Let me just expand this a little bit.

22
00:00:39,690 --> 00:00:41,910
You can see I have a vanilla
project, which is just gonna be

23
00:00:41,910 --> 00:00:43,980
like a normal JavaScript
TypeScript project.

24
00:00:43,980 --> 00:00:45,960
And then I have all these
different frameworks.

25
00:00:45,960 --> 00:00:47,910
In our case, we're not gonna
be messing with any frameworks,

26
00:00:47,910 --> 00:00:48,870
so we'll choose vanilla.

27
00:00:48,870 --> 00:00:51,420
And as you can see, we can
choose TypeScript or JavaScript.

28
00:00:51,420 --> 00:00:53,070
Obviously, we'll be using TypeScript.

29
00:00:53,070 --> 00:00:54,300
So you can see that generates a bunch

30
00:00:54,300 --> 00:00:55,560
of different files for me.

31
00:00:55,560 --> 00:00:57,780
Namely, you can see that I
have this TypeScript config,

32
00:00:57,780 --> 00:00:59,790
which a bunch of different
settings inside of it

33
00:00:59,790 --> 00:01:01,410
already configured for me, which is great.

34
00:01:01,410 --> 00:01:02,820
It has a lot of the most common things

35
00:01:02,820 --> 00:01:04,110
you'll want to configure.

36
00:01:04,110 --> 00:01:05,190
And it also has inside of here

37
00:01:05,190 --> 00:01:06,270
some different TypeScript files

38
00:01:06,270 --> 00:01:08,190
that are just like placeholder code.

39
00:01:08,190 --> 00:01:10,470
What I can do is I can run npm I.

40
00:01:10,470 --> 00:01:12,240
That's going to install
all of my dependencies,

41
00:01:12,240 --> 00:01:13,530
and then I can actually run this

42
00:01:13,530 --> 00:01:17,040
as a dev server by typing npm run dev.

43
00:01:17,040 --> 00:01:18,540
That's just going to start up my server,

44
00:01:18,540 --> 00:01:20,700
and if I open this up,
I'll just drag this over,

45
00:01:20,700 --> 00:01:21,570
zoom it out a little bit.

46
00:01:21,570 --> 00:01:22,530
As you can see here,

47
00:01:22,530 --> 00:01:23,850
I just have some really simple code

48
00:01:23,850 --> 00:01:25,680
running in Vite with TypeScript.

49
00:01:25,680 --> 00:01:27,270
And you'll notice the
really nice thing about this

50
00:01:27,270 --> 00:01:30,150
is all of the compiling of my
TypeScript code to JavaScript

51
00:01:30,150 --> 00:01:32,460
and all the handling of that
is all done behind the scenes.

52
00:01:32,460 --> 00:01:33,780
As you can see in my source here,

53
00:01:33,780 --> 00:01:35,070
I just have some TypeScript code,

54
00:01:35,070 --> 00:01:37,110
and everything else is handled
behind the scenes for me

55
00:01:37,110 --> 00:01:38,970
so I don't have to worry about it at all.

56
00:01:38,970 --> 00:01:41,160
As you can see, all this
different code is inside of here,

57
00:01:41,160 --> 00:01:42,780
and it's all using TypeScript.

58
00:01:42,780 --> 00:01:44,190
Now, if you want to be
able to do something

59
00:01:44,190 --> 00:01:46,680
with this code by removing
all the boilerplate stuff,

60
00:01:46,680 --> 00:01:48,240
what you can do is inside
this public folder,

61
00:01:48,240 --> 00:01:50,760
we don't need this Vite
SVG, so we can remove that.

62
00:01:50,760 --> 00:01:52,170
We can remove this counter file.

63
00:01:52,170 --> 00:01:53,130
Inside the main here,

64
00:01:53,130 --> 00:01:54,450
we can just essentially
get rid of everything.

65
00:01:54,450 --> 00:01:56,100
We don't need anything inside of here.

66
00:01:56,100 --> 00:01:57,390
We can get rid of all of our styles,

67
00:01:57,390 --> 00:01:58,500
this TypeScript SVG,

68
00:01:58,500 --> 00:02:00,687
but we do need to keep this Vite env file,

69
00:02:00,687 --> 00:02:03,120
and just make sure that you
have a specific type setup

70
00:02:03,120 --> 00:02:05,160
for stuff related specifically to Vite

71
00:02:05,160 --> 00:02:07,380
that you most likely
won't really need to use.

72
00:02:07,380 --> 00:02:09,420
Then inside of here, we
got rid of that Vite SVG,

73
00:02:09,420 --> 00:02:10,890
so we can remove that there,

74
00:02:10,890 --> 00:02:12,960
and that's all we need to remove
to actually have this work.

75
00:02:12,960 --> 00:02:13,793
And if I just come in here

76
00:02:13,793 --> 00:02:17,640
and I just say that I want
a console dot log, hi,

77
00:02:17,640 --> 00:02:18,600
and I give that a quick save,

78
00:02:18,600 --> 00:02:20,430
and I open up this page again,

79
00:02:20,430 --> 00:02:21,990
and I just inspect the console.

80
00:02:21,990 --> 00:02:23,340
So let me just open up the console.

81
00:02:23,340 --> 00:02:24,960
You can see that at the very top,

82
00:02:24,960 --> 00:02:27,270
it has logged out the text, hi, for me.

83
00:02:27,270 --> 00:02:28,590
Now, from here when you're using Vite,

84
00:02:28,590 --> 00:02:30,660
you don't really have to
worry about anything at all.

85
00:02:30,660 --> 00:02:31,770
Inside the packaged JSON,

86
00:02:31,770 --> 00:02:33,480
you'll notice we have
a few different things.

87
00:02:33,480 --> 00:02:34,950
For example, we have this build command,

88
00:02:34,950 --> 00:02:37,470
and that essentially will compile
all of our TypeScript code

89
00:02:37,470 --> 00:02:38,730
and build it up for us.

90
00:02:38,730 --> 00:02:41,640
So if we run that npm run build command,

91
00:02:41,640 --> 00:02:42,660
give it a quick second,

92
00:02:42,660 --> 00:02:43,770
you'll notice it's going to pop up

93
00:02:43,770 --> 00:02:45,900
a new distribution folder
here, and inside of here,

94
00:02:45,900 --> 00:02:47,760
it's just going to be
all of my different code.

95
00:02:47,760 --> 00:02:48,600
So if I go in the assets,

96
00:02:48,600 --> 00:02:50,400
you'll essentially see a
bunch of JavaScript code.

97
00:02:50,400 --> 00:02:51,600
And the main thing that's going to happen

98
00:02:51,600 --> 00:02:53,400
inside of here is I have my console log

99
00:02:53,400 --> 00:02:54,480
and some other stuff going on.

100
00:02:54,480 --> 00:02:55,677
Same thing inside of here.

101
00:02:55,677 --> 00:02:57,810
And if I wanted to see
what that code looks like,

102
00:02:57,810 --> 00:02:59,520
I can type npm run preview,

103
00:02:59,520 --> 00:03:01,530
and this pulls up essentially
a production version.

104
00:03:01,530 --> 00:03:03,510
It just runs the code
directly from this folder.

105
00:03:03,510 --> 00:03:04,950
And if I open that up and pull it over,

106
00:03:04,950 --> 00:03:06,330
you can see I have a blank page.

107
00:03:06,330 --> 00:03:08,040
And if I inspect it and
go over to my console,

108
00:03:08,040 --> 00:03:09,450
you can see it prints out "Hi."

109
00:03:09,450 --> 00:03:10,470
So it's the exact same code.

110
00:03:10,470 --> 00:03:13,080
it's just compiled for
production specifically.

111
00:03:13,080 --> 00:03:15,720
Now, again, depending on what
bundler you decide to use,

112
00:03:15,720 --> 00:03:17,160
you may have slightly different things

113
00:03:17,160 --> 00:03:19,200
in your packaged JSON for
the commands that you run

114
00:03:19,200 --> 00:03:20,880
to get things started, and so on.

115
00:03:20,880 --> 00:03:22,830
But overall, it's going to
be a very similar process,

116
00:03:22,830 --> 00:03:24,930
where there's gonna be some
way to run it in development,

117
00:03:24,930 --> 00:03:27,330
some way to build it, and
some way to either preview it

118
00:03:27,330 --> 00:03:29,910
or look at the actual
production version of your code.

119
00:03:29,910 --> 00:03:32,010
And all of the other
TypeScript confusing stuff

120
00:03:32,010 --> 00:03:33,120
for you is taken care of.

121
00:03:33,120 --> 00:03:34,920
And any configuration you need to do

122
00:03:34,920 --> 00:03:37,670
is going to be directly inside
of this file right here.