1
00:00:00,080 --> 00:00:01,250
And first things first.

2
00:00:01,250 --> 00:00:06,590
Let's take a look at the file and folder structure in our project.

3
00:00:06,590 --> 00:00:08,630
And the good news is that.

4
00:00:09,440 --> 00:00:12,890
For the most part, the setup is almost the same.

5
00:00:12,890 --> 00:00:20,210
So if you're comfortable with Create React app, there's not that many things that are different, so

6
00:00:20,600 --> 00:00:23,100
you should be very comfortable working with it.

7
00:00:23,120 --> 00:00:26,930
But there are a few tiny things that we need to discuss.

8
00:00:27,050 --> 00:00:30,060
For starters, let's navigate to package.json.

9
00:00:30,080 --> 00:00:34,550
So again, we have the dependencies and all that and notice over here.

10
00:00:34,550 --> 00:00:36,080
So we have react and react.

11
00:00:36,080 --> 00:00:42,210
Dom And we also have some dev dependencies as far as the commands we're looking for.

12
00:00:42,230 --> 00:00:43,570
NPM run dev.

13
00:00:43,580 --> 00:00:49,770
So this is going to spin up the vite dev server and also we have the build one.

14
00:00:49,790 --> 00:00:56,240
Now I'm not going to worry about these ones right now, so we'll cover build way later in the project

15
00:00:56,240 --> 00:00:59,210
when we have a complete frontend application.

16
00:00:59,240 --> 00:01:01,790
For now we're just concerned with this one.

17
00:01:01,790 --> 00:01:03,860
So this is something we're going to use.

18
00:01:03,890 --> 00:01:06,710
Of course, if you want to rename it to, let's say, start.

19
00:01:06,740 --> 00:01:07,850
That's always an option.

20
00:01:07,850 --> 00:01:16,170
But in my case, I will leave it as dev and the first thing we want to do when we have our Vite instance,

21
00:01:16,170 --> 00:01:18,610
we want to install all the dependencies.

22
00:01:18,630 --> 00:01:24,900
So we're just simply going to run NPM install and once all the dependencies are in place, then of course

23
00:01:24,900 --> 00:01:28,500
I'll talk about the file and folder structure.

24
00:01:28,500 --> 00:01:35,200
And like I said, for the most part we're going to run NPM run dev, which is going to spin up the vite

25
00:01:35,340 --> 00:01:36,810
dev server.

26
00:01:37,370 --> 00:01:39,800
And first we can see over here that we have node modules.

27
00:01:39,800 --> 00:01:43,340
So these are going to be the dependencies our project is using here.

28
00:01:43,340 --> 00:01:49,430
We have the public one, so whatever we place in the public is going to be publicly available.

29
00:01:49,460 --> 00:01:54,310
Essentially, you can set up here the images, you can set up the CSS and all that.

30
00:01:54,320 --> 00:01:59,810
However, just like with Create React app, it's not suggest that you do that because of course there's

31
00:01:59,810 --> 00:02:01,760
going to be no optimization.

32
00:02:01,760 --> 00:02:03,770
So something to keep in mind.

33
00:02:03,800 --> 00:02:10,880
Now eventually we might add some code over here for the redirects, but again, that is all coming up.

34
00:02:10,880 --> 00:02:15,770
And then we have a source where effectively we'll do all of our work.

35
00:02:15,950 --> 00:02:22,490
So notice over here we have the assets where at this point we have again this React SVG image.

36
00:02:22,490 --> 00:02:23,210
And you know what?

37
00:02:23,210 --> 00:02:29,960
Let me clear everything and let me run NPM run dev just so you can see the actual result.

38
00:02:29,960 --> 00:02:33,050
So notice how quickly everything happens.

39
00:02:33,050 --> 00:02:41,190
We right away have our project on localhost 5173 and we simply need to navigate there now while we're

40
00:02:41,190 --> 00:02:42,840
working on a front end.

41
00:02:42,870 --> 00:02:48,570
In the beginning I'll actually have side by side the browser just so you can see.

42
00:02:49,250 --> 00:02:50,720
Everything instantly.

43
00:02:50,750 --> 00:02:58,430
Now, eventually, once we switch to the server code, I'll actually remove it because at that point

44
00:02:58,430 --> 00:03:00,380
I don't see any need for that.

45
00:03:00,380 --> 00:03:07,010
But yes, initially I'll use my VS code with the browser side by side and check it out.

46
00:03:07,010 --> 00:03:10,490
So effectively this is going to be our project.

47
00:03:10,580 --> 00:03:16,160
And as far as the assets folder you can place here, whatever you want, any kind of asset.

48
00:03:16,160 --> 00:03:22,490
So CSS file images and all that, and I'm probably going to be very annoying and I'm just going to keep

49
00:03:22,490 --> 00:03:23,570
repeating that.

50
00:03:23,750 --> 00:03:28,340
Pretty much setup is exactly the same like we have in Create React app.

51
00:03:28,340 --> 00:03:34,610
So it's not going to be surprising if you navigate to Main JS and you'll see that this is our main entry

52
00:03:34,610 --> 00:03:35,210
point.

53
00:03:35,210 --> 00:03:41,540
So notice that they're using React 18 and therefore we use this method, the create route.

54
00:03:41,540 --> 00:03:47,990
And also at the moment app component is wrapped in the React strict mode.

55
00:03:48,020 --> 00:03:49,650
Now why is that important?

56
00:03:49,650 --> 00:03:53,790
Well, because during development you'll just have more logs.

57
00:03:53,790 --> 00:03:59,520
That's one of the things with strict mode during development, it runs additional checks and as a result

58
00:03:59,550 --> 00:04:00,570
we'll have more logs.

59
00:04:00,570 --> 00:04:05,070
So don't be surprised while we're developing that, you're getting extra logs.

60
00:04:05,100 --> 00:04:10,920
Also, we have index CSS effectively this is our main CSS file.

61
00:04:10,920 --> 00:04:16,829
And in our case, this is where we'll set up the global styles and then eventually we'll use styled

62
00:04:16,829 --> 00:04:17,760
component.

63
00:04:17,760 --> 00:04:23,010
And at the moment we have only one component and that is app JS And as you can see over here, they

64
00:04:23,010 --> 00:04:28,800
have some use state logic and this is the result that we see on the screen.

65
00:04:29,070 --> 00:04:36,960
There's also a specific app, CSS, just for the app JS file, but totally honestly, we will remove

66
00:04:36,960 --> 00:04:41,370
everything from index CSS and we'll also just remove app CSS.

67
00:04:41,400 --> 00:04:42,600
There's really no need.

68
00:04:42,630 --> 00:04:51,360
Now one thing we do need to remember though, is that when it comes to Vite, it's expecting a JS extension

69
00:04:51,360 --> 00:04:53,850
if we have a react component.

70
00:04:54,000 --> 00:04:56,610
So we will set up the component the same way.

71
00:04:56,700 --> 00:04:59,850
Basically we create a function and we export and all that.

72
00:04:59,880 --> 00:05:03,120
Notice this syntax doesn't change.

73
00:05:03,120 --> 00:05:07,110
What does change is the extension.

74
00:05:07,110 --> 00:05:12,450
So if you won't have JSX, then Vite is going to complain.

75
00:05:12,450 --> 00:05:18,120
Something very important to keep in mind and to tell you honestly, at least in my opinion, that's

76
00:05:18,120 --> 00:05:18,990
the biggest difference.

77
00:05:18,990 --> 00:05:21,690
That's the biggest thing you need to remember.

78
00:05:21,930 --> 00:05:24,090
Everything else is exactly the same.

79
00:05:24,090 --> 00:05:26,220
Like with Create React app.

80
00:05:26,430 --> 00:05:29,280
Then we have file for Eslint rules.

81
00:05:29,280 --> 00:05:31,140
We also have git ignore.

82
00:05:31,170 --> 00:05:36,840
Effectively, this just states which files are going to be ignored by the source.

83
00:05:36,840 --> 00:05:39,120
Control something we're going to.

84
00:05:39,690 --> 00:05:41,380
Set it up a little bit later.

85
00:05:41,400 --> 00:05:43,650
Then we have index HTML.

86
00:05:43,980 --> 00:05:49,980
So effectively this is the HTML file where we can change the title and also notice this route.

87
00:05:50,130 --> 00:05:53,850
This is where our entire application sits.

88
00:05:53,880 --> 00:05:57,390
We also have package lock and package Json.

89
00:05:57,600 --> 00:06:01,980
Effectively, this is where we see the packages and also the scripts.

90
00:06:02,810 --> 00:06:05,390
And at the very end we have feet config.

91
00:06:05,880 --> 00:06:07,980
Where we can set up the configuration.

92
00:06:07,980 --> 00:06:11,520
And in our case, this is where we'll set up the proxy.

93
00:06:11,700 --> 00:06:14,160
And all of that is coming up.

94
00:06:14,280 --> 00:06:20,790
If you see the same result in the browser, we are in good shape and we can move on to the next step.