- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.570 --> 00:00:01.403
In this guide,
2
00:00:01.403 --> 00:00:04.670
we're gonna dive in to the package JSON file.
3
00:00:04.670 --> 00:00:05.670
Now when you went through
4
00:00:05.670 --> 00:00:08.230
the Webpack getting started documentation,
5
00:00:08.230 --> 00:00:11.790
you probably already played with this file a little bits.
6
00:00:11.790 --> 00:00:13.850
And so that's good, you may become,
7
00:00:13.850 --> 00:00:15.820
you may already be familiar with it.
8
00:00:15.820 --> 00:00:18.350
And so we're gonna walk through this one
9
00:00:18.350 --> 00:00:20.370
because it's pretty extensive.
10
00:00:20.370 --> 00:00:24.050
And we're gonna see everything that you can do with it.
11
00:00:24.050 --> 00:00:25.850
Now starting at the very top,
12
00:00:25.850 --> 00:00:28.240
notice here the first three elements
13
00:00:28.240 --> 00:00:32.010
are simply some application metadata.
14
00:00:32.010 --> 00:00:34.130
So it's the name
15
00:00:34.130 --> 00:00:36.980
and we could even change the name here.
16
00:00:36.980 --> 00:00:41.040
So instead of react router, I could say,
17
00:00:41.040 --> 00:00:42.480
dissecting
18
00:00:44.610 --> 00:00:47.500
react hooks portfolio.
19
00:00:47.500 --> 00:00:51.030
You could type your first and last name
20
00:00:51.030 --> 00:00:54.400
and then say dash portfolio, whatever you want to call it.
21
00:00:54.400 --> 00:00:56.810
Just make sure to follow a convention like this.
22
00:00:56.810 --> 00:00:58.920
This is the common convention to follow
23
00:00:58.920 --> 00:01:01.800
where the name is either
24
00:01:01.800 --> 00:01:04.270
separated by dashes
25
00:01:04.270 --> 00:01:05.560
like I have here,
26
00:01:05.560 --> 00:01:07.720
or you also could do something like this
27
00:01:07.720 --> 00:01:09.100
where it's dissecting
28
00:01:10.360 --> 00:01:13.530
react hooks portfolio.
29
00:01:13.530 --> 00:01:14.910
Really whatever you wanna call it,
30
00:01:14.910 --> 00:01:18.300
but if you hover over here, you'll see that it says
31
00:01:18.300 --> 00:01:20.891
that this string doesn't really match
32
00:01:20.891 --> 00:01:22.830
the proper pattern.
33
00:01:22.830 --> 00:01:26.790
So that's the reason why I typically follow this approach
34
00:01:26.790 --> 00:01:31.630
just so it matches what applications are going to expect
35
00:01:31.630 --> 00:01:33.030
that name to be.
36
00:01:33.030 --> 00:01:34.410
Now in the version,
37
00:01:34.410 --> 00:01:36.880
we're just going to keep that right at one.
38
00:01:36.880 --> 00:01:38.080
For the description,
39
00:01:38.080 --> 00:01:40.460
then you can put anything that you want there
40
00:01:40.460 --> 00:01:43.810
that is explaining to people what your application does.
41
00:01:43.810 --> 00:01:46.180
None of this is really going to be used at all.
42
00:01:46.180 --> 00:01:49.040
It's simply metadata for your application.
43
00:01:49.040 --> 00:01:51.777
Now let's jump into something that's pretty cool here.
44
00:01:51.777 --> 00:01:54.000
And these are the scripts.
45
00:01:54.000 --> 00:01:57.410
Now scripts in a package JSON file
46
00:01:57.410 --> 00:02:01.320
give us the ability to run processes
47
00:02:01.320 --> 00:02:03.800
at the terminal level.
48
00:02:03.800 --> 00:02:06.690
So let's see how this happens.
49
00:02:06.690 --> 00:02:09.090
So all of these scripts here
50
00:02:09.090 --> 00:02:13.500
are scripts that I've created, and I put into the template.
51
00:02:13.500 --> 00:02:16.640
That's why they're there, those would not be there by magic,
52
00:02:16.640 --> 00:02:18.810
just like you saw when you created
53
00:02:18.810 --> 00:02:22.040
the Webpack getting started application.
54
00:02:22.040 --> 00:02:24.740
So here in the scripts, let's create a new one.
55
00:02:24.740 --> 00:02:27.510
So I'm going to say testing,
56
00:02:27.510 --> 00:02:31.040
and you wrap that up in double quotes, followed by a colon.
57
00:02:31.040 --> 00:02:34.950
And then also in double quotes, I'm going to say echo,
58
00:02:34.950 --> 00:02:38.740
and then in single quotes, testing
59
00:02:38.740 --> 00:02:40.713
scripts commands.
60
00:02:42.570 --> 00:02:46.040
And then at the very end of the entire line add a comma,
61
00:02:46.040 --> 00:02:48.770
because JSON, the JSON file type
62
00:02:48.770 --> 00:02:51.320
if you haven't really worked with it a lot before,
63
00:02:51.320 --> 00:02:55.240
it's just a set of key value pairs.
64
00:02:55.240 --> 00:02:56.850
So I'm gonna hit save here
65
00:02:56.850 --> 00:02:59.840
and I'm gonna open up the terminal
66
00:02:59.840 --> 00:03:01.970
and run NPM
67
00:03:01.970 --> 00:03:03.090
run
68
00:03:03.090 --> 00:03:04.000
testing.
69
00:03:04.000 --> 00:03:05.390
So up until this point,
70
00:03:05.390 --> 00:03:08.660
the only thing we've run was NPM run start.
71
00:03:08.660 --> 00:03:11.730
Now I'm gonna say NPM run testing.
72
00:03:11.730 --> 00:03:14.010
And you can see right here
73
00:03:14.010 --> 00:03:15.970
that it says testing script commands,
74
00:03:15.970 --> 00:03:18.960
which is exactly what I said I wanted to print out.
75
00:03:18.960 --> 00:03:21.630
Now this may or may not work on Windows,
76
00:03:21.630 --> 00:03:24.990
because I'm not sure how the echo process works,
77
00:03:24.990 --> 00:03:26.680
echo in Mac
78
00:03:26.680 --> 00:03:28.950
or in Linux languages.
79
00:03:28.950 --> 00:03:32.720
And that is simply a way where you can print out commands.
80
00:03:32.720 --> 00:03:35.500
And just to show you I'm still here in the terminal,
81
00:03:35.500 --> 00:03:40.250
if I type the exact same thing, or if I just copy and paste,
82
00:03:40.250 --> 00:03:42.990
If I just copy and paste all this code here
83
00:03:44.020 --> 00:03:47.940
and say echo testing script commands,
84
00:03:47.940 --> 00:03:49.870
then you can see that that printed it out.
85
00:03:49.870 --> 00:03:52.700
So all that that script is doing
86
00:03:52.700 --> 00:03:56.180
is it is running a command for us.
87
00:03:56.180 --> 00:03:59.860
So technically, you don't even need any of these scripts,
88
00:03:59.860 --> 00:04:03.730
but it does make life a lot easier because it's much easier
89
00:04:03.730 --> 00:04:06.680
to type something like NPM
90
00:04:06.680 --> 00:04:09.470
run start to start the server,
91
00:04:09.470 --> 00:04:13.890
as opposed to having to type this entire line of code
92
00:04:13.890 --> 00:04:17.890
webpack dev server config, webpack dev config,
93
00:04:17.890 --> 00:04:18.723
that kind of thing.
94
00:04:18.723 --> 00:04:20.630
So that's the, it's a really,
95
00:04:20.630 --> 00:04:22.930
having these scripts is a really nice way
96
00:04:22.930 --> 00:04:25.780
of being able to run processes
97
00:04:25.780 --> 00:04:28.900
just by typing out a few commands.
98
00:04:28.900 --> 00:04:31.470
Now you can customize this too.
99
00:04:31.470 --> 00:04:33.780
So say that you, for some reason,
100
00:04:33.780 --> 00:04:36.790
you didn't wanna use the word start here,
101
00:04:36.790 --> 00:04:41.530
then I can get rid of this, and I can say, server.
102
00:04:41.530 --> 00:04:44.760
Now there is something kind of in the background
103
00:04:44.760 --> 00:04:47.240
where NPM start would still work
104
00:04:47.240 --> 00:04:50.180
just because of how I configured a few files.
105
00:04:50.180 --> 00:04:53.020
But it wouldn't actually run the local server
106
00:04:53.020 --> 00:04:55.081
it run a different type of server.
107
00:04:55.081 --> 00:04:58.100
I don't want you to even have to worry about that right now.
108
00:04:58.100 --> 00:05:00.410
Just in case you ran that command
109
00:05:00.410 --> 00:05:02.390
you would see that still working.
110
00:05:02.390 --> 00:05:04.090
I'm gonna hit Save here.
111
00:05:04.090 --> 00:05:09.090
And now what I can do is run NPM run server.
112
00:05:09.580 --> 00:05:11.440
And as you can see here,
113
00:05:11.440 --> 00:05:14.200
it's going to start the identical process
114
00:05:14.200 --> 00:05:17.290
as when we used to type NPM run start.
115
00:05:17.290 --> 00:05:20.090
And if I open up the browser, just like this,
116
00:05:20.090 --> 00:05:23.930
and hit refresh, you'll see everything is still working.
117
00:05:23.930 --> 00:05:27.740
So all that we're doing with these commands is
118
00:05:27.740 --> 00:05:30.360
we are communicating with the server
119
00:05:30.360 --> 00:05:32.930
or with the system, with the operating system,
120
00:05:32.930 --> 00:05:35.510
and we're saying run these processes
121
00:05:35.510 --> 00:05:38.710
when a user or when a process
122
00:05:38.710 --> 00:05:40.670
has said
123
00:05:40.670 --> 00:05:42.990
run server or start
124
00:05:42.990 --> 00:05:45.430
or build or any of those.
125
00:05:45.430 --> 00:05:48.300
So that is what's happening right there.
126
00:05:48.300 --> 00:05:50.440
Now I'm gonna switch all of this back.
127
00:05:50.440 --> 00:05:52.090
I'm gonna get testing out
128
00:05:52.090 --> 00:05:54.960
and I'm gonna switch so this does say start
129
00:05:54.960 --> 00:05:58.490
because I like having all of those processes there.
130
00:05:58.490 --> 00:06:00.680
But I am making these changes
131
00:06:00.680 --> 00:06:04.060
really just so you can see how they work.
132
00:06:04.060 --> 00:06:06.330
Now, if you look at that start command
133
00:06:06.330 --> 00:06:09.770
and look at what's inside, this is also kind of helpful.
134
00:06:09.770 --> 00:06:13.710
So what happens when we type NPM run start?
135
00:06:13.710 --> 00:06:15.580
A lot of things may happen in the terminal,
136
00:06:15.580 --> 00:06:19.630
but it really helps to understand all of those processes.
137
00:06:19.630 --> 00:06:21.000
So the first thing it does
138
00:06:21.000 --> 00:06:24.500
is it calls the Webpack dev server.
139
00:06:24.500 --> 00:06:26.530
This is the development server,
140
00:06:26.530 --> 00:06:28.660
that Webpack is going to use
141
00:06:28.660 --> 00:06:32.220
in order to run our application.
142
00:06:32.220 --> 00:06:34.000
So it's gonna run that command.
143
00:06:34.000 --> 00:06:35.330
Then from there,
144
00:06:35.330 --> 00:06:38.720
it is going to say only run this command though,
145
00:06:38.720 --> 00:06:41.100
with a certain configuration.
146
00:06:41.100 --> 00:06:44.470
And this is going to connect some more dots
147
00:06:44.470 --> 00:06:47.320
with how Webpack works and how we use it
148
00:06:47.320 --> 00:06:48.840
for our application.
149
00:06:48.840 --> 00:06:49.673
And right here,
150
00:06:49.673 --> 00:06:54.620
you can see that we are calling that dev config file.
151
00:06:54.620 --> 00:06:58.580
So if you're wondering on how that process worked
152
00:06:58.580 --> 00:07:02.170
and how the system just magically knew
153
00:07:02.170 --> 00:07:04.500
how to run or when to run that file
154
00:07:04.500 --> 00:07:07.120
or when to use that one versus some of the others,
155
00:07:07.120 --> 00:07:08.770
it's because we're telling it to,
156
00:07:08.770 --> 00:07:13.100
that's one of the really nice things that is there for React
157
00:07:13.100 --> 00:07:15.510
and for React or for React and Webpack.
158
00:07:15.510 --> 00:07:19.230
Because it gives you the ability to be very explicit,
159
00:07:19.230 --> 00:07:20.980
you get to make all the rules
160
00:07:20.980 --> 00:07:23.330
with these applications that you're building.
161
00:07:23.330 --> 00:07:26.360
So that is how that process works.
162
00:07:26.360 --> 00:07:28.670
And then we pass in the watch flag.
163
00:07:28.670 --> 00:07:31.010
What the watch flag does is,
164
00:07:31.010 --> 00:07:35.190
if you remember when we make changes in the SRC directory,
165
00:07:35.190 --> 00:07:38.490
so when we make changes to one of our components,
166
00:07:38.490 --> 00:07:40.680
the browser automatically changes
167
00:07:40.680 --> 00:07:43.270
without us having to go and refresh it.
168
00:07:43.270 --> 00:07:45.230
That's what this watch command does.
169
00:07:45.230 --> 00:07:49.280
We're saying watch for changes, and then update the site
170
00:07:49.280 --> 00:07:51.630
when those changes occur.
171
00:07:51.630 --> 00:07:53.820
Then the build command.
172
00:07:53.820 --> 00:07:55.130
This one is one that
173
00:07:55.130 --> 00:07:57.540
you're not really gonna have to do a lot
174
00:07:57.540 --> 00:07:59.510
during the development process.
175
00:07:59.510 --> 00:08:00.920
What build does,
176
00:08:00.920 --> 00:08:04.610
if you look at all of these different elements,
177
00:08:04.610 --> 00:08:07.000
build is what is gonna be used
178
00:08:07.000 --> 00:08:10.960
to produce the entire production application.
179
00:08:10.960 --> 00:08:13.240
So what we're building locally
180
00:08:13.240 --> 00:08:15.650
is in the development environment.
181
00:08:15.650 --> 00:08:16.740
We talked about that
182
00:08:16.740 --> 00:08:18.800
when we went through the Webpack section.
183
00:08:18.800 --> 00:08:21.490
And so when we're in development,
184
00:08:21.490 --> 00:08:25.310
we're using this Webpack development server.
185
00:08:25.310 --> 00:08:29.310
On production, though, we wanna perform tasks such as
186
00:08:29.310 --> 00:08:31.900
minifying our assets,
187
00:08:31.900 --> 00:08:34.880
using Babel to compile our JavaScript code
188
00:08:34.880 --> 00:08:37.210
in a way that the browsers can understand it
189
00:08:37.210 --> 00:08:39.890
and perform all of the tasks needed
190
00:08:39.890 --> 00:08:42.940
for deploying our application to the web.
191
00:08:42.940 --> 00:08:44.650
Well, what the build process does
192
00:08:44.650 --> 00:08:47.290
is it performs all of those tasks.
193
00:08:47.290 --> 00:08:49.570
So it runs if you notice right here,
194
00:08:49.570 --> 00:08:54.120
it's calling the production configuration file for Webpack,
195
00:08:54.120 --> 00:08:56.680
and it's showing progress.
196
00:08:56.680 --> 00:08:59.970
All of these things are what are necessary
197
00:08:59.970 --> 00:09:03.100
in order to build the code.
198
00:09:03.100 --> 00:09:05.920
And so what is gonna really happen here,
199
00:09:05.920 --> 00:09:07.920
you're not gonna do this locally.
200
00:09:07.920 --> 00:09:09.150
You don't have to do this
201
00:09:09.150 --> 00:09:12.150
because, and the main reason for it,
202
00:09:12.150 --> 00:09:14.550
is because you're not trying to run
203
00:09:14.550 --> 00:09:17.990
the live production server on your own computer.
204
00:09:17.990 --> 00:09:20.670
This is what will happen when you deploy to the web,
205
00:09:20.670 --> 00:09:22.420
you'll actually build this
206
00:09:22.420 --> 00:09:25.360
and then the web is going to be,
207
00:09:25.360 --> 00:09:27.180
and the server you're gonna use,
208
00:09:27.180 --> 00:09:29.800
is going to look at this final build.
209
00:09:29.800 --> 00:09:31.430
That's what that process is for.
210
00:09:31.430 --> 00:09:32.850
And then these other items
211
00:09:32.850 --> 00:09:34.380
you don't really have to worry about,
212
00:09:34.380 --> 00:09:36.820
they're simply some elements that are needed
213
00:09:36.820 --> 00:09:39.430
if you're using Heroku for deployment,
214
00:09:39.430 --> 00:09:41.160
these are just some custom scripts.
215
00:09:41.160 --> 00:09:44.660
So technically, what Heroku looks for is,
216
00:09:44.660 --> 00:09:47.390
if you are deploying to that App Engine,
217
00:09:47.390 --> 00:09:50.830
it is gonna run this Heroku post build command,
218
00:09:50.830 --> 00:09:52.440
and then look what it's doing.
219
00:09:52.440 --> 00:09:55.260
It's simply running NPM run build.
220
00:09:55.260 --> 00:09:56.710
So when this command gets run,
221
00:09:56.710 --> 00:09:59.890
it is just running this build command.
222
00:09:59.890 --> 00:10:02.450
Then there are some pre-commit items
223
00:10:02.450 --> 00:10:04.280
such as running some linters,
224
00:10:04.280 --> 00:10:06.340
which I don't want you to worry about right now,
225
00:10:06.340 --> 00:10:07.940
as we get into more advanced topics,
226
00:10:07.940 --> 00:10:09.660
we'll get into what linting is.
227
00:10:09.660 --> 00:10:13.670
And then we can also set up the production server.
228
00:10:13.670 --> 00:10:16.520
So when we push it up to the live web,
229
00:10:16.520 --> 00:10:18.890
we can run the live server.
230
00:10:18.890 --> 00:10:20.400
And that is
231
00:10:20.400 --> 00:10:23.980
our set of package JSON scripts.
232
00:10:23.980 --> 00:10:25.480
So great job if you went through that.
233
00:10:25.480 --> 00:10:28.560
I know that that was a lot of content,
234
00:10:28.560 --> 00:10:31.140
but I wanted to dedicate an entire guide
235
00:10:31.140 --> 00:10:32.640
just to these scripts,
236
00:10:32.640 --> 00:10:35.560
because you're going to see them use quite a bit.
237
00:10:35.560 --> 00:10:36.830
You're gonna customize them
238
00:10:36.830 --> 00:10:38.550
as you get into more advanced topics.
239
00:10:38.550 --> 00:10:41.410
And then also one of the big things I want to do
240
00:10:41.410 --> 00:10:43.020
throughout this entire course,
241
00:10:43.020 --> 00:10:47.960
is I want the process of what's happening
242
00:10:47.960 --> 00:10:48.940
in the browser
243
00:10:48.940 --> 00:10:51.540
and what's happening as you build your application
244
00:10:51.540 --> 00:10:53.950
to be a little bit less magical.
245
00:10:53.950 --> 00:10:56.170
I want you to actually understand
246
00:10:56.170 --> 00:10:57.690
why you're typing
247
00:10:57.690 --> 00:10:59.660
NPM run start
248
00:10:59.660 --> 00:11:02.670
and I want you to know the processes that occur
249
00:11:02.670 --> 00:11:04.050
when you're doing that,
250
00:11:04.050 --> 00:11:06.270
because that's gonna make you a better developer.
251
00:11:06.270 --> 00:11:09.320
And it's gonna help you debug your applications
252
00:11:09.320 --> 00:11:12.290
and think through exactly what you're doing.
253
00:11:12.290 --> 00:11:16.610
So now that we've gone through that script walkthrough,
254
00:11:16.610 --> 00:11:19.090
in the next guide, what we're gonna get in
255
00:11:19.090 --> 00:11:22.430
is we're gonna move down into the dependencies.
256
00:11:22.430 --> 00:11:24.400
Each one of these items below it,
257
00:11:24.400 --> 00:11:28.010
so the repository, keywords, all of those things,
258
00:11:28.010 --> 00:11:31.060
those are simply some more metadata items,
259
00:11:31.060 --> 00:11:32.970
so we're not gonna have to worry about those.
260
00:11:32.970 --> 00:11:35.630
And then we're gonna move into in the next guide,
261
00:11:35.630 --> 00:11:39.753
how we can manage our dependencies in a React application.