1
00:00:01,230 --> 00:00:02,040
Hey everybody.

2
00:00:02,130 --> 00:00:09,210
We have our robo friends app now on github and you should be able to put up your robo friends project

3
00:00:09,240 --> 00:00:12,130
on GitHub but here's the thing.

4
00:00:12,150 --> 00:00:18,930
Would it be nice if we can use GitHub pages to actually check out our robo friends app without having

5
00:00:18,930 --> 00:00:28,940
us to clone download npm install just like we've done with simple H2 email projects well with they create

6
00:00:28,940 --> 00:00:29,690
react app.

7
00:00:29,690 --> 00:00:35,310
There's actually a way to do this using GitHub pages.

8
00:00:35,680 --> 00:00:39,490
Now I'll link to this resource so that you can follow step by step.

9
00:00:39,490 --> 00:00:43,010
But let's just go through it and see how easy it is.

10
00:00:43,030 --> 00:00:46,460
I have the project right here.

11
00:00:46,510 --> 00:00:50,450
It says that I need to add a homepage to package that Jason.

12
00:00:50,500 --> 00:00:51,400
So let's do that.

13
00:00:51,400 --> 00:00:59,330
I'm going to copy this and added in our package dad Jason does it matter where it is.

14
00:00:59,330 --> 00:01:05,090
Let's how to write after the name make this a little bit bigger.

15
00:01:05,160 --> 00:01:12,190
I'm going to add my username here and this is the repository name in our case.

16
00:01:12,210 --> 00:01:14,150
What was it.

17
00:01:14,210 --> 00:01:15,620
It was robo friends.

18
00:01:15,620 --> 00:01:17,750
So again use your GitHub username.

19
00:01:18,290 --> 00:01:24,370
And then in here add your get Hub project name next.

20
00:01:25,490 --> 00:01:34,630
If we go through the steps it says that I need to install GitHub pages this package and then added to

21
00:01:34,630 --> 00:01:35,970
by deploy script.

22
00:01:36,010 --> 00:01:42,590
So let's just copy and paste this so if you're using NPM you can do that if you're using your yarn.

23
00:01:42,590 --> 00:01:43,520
This is the command.

24
00:01:44,510 --> 00:01:47,390
So let's install get hub pages

25
00:01:50,290 --> 00:01:56,260
and while that's getting installed let's go back here and it shows here that we need to add these two

26
00:01:56,260 --> 00:02:01,240
lines a pre deploy and deploy in our scripts.

27
00:02:01,240 --> 00:02:03,220
So once again go to our scripts

28
00:02:06,390 --> 00:02:08,900
and then copy and paste this line.

29
00:02:09,180 --> 00:02:13,860
So we have the pre deploy and the deploy.

30
00:02:13,860 --> 00:02:18,600
So the pre deploy runs NPM run build which we know what that does.

31
00:02:18,600 --> 00:02:20,710
It builds our project.

32
00:02:20,870 --> 00:02:25,490
It creates a production version of our project and creates a built folder.

33
00:02:25,490 --> 00:02:33,140
And then the deploy is going to use this GitHub pages so that we just installed and use our built folder.

34
00:02:33,140 --> 00:02:35,560
Let's go back.

35
00:02:35,660 --> 00:02:35,990
All right.

36
00:02:35,990 --> 00:02:40,780
And then finally we had to deploy this site by running NPM run deploy.

37
00:02:41,720 --> 00:02:42,590
So let's do that.

38
00:02:42,590 --> 00:02:50,190
Let me save and then and here do let's clear this.

39
00:02:50,240 --> 00:02:52,010
Do NPM run

40
00:02:55,240 --> 00:02:56,470
which is this script.

41
00:02:56,500 --> 00:02:59,580
And remember the pre deploys going to be run before it.

42
00:02:59,710 --> 00:03:04,900
So if I run this it looks like I have an error in my Jason package.

43
00:03:04,900 --> 00:03:06,130
Let's see.

44
00:03:06,130 --> 00:03:07,520
What am I missing here.

45
00:03:07,520 --> 00:03:10,570
Well I have a comma at the end here which I don't need.

46
00:03:10,570 --> 00:03:15,720
Let's run that again.

47
00:03:15,750 --> 00:03:18,880
You see that the build folder was just created.

48
00:03:18,960 --> 00:03:21,360
It's creating an optimized production built.

49
00:03:21,600 --> 00:03:28,370
That's great and there we have it our project is now published.

50
00:03:28,370 --> 00:03:38,910
Now all we have to do is go back to our repository go to settings and if we scroll all the way down

51
00:03:39,120 --> 00:03:47,670
to get hub pages we have to change the source to get hub pages branch.

52
00:03:47,680 --> 00:03:53,620
Now you might have to wait a couple of minutes or even refresh the page to make sure that the changes

53
00:03:53,620 --> 00:03:55,010
have been applied.

54
00:03:55,300 --> 00:04:03,740
And if all goes well remember we're selecting the github pages branch and I click on this link and I

55
00:04:03,740 --> 00:04:04,820
refresh.

56
00:04:04,820 --> 00:04:05,840
There you go.

57
00:04:05,840 --> 00:04:16,950
Our robo friends app is now live at this U.R.L. so I can just copy this your URL go to my project click

58
00:04:17,760 --> 00:04:26,200
edit and then add our Web site right here so next time anybody comes and checks out our repository they

59
00:04:26,200 --> 00:04:29,470
can just click here to see the live project.

60
00:04:29,470 --> 00:04:30,980
How cool is that.

61
00:04:31,060 --> 00:04:39,600
Nice and simple and just like that we have a production ready app because remember create react app

62
00:04:39,960 --> 00:04:46,690
for us optimizes everything and keeps everything really really tiny for production.

63
00:04:46,710 --> 00:04:54,090
Our JavaScript files while they're minimized they look very small and well nothing like we had before

64
00:04:54,150 --> 00:05:03,870
with containers and components all of that because we use create react app gets optimized for production

65
00:05:05,410 --> 00:05:09,910
congratulations go show off to your friends I'll see in the next one maybe.