1
00:00:01,110 --> 00:00:05,940
In the last video we got our application working on our local machine so remember we're normally not

2
00:00:05,940 --> 00:00:07,460
going to run this on a local machine.

3
00:00:07,470 --> 00:00:10,270
We just did it very quickly for testing purposes.

4
00:00:10,340 --> 00:00:14,460
The owner mentioned very quickly is that we created two different component files and we wrote them

5
00:00:14,460 --> 00:00:17,230
out as plain javascript not typescript.

6
00:00:17,460 --> 00:00:19,560
Next j US has support for typescript.

7
00:00:19,950 --> 00:00:25,740
However if we use it on this particular application we would essentially be losing more than we would

8
00:00:25,740 --> 00:00:26,680
be gaining.

9
00:00:26,690 --> 00:00:31,080
So the react application we're building here is simple enough that using typescript would not really

10
00:00:31,080 --> 00:00:36,420
give us a lot of benefits but we would have to add in a lot more extra effort to annotate a ton of types

11
00:00:36,420 --> 00:00:37,720
that are floating around.

12
00:00:37,830 --> 00:00:43,230
In particular we have to add in a lot of annotations for next J.S. and so to be honest with you if we

13
00:00:43,230 --> 00:00:47,820
use typescript here we have spent D amount of time just trying to tell typescript about what was going

14
00:00:47,820 --> 00:00:48,770
on with next.

15
00:00:48,960 --> 00:00:51,840
And that's not really a super great use of time inside this course.

16
00:00:52,050 --> 00:00:54,930
So we're just gonna keep it simple and use javascript instead.

17
00:00:55,020 --> 00:00:57,750
We are so going to use typescript on all the backend services.

18
00:00:57,750 --> 00:00:59,440
However all right.

19
00:00:59,510 --> 00:01:04,190
So with that quick disclaimer out of the way we're gonna focus in this video on making sure that we

20
00:01:04,190 --> 00:01:08,570
can run our next J S application inside of our Cuban cities cluster.

21
00:01:08,570 --> 00:01:13,760
So to do so we need to make sure that we can build an image out of this client project.

22
00:01:13,880 --> 00:01:20,090
We're going to set up a deployment file inside of our info okay its directory and a couple other odds

23
00:01:20,090 --> 00:01:21,740
and ends here and there.

24
00:01:21,740 --> 00:01:26,000
Let's first get started by making sure that we can build an image out of this client project.

25
00:01:26,060 --> 00:01:31,520
Remember any time we want to build an image we create a docker file so inside that client directory

26
00:01:31,550 --> 00:01:34,500
I'm going to make a new file called Docker file.

27
00:01:34,580 --> 00:01:40,250
Don't forget the capital D on their and then inside of here we're gonna write out some configuration

28
00:01:40,280 --> 00:01:47,460
or some steps very similar to the one we did back over here or our ticketing application or something

29
00:01:47,460 --> 00:01:49,780
for the off service.

30
00:01:49,920 --> 00:01:58,640
So we're gonna write out from node Alpine we'll set up a working directory of slash app we will copy

31
00:01:58,640 --> 00:02:04,780
over the package not just on file into the working directory so don't forget the dot right there.

32
00:02:05,600 --> 00:02:08,930
We will then run npm install.

33
00:02:09,070 --> 00:02:13,960
We will copy over everything else inside of our source directory.

34
00:02:14,190 --> 00:02:19,850
And then finally we'll set up a default command to run whenever a container is created out this image

35
00:02:20,150 --> 00:02:22,180
of NPM run.

36
00:02:22,460 --> 00:02:29,310
Def well then say the soccer file and close it all right.

37
00:02:29,310 --> 00:02:33,810
After that we're going to also create a docker ignore file inside the client folder as well because

38
00:02:33,820 --> 00:02:38,510
remember whenever we are building this image we really do not want to include that node modules directory.

39
00:02:38,520 --> 00:02:42,600
Instead we want the image to build up its own set of dependencies on its own.

40
00:02:42,630 --> 00:02:45,060
We're also going to list out this dot next folder.

41
00:02:45,060 --> 00:02:46,520
You and I did not create that folder.

42
00:02:46,530 --> 00:02:53,180
Instead it was created automatically by next when we started up the server on our local machine so inside

43
00:02:53,180 --> 00:02:56,400
this client folder I'm gonna make a new file called Dot.

44
00:02:56,420 --> 00:02:59,230
Do not forget the leading dot on here Docker.

45
00:02:59,270 --> 00:03:08,720
Ignore and then inside there the list out node modules and dot next will then say this and close the

46
00:03:08,720 --> 00:03:14,930
file now just to make sure that we wrote out the docker file and the docker ignore file correctly.

47
00:03:14,940 --> 00:03:20,460
I would like to try to build out this image one time on our local machine manually if you are using

48
00:03:20,460 --> 00:03:22,950
Coober Nettles through Google cloud.

49
00:03:22,980 --> 00:03:27,270
As I showed you how to set that up much earlier inside this course you do not have to do this little

50
00:03:27,270 --> 00:03:29,130
test build that we're about to run.

51
00:03:29,190 --> 00:03:35,880
So again if you are running Ubuntu is on Google Cloud you don't have to do this little test otherwise

52
00:03:35,880 --> 00:03:40,860
if you are running Cuban locally let's flip on over to our terminal to find a window that I was running

53
00:03:40,860 --> 00:03:46,410
next to us in from the last video I got to stop that development server I got to make sure I'm still

54
00:03:46,410 --> 00:03:54,100
inside a client directory and then I'll do a docker builds I'll tag it as my Docker I.D. slash client

55
00:03:54,760 --> 00:04:00,750
and specify the current directory as the context for the built.

56
00:04:00,840 --> 00:04:05,220
All right so it looks like everything was sent over correctly or I should say the package Chase on file

57
00:04:05,220 --> 00:04:11,810
was we're installing couple of dependencies and after that the image should successfully be built.

58
00:04:11,860 --> 00:04:14,630
OK so a good start I can take a pause right here.

59
00:04:14,770 --> 00:04:18,790
We'll come back next video we'll make sure the image was built successfully and we'll start to setup

60
00:04:19,880 --> 00:04:26,600
a brand new config file to deploy this next application and we'll also make a quick change to our scaffold

61
00:04:26,600 --> 00:04:27,650
config file as well.