1
00:00:00,120 --> 00:00:02,370
Hello and welcome to this video.

2
00:00:02,400 --> 00:00:10,770
In this video, I'm going to be publishing the application to get pages so that anyone who has a link

3
00:00:11,070 --> 00:00:15,780
to the application can interact with the application.

4
00:00:15,780 --> 00:00:24,240
We're going to publish the code we have on our remote GitHub repository using GitHub pages.

5
00:00:24,240 --> 00:00:29,750
So once you have your repository open, there is a tab for settings.

6
00:00:29,760 --> 00:00:35,900
Click on that and then on the right here, just scroll down until you see the option for pages.

7
00:00:35,910 --> 00:00:43,200
Click on that and then here Waze says no and click on the dropdown and then you have to select the name

8
00:00:43,200 --> 00:00:44,120
of the branch.

9
00:00:44,130 --> 00:00:52,320
So the name of the branch that contains the code is called main and then make sure you have root selected

10
00:00:52,320 --> 00:00:53,610
is very important.

11
00:00:53,790 --> 00:01:00,270
Once you've got that selected, just click on the Save button and that will pull all your code from

12
00:01:00,270 --> 00:01:04,190
your remote repository on GitHub to GitHub pages.

13
00:01:04,200 --> 00:01:08,250
So it says here your site is ready to be published.

14
00:01:08,280 --> 00:01:16,080
He may take a few minutes for the site to be online, so if you check the link, the first time is not

15
00:01:16,080 --> 00:01:16,500
online.

16
00:01:16,530 --> 00:01:17,440
Don't worry about it.

17
00:01:17,460 --> 00:01:22,930
Just check it a few minutes later, so we may take a while to get being fully initialized.

18
00:01:22,950 --> 00:01:26,250
So this is the link to the application.

19
00:01:26,250 --> 00:01:32,520
So I'm going to click on that and see if it's actually ready so you can see the application is ready.

20
00:01:32,550 --> 00:01:33,710
So this is the link.

21
00:01:33,720 --> 00:01:41,700
So if I give anyone this link, they will be able to access this app and interact with it.

22
00:01:41,730 --> 00:01:46,620
So this is running on an T.P.S. connection.

23
00:01:46,740 --> 00:01:52,650
I'm going to generate a report from where the app is running from.

24
00:01:52,830 --> 00:01:54,180
That's the link address.

25
00:01:54,180 --> 00:01:55,440
So I click Generate.

26
00:01:55,470 --> 00:02:02,400
So the report has been generated from this link address, which is where the app is running from.

27
00:02:02,820 --> 00:02:07,200
Looks like there might be some issues I click on the option for progressive web app.

28
00:02:07,320 --> 00:02:13,410
Notice The ability to install the app option is great now that we can see this red triangle here, which

29
00:02:13,410 --> 00:02:21,000
indicates there is an issue, says the web app Manifest or service worker to not meet the instability

30
00:02:21,000 --> 00:02:23,880
requirements if you click on the reason here.

31
00:02:24,060 --> 00:02:26,250
Click on the link here to tell you why.

32
00:02:26,280 --> 00:02:33,060
But I think I know the reason why, so I'm going to head over to my manifest file.

33
00:02:33,090 --> 00:02:39,810
So this is my manifest file for my deployment to GitHub.

34
00:02:40,320 --> 00:02:46,230
And if we look on line number five, this URL is pointing to local hosts.

35
00:02:46,320 --> 00:02:52,620
This is not running from local hosts, is running from GitHub pages, so I need to do I need to add

36
00:02:52,620 --> 00:02:55,130
the link from the application here.

37
00:02:55,140 --> 00:03:01,950
So if copied the link from the application URL and add it here on line number five.

38
00:03:01,950 --> 00:03:09,750
So I'm just going to save the changes I just made to that to check the status of the files in my repository

39
00:03:09,750 --> 00:03:11,500
to see if anything has changed.

40
00:03:11,520 --> 00:03:14,610
I type in the command gate space status.

41
00:03:14,730 --> 00:03:15,900
I press enter.

42
00:03:16,050 --> 00:03:22,140
So you can see here tells me that I have modified the Manifest adjacent file.

43
00:03:22,140 --> 00:03:28,560
So what I need to do is add the modified file, which is a manifesto.

44
00:03:28,560 --> 00:03:37,470
Jason, I need to add that back into the repository committed and then push it up to the remote repository

45
00:03:37,470 --> 00:03:38,520
on GitHub.

46
00:03:38,550 --> 00:03:47,670
So to add the file with Taiping Gate Space, add space, manifest JSON press enter and we need to commit

47
00:03:47,970 --> 00:03:48,570
the file.

48
00:03:48,600 --> 00:03:55,710
If we type in gates both status again and press enter, we can see that the file has turned green in

49
00:03:55,710 --> 00:03:59,550
text color, which means that it's in the staging area.

50
00:03:59,940 --> 00:04:04,100
So the next step is to committed to the repository.

51
00:04:04,110 --> 00:04:10,920
So to commit the changes I've typed in the Command Gate Space Command, Dash Dash is a message flag

52
00:04:11,280 --> 00:04:16,920
and this is a message that will go along with the commit once you've Typekit and press enter.

53
00:04:17,220 --> 00:04:22,670
You can see here says it has done the insertion, so the file has been committed.

54
00:04:22,680 --> 00:04:28,050
If I type in space status, it should be clear there should be nothing you can see here is not nothing

55
00:04:28,060 --> 00:04:28,760
to commit.

56
00:04:28,770 --> 00:04:29,880
Everything is clean.

57
00:04:29,880 --> 00:04:34,770
So I need to push the change I've made to the remote repository on GitHub.

58
00:04:34,770 --> 00:04:41,250
So I type the command, get space push, dash use based origin space main and press enter.

59
00:04:41,670 --> 00:04:49,770
You have to enter your GitHub username and then your access token, so I've entered my username.

60
00:04:49,800 --> 00:04:54,720
Next, I need to enter my personal access token for the password.

61
00:04:54,750 --> 00:04:59,850
After entering my personal access token, we can see here that it has reached.

62
00:04:59,930 --> 00:05:04,310
In that change, I'm pushed it to the remote repository.

63
00:05:04,490 --> 00:05:11,670
If we take a look the remote repository on GitHub, we can see here what's called a manifesto JSON file.

64
00:05:11,690 --> 00:05:17,390
This is the commit message that I did when I committed the updated file.

65
00:05:17,390 --> 00:05:23,350
To now, I should be able to refresh the website and those changes should reflect there.

66
00:05:23,450 --> 00:05:29,480
So if we took a look at the development console on the Lighthouse, you can see we now have a green

67
00:05:29,480 --> 00:05:34,970
tick next to progressive web app, which indicates that the app is not installable.

68
00:05:35,000 --> 00:05:36,590
You can see that has turned green.

69
00:05:36,770 --> 00:05:44,720
I'm going to install the app on my desktop for easy access so you can install it on any device that

70
00:05:44,720 --> 00:05:46,190
is being used to view the app.

71
00:05:46,190 --> 00:05:53,210
To install the app, you can either use this dropdown arrow and click on it or in your web browser.

72
00:05:53,330 --> 00:05:56,210
There is this three dots here on Chrome.

73
00:05:56,600 --> 00:06:00,790
Click on it and you have the option to install to do list up.

74
00:06:00,800 --> 00:06:07,940
So click on that and you get this popup and you can see here tells you the link address or click install.

75
00:06:07,970 --> 00:06:09,310
And that will install it.

76
00:06:09,320 --> 00:06:10,820
So this is the app.

77
00:06:10,980 --> 00:06:15,160
You can see the address, which is where the app is running from.

78
00:06:15,170 --> 00:06:20,080
I now have two icons for my app on my desktop.

79
00:06:20,090 --> 00:06:24,920
The first one here is running from my local machine.

80
00:06:24,950 --> 00:06:30,080
So if I click on that, you can see that the address is local host.

81
00:06:30,380 --> 00:06:34,250
The second one here is running from GitHub pages.

82
00:06:34,250 --> 00:06:37,820
You can see the address here tells you where it is running from.

83
00:06:37,850 --> 00:06:47,750
I have renamed the icons for my app to make it easy for me to identify, so I've called one remote an

84
00:06:47,780 --> 00:06:49,520
app called One Local.

85
00:06:49,610 --> 00:06:51,390
So that's it for this video.

86
00:06:51,410 --> 00:07:00,830
In this video, I deploy the app to GitHub pages for hosting so that anyone who has a link to this app

87
00:07:00,830 --> 00:07:06,140
anywhere in the world with an internet connection can interact with the app.

88
00:07:06,170 --> 00:07:07,550
Thank you so much for watching.

89
00:07:07,790 --> 00:07:08,600
Bye for now.