- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.550 --> 00:00:03.120
Now that you have gone through the Webpack documentation,
2
00:00:03.120 --> 00:00:06.410
and walked through their own Getting Started Guide,
3
00:00:06.410 --> 00:00:09.530
I hope that some of that content,
4
00:00:09.530 --> 00:00:12.250
and really understanding what Webpack does,
5
00:00:12.250 --> 00:00:14.610
is starting to make a little more sense.
6
00:00:14.610 --> 00:00:17.270
Don't worry if you don't quite understand yet
7
00:00:17.270 --> 00:00:22.270
how Webpack fits in to every part of an application build.
8
00:00:22.340 --> 00:00:25.980
You're gonna start to learn that the longer you go along.
9
00:00:25.980 --> 00:00:28.580
But I wanted you to go through that documentation,
10
00:00:28.580 --> 00:00:30.700
because it's really good practice
11
00:00:30.700 --> 00:00:35.000
for you to learn how to read documentation,
12
00:00:35.000 --> 00:00:38.140
instead of simply following the tutorials.
13
00:00:38.140 --> 00:00:40.680
So, the way that I've setup this course,
14
00:00:40.680 --> 00:00:43.130
and really, all of the courses that I build,
15
00:00:43.130 --> 00:00:47.600
is I need to show you the techniques and skills you need
16
00:00:47.600 --> 00:00:50.580
in order to build applications.
17
00:00:50.580 --> 00:00:53.580
But along with that, I also want to show you
18
00:00:53.580 --> 00:00:57.562
how you can learn, and how you can teach yourself
19
00:00:57.562 --> 00:01:01.530
other types of skills, and how to work with tools,
20
00:01:01.530 --> 00:01:02.647
and different things like that.
21
00:01:02.647 --> 00:01:04.370
And the reason why I'm doing it
22
00:01:04.370 --> 00:01:07.070
is not because I just wanna give you more work.
23
00:01:07.070 --> 00:01:10.028
It's because it's my job to teach you
24
00:01:10.028 --> 00:01:12.410
how to be a developer.
25
00:01:12.410 --> 00:01:16.190
And so, a developer definitely does follow along
26
00:01:16.190 --> 00:01:18.920
with tutorials, just like we're doing right here.
27
00:01:18.920 --> 00:01:23.260
But a developer also learns how to learn.
28
00:01:23.260 --> 00:01:25.330
They read documentation.
29
00:01:25.330 --> 00:01:27.000
They go through the source code.
30
00:01:27.000 --> 00:01:28.410
They do those kinds of things.
31
00:01:28.410 --> 00:01:31.250
And so, as we go through this course,
32
00:01:31.250 --> 00:01:32.320
I don't wanna teach you
33
00:01:32.320 --> 00:01:35.890
just how to build this one portfolio application.
34
00:01:35.890 --> 00:01:39.230
I wanna teach you how to build any type of application
35
00:01:39.230 --> 00:01:42.200
you ever want, or ever need, to build.
36
00:01:42.200 --> 00:01:43.333
And so that is part of the reason
37
00:01:43.333 --> 00:01:46.041
that I wanted you to go through that documentation,
38
00:01:46.041 --> 00:01:48.520
because that's gonna start developing
39
00:01:48.520 --> 00:01:51.170
the right types of habits for you.
40
00:01:51.170 --> 00:01:52.765
And it's gonna really help you
41
00:01:52.765 --> 00:01:56.310
as you go along on your development journey.
42
00:01:56.310 --> 00:01:59.160
So let's get started on finishing out
43
00:01:59.160 --> 00:02:02.400
walking through the rest of these files here.
44
00:02:02.400 --> 00:02:04.600
So, the next file we're gonna take a look at,
45
00:02:04.600 --> 00:02:07.410
is the Babel rc file.
46
00:02:07.410 --> 00:02:11.940
So this is going back to how Bebel works,
47
00:02:11.940 --> 00:02:13.230
or what Babel is,
48
00:02:13.230 --> 00:02:15.580
Babel gives us the ability, remember,
49
00:02:15.580 --> 00:02:20.010
to write code in one format, in modern JavaScript.
50
00:02:20.010 --> 00:02:24.060
And then it takes care of really compiling
51
00:02:24.060 --> 00:02:26.910
down into other versions of JavaScript,
52
00:02:26.910 --> 00:02:30.670
so that the browsers can understand what we're writing.
53
00:02:30.670 --> 00:02:35.670
So, a Babel rc rile, it's technically called a hidden file.
54
00:02:36.650 --> 00:02:40.500
It's a configuration file at the base of the application.
55
00:02:40.500 --> 00:02:44.010
And it has some presets and some plugins,
56
00:02:44.010 --> 00:02:46.580
and just some configuration items.
57
00:02:46.580 --> 00:02:48.040
So, every once in a while,
58
00:02:48.040 --> 00:02:50.680
you may need to update this file.
59
00:02:50.680 --> 00:02:54.290
So for right now, the presets that I've supplied
60
00:02:54.290 --> 00:02:58.500
are the ENV and then the React presets.
61
00:02:58.500 --> 00:03:02.800
Now that is something that somewhere down the line,
62
00:03:02.800 --> 00:03:04.091
you may wanna change.
63
00:03:04.091 --> 00:03:05.520
If you wanna work
64
00:03:05.520 --> 00:03:09.430
with maybe a different version of JavaScript,
65
00:03:09.430 --> 00:03:10.970
then this is where you could do it.
66
00:03:10.970 --> 00:03:15.970
You could say, okay, I wanna work with the ES 2017 version,
67
00:03:16.080 --> 00:03:17.260
or something like that.
68
00:03:17.260 --> 00:03:21.554
And when you do that, you have to restart your server.
69
00:03:21.554 --> 00:03:25.260
And then those changes are gonna be picked up
70
00:03:25.260 --> 00:03:26.390
in the application.
71
00:03:26.390 --> 00:03:28.850
And then as you start to write the code,
72
00:03:28.850 --> 00:03:31.640
you can use those more up to date versions,
73
00:03:31.640 --> 00:03:34.740
and then it's going to compile those for you.
74
00:03:34.740 --> 00:03:37.470
So that's really what this rc file does.
75
00:03:37.470 --> 00:03:39.720
We've already talked about the gitignore file.
76
00:03:39.720 --> 00:03:43.930
Once again, that's just a file that you can list off
77
00:03:43.930 --> 00:03:46.440
all of the directories, files,
78
00:03:46.440 --> 00:03:49.280
or anything that you do not want pushed up
79
00:03:49.280 --> 00:03:51.900
to version control.
80
00:03:51.900 --> 00:03:55.090
Next is our ENV file.
81
00:03:55.090 --> 00:03:57.849
So this is a file that allows us
82
00:03:57.849 --> 00:04:02.530
to define a few specific environment rules.
83
00:04:02.530 --> 00:04:04.400
So if you remember,
84
00:04:04.400 --> 00:04:06.930
and let me open this up here in Webpack,
85
00:04:06.930 --> 00:04:10.330
if you remember in the DEV file here,
86
00:04:10.330 --> 00:04:12.170
the dev.config file,
87
00:04:12.170 --> 00:04:17.170
do you remember when we said env.devserver.port?
88
00:04:17.370 --> 00:04:20.950
And then if that doesn't exist, then 3000.
89
00:04:20.950 --> 00:04:24.190
Well, what this code is doing right here,
90
00:04:24.190 --> 00:04:28.160
is it's actually referencing what we defined
91
00:04:28.160 --> 00:04:30.020
in this ENV file.
92
00:04:30.020 --> 00:04:32.670
So even though these things are,
93
00:04:32.670 --> 00:04:33.960
they're pretty much gonna resolve
94
00:04:33.960 --> 00:04:35.970
to be the same exact thing,
95
00:04:35.970 --> 00:04:37.900
it's still good to have one file
96
00:04:37.900 --> 00:04:39.610
where you can define those.
97
00:04:39.610 --> 00:04:42.280
So that's all we're doing in this ENV file,
98
00:04:42.280 --> 00:04:45.080
is we're saying I want this server
99
00:04:45.080 --> 00:04:46.600
to run on localhost,
100
00:04:46.600 --> 00:04:49.390
and then I want it to run on port 3000.
101
00:04:49.390 --> 00:04:50.280
That's all we're doing.
102
00:04:50.280 --> 00:04:51.930
We could change it up if we wanted.
103
00:04:51.930 --> 00:04:53.810
We could say we want this to run
104
00:04:53.810 --> 00:04:56.560
on port 8080 or something like that.
105
00:04:56.560 --> 00:05:00.360
And if we did, then that is the address
106
00:05:00.360 --> 00:05:01.560
that we'd have to go to.
107
00:05:01.560 --> 00:05:03.100
And let's actually test this out
108
00:05:03.100 --> 00:05:04.560
This will be a good exercise
109
00:05:04.560 --> 00:05:06.430
because this is a good thing to learn.
110
00:05:06.430 --> 00:05:07.860
So I'm gonna stop the server,
111
00:05:07.860 --> 00:05:10.460
because this is one of the actions
112
00:05:10.460 --> 00:05:13.400
that you would need to stop the server with.
113
00:05:13.400 --> 00:05:14.490
And let's change this.
114
00:05:14.490 --> 00:05:17.490
So we're gonna keep localhost for the host,
115
00:05:17.490 --> 00:05:21.350
but let's change the port to be port 8080.
116
00:05:21.350 --> 00:05:22.980
So I'm gonna hit save here.
117
00:05:22.980 --> 00:05:25.305
And now, if I come down here,
118
00:05:25.305 --> 00:05:29.800
and open up the terminal and run mpm, run start.
119
00:05:29.800 --> 00:05:32.350
That's gonna start up our server again.
120
00:05:32.350 --> 00:05:35.220
And let's wait until it's fully compiled,
121
00:05:35.220 --> 00:05:37.500
and it tells us that it compiled successfully.
122
00:05:37.500 --> 00:05:38.820
And it looks like it did.
123
00:05:38.820 --> 00:05:40.670
Now let's open up the browser.
124
00:05:40.670 --> 00:05:43.840
So now, if I try to go to localhost 3000,
125
00:05:43.840 --> 00:05:45.500
you'll see it doesn't work.
126
00:05:45.500 --> 00:05:48.940
Now I can go to localhost 8080,
127
00:05:48.940 --> 00:05:52.760
and you'll see that now, the server is running there.
128
00:05:52.760 --> 00:05:55.210
So that is, if you've ever been curious
129
00:05:55.210 --> 00:05:58.740
on how to know where the port is,
130
00:05:58.740 --> 00:06:01.460
or what address to go to in the browser,
131
00:06:01.460 --> 00:06:04.000
that is how we can define that.
132
00:06:04.000 --> 00:06:05.540
So, I'm gonna actually keep that
133
00:06:05.540 --> 00:06:07.110
for the rest of this course.
134
00:06:07.110 --> 00:06:10.471
It's perfectly fine for whatever you want to use.
135
00:06:10.471 --> 00:06:12.000
It's up to you.
136
00:06:12.000 --> 00:06:13.100
That's one of the nice things.
137
00:06:13.100 --> 00:06:16.450
You can really use any type of port here that you want.
138
00:06:16.450 --> 00:06:18.630
The two most common ones you're gonna see
139
00:06:18.630 --> 00:06:20.690
in JavaScript applications are gonna be
140
00:06:20.690 --> 00:06:23.460
either 3000, or 8080.
141
00:06:23.460 --> 00:06:25.870
They're kind of standard conventions.
142
00:06:25.870 --> 00:06:29.100
But the main reason I wanted to include that here,
143
00:06:29.100 --> 00:06:32.730
is just so you could start to become familiar
144
00:06:32.730 --> 00:06:34.100
with how you can update
145
00:06:34.100 --> 00:06:36.040
those kinds of environment variables.
146
00:06:36.040 --> 00:06:39.240
And then hopefully this also helps connect a few of the dots
147
00:06:39.240 --> 00:06:42.660
where you can see that one of the items
148
00:06:42.660 --> 00:06:47.660
that we defined in our Webpack configuration file,
149
00:06:47.720 --> 00:06:51.090
is actually getting pulled from a different file.
150
00:06:51.090 --> 00:06:53.540
And that's our ENV one right here.
151
00:06:53.540 --> 00:06:55.460
So that's working nicely, and I'll just keep that.
152
00:06:55.460 --> 00:06:57.530
So that means, for the rest of this course,
153
00:06:57.530 --> 00:06:59.220
when I open up the browser,
154
00:06:59.220 --> 00:07:02.870
I'm gonna have to go to localhost:8080,
155
00:07:02.870 --> 00:07:05.510
and that's gonna open up that application.
156
00:07:05.510 --> 00:07:08.180
Lastly, is our license file.
157
00:07:08.180 --> 00:07:09.684
This is simply something
158
00:07:09.684 --> 00:07:13.160
that is included in this application
159
00:07:13.160 --> 00:07:16.553
to define the type of license that this application
160
00:07:16.553 --> 00:07:18.790
and this code base is following.
161
00:07:18.790 --> 00:07:21.230
You're not gonna have to do anything with this file.
162
00:07:21.230 --> 00:07:24.560
It's simply a reminder of the type of license
163
00:07:24.560 --> 00:07:27.690
that we're using, which is the MIT license.
164
00:07:27.690 --> 00:07:30.833
Because we are working with open source software,
165
00:07:30.833 --> 00:07:34.880
what that means is, we don't have to pay to use the code.
166
00:07:34.880 --> 00:07:39.080
We don't have to pay to use React or React Router,
167
00:07:39.080 --> 00:07:41.671
or any of the tools that we're using.
168
00:07:41.671 --> 00:07:46.160
If you go back a few years, or a few decades even,
169
00:07:46.160 --> 00:07:48.650
then there were many programming languages
170
00:07:48.650 --> 00:07:52.880
and tools out there, that were not open source libraries.
171
00:07:52.880 --> 00:07:56.600
So, you would actually have to go pay a license fee
172
00:07:56.600 --> 00:07:59.690
in order to use that language, that framework,
173
00:07:59.690 --> 00:08:01.500
or that code tool.
174
00:08:01.500 --> 00:08:03.840
Everything that we do in this course,
175
00:08:03.840 --> 00:08:05.170
and the entire boot camp,
176
00:08:05.170 --> 00:08:09.090
is all related to open source software.
177
00:08:09.090 --> 00:08:11.370
So, we're always gonna be using that.
178
00:08:11.370 --> 00:08:13.440
And this is simply defining that.
179
00:08:13.440 --> 00:08:16.040
This is saying we're using open source software
180
00:08:16.040 --> 00:08:17.770
with the MIT license.
181
00:08:17.770 --> 00:08:19.780
There's nothing that you really have to do there.
182
00:08:19.780 --> 00:08:22.720
It's simply just kind of getting you familiar
183
00:08:22.720 --> 00:08:26.900
with some of the key terms related to open source software.
184
00:08:26.900 --> 00:08:29.948
So, in this guide, we covered the Bebel rc file,
185
00:08:29.948 --> 00:08:33.040
we covered the environment file,
186
00:08:33.040 --> 00:08:35.960
we saw how we were able to change the port
187
00:08:35.960 --> 00:08:37.410
that our server's running in,
188
00:08:37.410 --> 00:08:40.344
and then we talked about open source software licenses.
189
00:08:40.344 --> 00:08:41.940
In the next guide,
190
00:08:41.940 --> 00:08:45.920
we are going to jump into our package JSON file,
191
00:08:45.920 --> 00:08:48.267
and we're gonna see how we can run custom scripts
192
00:08:48.267 --> 00:08:52.753
and how we can manage all of our applications' dependencies.