WEBVTT

00:00.900 --> 00:01.733
-: In the last video,

00:01.733 --> 00:04.200
we started working on our Scaffold config file.

00:04.200 --> 00:06.180
So we've added in an artifact here.

00:06.180 --> 00:07.530
Remember, that is telling Scaffold

00:07.530 --> 00:10.563
that we want it to manage our client project.

00:11.970 --> 00:13.620
All right, so now the next thing we're going to do,

00:13.620 --> 00:16.680
is go down to the very base layer of indentation here,

00:16.680 --> 00:18.900
so notice how I'm all the way back out.

00:18.900 --> 00:21.840
We're gonna set up a section called Deploy.

00:21.840 --> 00:24.120
We're gonna pass in a couple nested properties here,

00:24.120 --> 00:28.773
so we're gonna say deploy kubectl manifests,

00:29.610 --> 00:32.760
and then we're gonna list out all the different config files

00:32.760 --> 00:34.650
that we want Scaffold to manage for us.

00:34.650 --> 00:35.910
When I say config files,

00:35.910 --> 00:39.240
I'm talking about Kubernetes YAML files.

00:39.240 --> 00:40.380
So essentially, in this case,

00:40.380 --> 00:42.420
we're going to attempt to tell Scaffold

00:42.420 --> 00:45.900
that we want it to manage our multi-client deployment

00:45.900 --> 00:49.800
using the client-deployment YAML file.

00:49.800 --> 00:51.570
So as a array entry right here,

00:51.570 --> 00:56.523
I'll say K8s/client-deployment.yaml.

00:58.350 --> 01:00.360
All right, and that's pretty much it.

01:00.360 --> 01:02.610
So now, anytime we start up Scaffold,

01:02.610 --> 01:05.310
it's going to attempt to apply that config file

01:05.310 --> 01:07.320
to our Kubernetes cluster.

01:07.320 --> 01:09.900
Scaffold simultaneously is going to start watching

01:09.900 --> 01:12.660
our client project directory for changes.

01:12.660 --> 01:17.520
If we make any changes to a JavaScript file, CSS or HTML,

01:17.520 --> 01:19.740
it's going to inject those changed files

01:19.740 --> 01:22.803
into our multi-client pod or container.

01:24.450 --> 01:25.490
One quick thing I wanna mention is that

01:25.490 --> 01:29.580
if we make any changes to a file besides a JavaScript, CSS

01:29.580 --> 01:34.530
or HTML file, then Scaffold is gonna fall back to mode one.

01:34.530 --> 01:37.950
So if we change anything besides CSS, HTML, or JavaScript,

01:37.950 --> 01:40.350
it's going to fall back to just rebuilding that client image

01:40.350 --> 01:43.503
from scratch and using it to update our Kubernetes cluster.

01:44.820 --> 01:46.860
Okay, so that's it for our config,

01:46.860 --> 01:48.497
or just the client deployment.

01:48.497 --> 01:50.820
So I'm now gonna save this file,

01:50.820 --> 01:53.220
then we will do a quick test.

01:53.220 --> 01:55.590
So I'm gonna flip back over to my terminal.

01:55.590 --> 01:57.930
Inside of my complex project directory,

01:57.930 --> 01:59.070
I'm gonna start up Scaffold

01:59.070 --> 02:02.013
by running Scaffold Dev, like so.

02:04.530 --> 02:05.730
All right, there we go.

02:05.730 --> 02:07.500
So you're gonna see that Scaffold's going to immediately

02:07.500 --> 02:09.543
try to build our client image.

02:10.620 --> 02:13.110
It's then going to take that built image and throw it

02:13.110 --> 02:14.850
into our Kubernetes cluster, so you can see

02:14.850 --> 02:17.350
that it created that client deployment right here.

02:18.360 --> 02:20.220
We'll then start to see some logs coming out

02:20.220 --> 02:22.890
of that client image that Scaffold is now,

02:22.890 --> 02:25.110
excuse me, client container that Scaffold is now managing,

02:25.110 --> 02:27.030
let me zoom out here just so we can see those logs

02:27.030 --> 02:27.863
more easily.

02:28.830 --> 02:31.830
And so we can see the message that the React application

02:31.830 --> 02:35.040
has started up successfully in development mode.

02:35.040 --> 02:37.680
We're seeing all this output three times because remember,

02:37.680 --> 02:40.320
our deployment file specifies that we should run

02:40.320 --> 02:43.890
three instances of the client pod.

02:43.890 --> 02:45.450
So now we can flip back over to our browser

02:45.450 --> 02:46.653
and test this out.

02:48.120 --> 02:51.210
I'm going to go to K8smulti.com, remember that is

02:51.210 --> 02:54.210
the host alias I set up on my local machine,

02:54.210 --> 02:55.980
and I'll see the app appear.

02:55.980 --> 02:57.810
And we already really had our application appearing,

02:57.810 --> 02:59.430
so what's different here?

02:59.430 --> 03:02.640
Well remember, anytime we now change a project file,

03:02.640 --> 03:05.130
we should automatically see our React application

03:05.130 --> 03:06.630
get the update.

03:06.630 --> 03:09.810
So to test that out, I'll go back over to my code editor.

03:09.810 --> 03:13.200
In my client directory, I'll find the SRC folder

03:13.200 --> 03:16.200
and then inside there I'll find the app.js file.

03:16.200 --> 03:18.360
Remember, inside of here is that H1 tag

03:18.360 --> 03:20.580
that has that big header at the top,

03:20.580 --> 03:22.200
so I'll just make some change to that text,

03:22.200 --> 03:24.300
I'll say like, "Updated."

03:24.300 --> 03:26.013
So Fib calculator updated.

03:27.120 --> 03:29.160
So I can now save this file.

03:29.160 --> 03:31.920
As soon as I do, I'm gonna change back over to my terminal

03:31.920 --> 03:35.490
and we're going to see how Scaffold responds to that.

03:35.490 --> 03:37.320
So right here it says, "Syncing one file

03:37.320 --> 03:40.020
for Steven Greider multi-client."

03:40.020 --> 03:42.570
So Scaffold has seen that I changed the JavaScript file,

03:42.570 --> 03:44.970
it's gonna take that file and try to inject it

03:44.970 --> 03:48.090
into that multi-client image container.

03:48.090 --> 03:50.220
And we can then see some update messages right here

03:50.220 --> 03:51.630
from those three separate pods

03:51.630 --> 03:53.497
that are running multi-client telling us,

03:53.497 --> 03:56.280
"Hey, all right, we got that update successfully."

03:56.280 --> 03:58.140
The Compiled Successfully message is coming

03:58.140 --> 03:59.460
from Create React app,

03:59.460 --> 04:01.657
so this is essentially Create React app saying,

04:01.657 --> 04:03.540
"Hey, we see a change to a file,

04:03.540 --> 04:06.107
we're going to try to rebuild our client project."

04:06.107 --> 04:07.740
When I say client project,

04:07.740 --> 04:10.140
I'm talking about, like, our client JavaScript code,

04:10.140 --> 04:13.080
not rebuilding an image or anything like that.

04:13.080 --> 04:15.810
So if I now flip back over to my browser,

04:15.810 --> 04:17.700
I'll see Updated appear.

04:17.700 --> 04:19.770
If you do not see the live update right here,

04:19.770 --> 04:20.970
it's totally fine.

04:20.970 --> 04:23.700
I have noticed that Scaffold with injecting stuff

04:23.700 --> 04:26.610
is sometimes a little bit finicky.

04:26.610 --> 04:29.730
You will just about always see the files injected

04:29.730 --> 04:30.900
into the container.

04:30.900 --> 04:32.610
Maybe it's not Scaffold that's finicky,

04:32.610 --> 04:34.740
but rather Create React app is.

04:34.740 --> 04:36.600
So sometimes Create React app

04:36.600 --> 04:38.490
will not automatically update the page.

04:38.490 --> 04:40.530
If it doesn't, just do a manual refresh

04:40.530 --> 04:42.663
and you should then see the update appear.

04:43.740 --> 04:45.420
Okay, so clearly we made a change

04:45.420 --> 04:47.940
and we did not have to rebuild an image manually

04:47.940 --> 04:51.780
or anything like that, we just saw the change appear.

04:51.780 --> 04:54.390
So as you might guess, this is an amazing tool

04:54.390 --> 04:56.880
for local development with Kubernetes,

04:56.880 --> 04:57.990
and there's still a couple more things

04:57.990 --> 04:59.130
I wanna tell you about Scaffold,

04:59.130 --> 05:00.600
so let's take a quick pause right here

05:00.600 --> 05:02.193
and continue in the next video.