1 00:00:00,720 --> 00:00:01,410 Okay. 2 00:00:01,440 --> 00:00:03,030 Hello, everyone, and welcome. 3 00:00:03,060 --> 00:00:07,410 So now we are going to host our website live on Firebase. 4 00:00:08,010 --> 00:00:11,400 So now we are done with the coding part and everything. 5 00:00:11,410 --> 00:00:18,450 So let me just stop the server and let's go to the browser and let's go to the website of Firebase. 6 00:00:18,450 --> 00:00:25,680 So now I'm on the Firebase server side, so you can just Google Firebase and just come to this website 7 00:00:25,680 --> 00:00:28,290 that is considered a Firebase Dart Google.com. 8 00:00:28,290 --> 00:00:30,120 As you all know, it's a Google product. 9 00:00:30,750 --> 00:00:36,330 So after coming to this website, just click on Create Project and just name. 10 00:00:36,420 --> 00:00:37,410 Just name your project. 11 00:00:37,410 --> 00:00:40,110 Maybe what is food? 12 00:00:40,110 --> 00:00:43,110 Or maybe a recipe? 13 00:00:45,760 --> 00:00:46,150 Hub. 14 00:00:48,340 --> 00:00:49,180 Recipe hub. 15 00:00:52,460 --> 00:00:56,100 Recipe hub and I accept their terms. 16 00:00:56,120 --> 00:01:06,050 Let me just press continue, and now we are here and it says, do you want to enable Google Analytics 17 00:01:06,050 --> 00:01:06,620 for your project? 18 00:01:06,630 --> 00:01:11,330 So I will choose Norm because now we are only interested in hosting. 19 00:01:11,900 --> 00:01:15,050 So we'll now click on the Create Project button. 20 00:01:15,440 --> 00:01:16,010 So. 21 00:01:17,300 --> 00:01:24,260 See, creating your project, please wait, so this is creating a project, so this will take few seconds, 22 00:01:24,260 --> 00:01:25,550 not more than a few seconds. 23 00:01:26,240 --> 00:01:30,350 So just wait till it's done. 24 00:01:43,390 --> 00:01:50,500 OK, so our project is ready to be hub and your new project is ready, it shows this when you show this, 25 00:01:50,500 --> 00:01:52,000 we need to just click on Continue. 26 00:01:52,660 --> 00:02:02,950 And after continuing, you will go to this page and what you need to do is you need to click on this 27 00:02:03,310 --> 00:02:03,670 web. 28 00:02:06,320 --> 00:02:06,980 And. 29 00:02:08,740 --> 00:02:10,270 Or you can just go to. 30 00:02:12,940 --> 00:02:15,550 Some things have changed since I last used it. 31 00:02:17,460 --> 00:02:23,760 And now you need to give an apt name, because now we are registering it to our Firebase application, 32 00:02:24,060 --> 00:02:25,800 so it will be. 33 00:02:26,960 --> 00:02:27,980 Recipe. 34 00:02:29,410 --> 00:02:35,380 I've also set up our base hosting, of course, we want to set up Firebase hosting the app. 35 00:02:36,980 --> 00:02:43,310 And it will take few seconds, not more than a few seconds, I guess. 36 00:02:44,750 --> 00:02:47,220 Oh, OK, OK, OK, OK. 37 00:02:47,240 --> 00:02:54,020 If you are already using npm and I'm more as that back, or you can run the following command to install 38 00:02:54,500 --> 00:02:58,520 the latest SDK and BAM install Firebase because we have not yet. 39 00:02:59,670 --> 00:03:05,100 We have not yet installed fire based on our terminals, so you have to just copy this, and if you already 40 00:03:05,100 --> 00:03:06,540 have fired, it was installed, no problem. 41 00:03:06,540 --> 00:03:11,620 But if you don't, you know, just go to your terminal and copy this command and based desk. 42 00:03:11,640 --> 00:03:13,710 Let me just go and do it. 43 00:03:15,890 --> 00:03:17,540 And install Firebase. 44 00:03:19,630 --> 00:03:21,760 So this will take a few seconds. 45 00:03:22,120 --> 00:03:25,930 Then we can just go to the web site and check out what is next. 46 00:03:26,050 --> 00:03:29,770 So then and in slow spirals and begin using the case. 47 00:03:30,550 --> 00:03:34,770 OK, this option uses modular JavaScript installed to together. 48 00:03:35,260 --> 00:03:41,470 We can just skip this part, maybe, or we can just copy it for further uses. 49 00:03:41,740 --> 00:03:43,150 Next, we'll go to next. 50 00:03:45,010 --> 00:03:50,980 And install fire tools to host your side with Firebase hosting you too. 51 00:03:51,550 --> 00:03:58,600 You need a Firebase light so far this your light is not out there on our communal so that also we will 52 00:03:58,600 --> 00:03:59,160 install. 53 00:03:59,170 --> 00:04:02,530 Once that is done, we will install this thing. 54 00:04:06,180 --> 00:04:08,760 What is the status on the Brown Navy escort? 55 00:04:09,870 --> 00:04:11,340 Staking few seconds. 56 00:04:12,990 --> 00:04:14,700 We have installed Firebase. 57 00:04:15,970 --> 00:04:19,000 Because it's been a while since I've used Firebase. 58 00:04:29,580 --> 00:04:37,140 This will take time according to your speed, like your internet connection, so it can take a little 59 00:04:37,140 --> 00:04:37,500 time. 60 00:04:45,920 --> 00:04:48,860 OK, so it's done, it's done installing solar. 61 00:04:49,040 --> 00:04:51,830 Now let me check if that works by amazing. 62 00:04:51,850 --> 00:04:52,070 Next. 63 00:04:53,030 --> 00:05:01,380 So I hope the Climeworks, I'm not really sure about this because we might have to command not found. 64 00:05:01,400 --> 00:05:10,500 OK, so I was expecting this to happen, but now what we need to do is we need to install, Okay. 65 00:05:10,550 --> 00:05:11,810 What is that? 66 00:05:13,570 --> 00:05:14,570 What happened to Martin? 67 00:05:14,660 --> 00:05:15,740 Now we need to install. 68 00:05:16,690 --> 00:05:17,710 Why does that man? 69 00:05:19,670 --> 00:05:22,190 We need to install Firebase by providing this. 70 00:05:23,650 --> 00:05:33,910 This command right here, it is this and install Firebase tools and on site it was not visible, it 71 00:05:33,910 --> 00:05:35,140 was it wasn't visible. 72 00:05:37,930 --> 00:05:43,660 Oh, it wasn't visible or even my screen is missing. 73 00:05:44,070 --> 00:05:44,390 OK. 74 00:05:44,480 --> 00:05:49,240 Installed file, so we will use this command to install damage to our terminal. 75 00:05:49,240 --> 00:05:50,290 So we'll copy this. 76 00:05:50,960 --> 00:05:53,230 We'll go back to our terminal and. 77 00:05:54,340 --> 00:05:56,140 We just installed this. 78 00:05:57,490 --> 00:05:59,950 So this will take few seconds or maybe minutes. 79 00:06:07,450 --> 00:06:12,970 OK, so now Firebase Clia has been installed on a terminal, so before moving forward, one thing I 80 00:06:12,970 --> 00:06:16,830 need you to weigh is before getting any app into the production. 81 00:06:16,840 --> 00:06:21,370 What we do is we build it so we use to come on and beam. 82 00:06:23,750 --> 00:06:25,340 And PM, Ron. 83 00:06:26,930 --> 00:06:31,070 So this will create a bail folder in which the production ready things will be that. 84 00:06:31,580 --> 00:06:39,560 So don't forget to execute this command before opening a fire to clay or before pushing down to the 85 00:06:39,560 --> 00:06:40,190 fire base. 86 00:06:42,230 --> 00:06:46,850 So this will take maybe one minute or more than that or less than that. 87 00:06:47,330 --> 00:06:49,480 Totally depend on your speed of the computer. 88 00:06:52,530 --> 00:06:53,970 OK, so once you see this. 89 00:06:56,100 --> 00:06:58,950 This message that it will give you a link and everything. 90 00:06:59,340 --> 00:07:03,930 That means you have successfully made your project and you will also check this. 91 00:07:03,940 --> 00:07:08,160 You can also check this by checking on the left hand side that is a folded. 92 00:07:08,550 --> 00:07:11,930 So if there's a better folder, that means you have successfully build your projects. 93 00:07:11,970 --> 00:07:21,900 Now we log in to fight a firebase through our terminal, so I'll tap the command firebase and then logging. 94 00:07:23,720 --> 00:07:28,580 So this will also show us if Firebase is successfully installed or not. 95 00:07:29,460 --> 00:07:31,310 Oh yeah, yeah, yeah, yeah. 96 00:07:31,400 --> 00:07:37,280 Allow Firebase to Klebsiella using error reporting information, so I'll just enter. 97 00:07:38,470 --> 00:07:43,840 And waiting for authentication with this, you are also not want this, you are at least provided so 98 00:07:44,260 --> 00:07:46,300 you can just copy it and. 99 00:07:51,910 --> 00:07:54,220 No, no, no, no, no, no, no, no, no. 100 00:07:56,980 --> 00:08:02,290 So what you need to do is just open this so you are in your browser, and when you go to your browser, 101 00:08:02,290 --> 00:08:10,090 it will open something like this, then you need to just allow and it will open Firebase console Wahoo 102 00:08:10,090 --> 00:08:11,950 Firebase to a successful log in. 103 00:08:11,970 --> 00:08:13,930 Now we need to go to this. 104 00:08:14,590 --> 00:08:15,190 Yeah, you can. 105 00:08:15,190 --> 00:08:20,860 You will see the message, so you need to just clear the screen and that you need to just run the command 106 00:08:21,220 --> 00:08:27,520 Firebase Connect and this will initialize Firebase and. 107 00:08:29,100 --> 00:08:35,100 It will take few seconds because it's loading for the first time, you can see Fire Michaela is here. 108 00:08:35,470 --> 00:08:42,080 Now we'll go to Boston and now we you can navigate through arrow keys, remember? 109 00:08:42,590 --> 00:08:51,900 So now you can go to Boston and then the spacebar to select hosting and then you have to just click 110 00:08:51,900 --> 00:08:57,030 enter and you will use an existing project to use an existing product. 111 00:08:57,060 --> 00:09:00,300 Yes, use an existing project recipe hub. 112 00:09:00,510 --> 00:09:06,420 As you can see that there's only one project recipe you can just click and tap because if you have more 113 00:09:06,420 --> 00:09:08,010 than one product, so it will show you. 114 00:09:11,160 --> 00:09:14,550 So then you need to navigate to the project, which you want to connect. 115 00:09:14,910 --> 00:09:15,150 Right. 116 00:09:15,630 --> 00:09:21,630 So right now, we have only one project with this account, so you will just select one and you don't 117 00:09:21,630 --> 00:09:23,400 even need to select the unit to just hit enter. 118 00:09:24,060 --> 00:09:27,180 And using Project Recipe Hub. 119 00:09:27,720 --> 00:09:30,590 And now this is a really crucial part here. 120 00:09:30,900 --> 00:09:34,680 It is a question that what do you want to use as your public directory? 121 00:09:35,010 --> 00:09:38,160 So don't put the public directory. 122 00:09:38,160 --> 00:09:42,060 Don't put okay, I made a mistake. 123 00:09:42,360 --> 00:09:45,930 The screen was not visible to. 124 00:09:47,560 --> 00:09:50,820 I'll tell you, I'll tell you, I'll repeat, I'll repeat everything. 125 00:09:50,850 --> 00:09:53,430 I'm really I'm really sorry the skin was not visible. 126 00:09:53,460 --> 00:09:54,510 I'll repeat once again. 127 00:09:55,230 --> 00:10:03,840 So what we need to do is now we need to open Firebase by running this command, which is Firebase in 128 00:10:03,840 --> 00:10:04,020 it. 129 00:10:04,620 --> 00:10:13,020 Now, after running the fire, Bissonette, there will be there will be an option to like, ask like 130 00:10:13,800 --> 00:10:18,390 which there will be and there will be a list. 131 00:10:19,080 --> 00:10:26,100 So in that place, do you need to select hosting by going to by going to the hosting through the Rockies? 132 00:10:26,550 --> 00:10:31,320 Once you go on the events you raised to hosting, you need to press spacebar and then hit enter. 133 00:10:31,350 --> 00:10:35,010 So after that, you will get an option to. 134 00:10:36,550 --> 00:10:37,960 So here you will provide. 135 00:10:39,510 --> 00:10:41,100 The name of the public directory. 136 00:10:42,270 --> 00:10:42,870 So. 137 00:10:46,910 --> 00:10:51,640 So how do you provide the big wedding, not the public pool? 138 00:10:52,160 --> 00:10:56,570 Like many people do this mistake, they provide public but don't provide public or otherwise. 139 00:10:56,570 --> 00:10:58,460 You will not see your app running live. 140 00:10:58,820 --> 00:10:59,750 So just provide. 141 00:11:01,410 --> 00:11:01,760 Bill? 142 00:11:03,580 --> 00:11:04,330 And hit enter. 143 00:11:04,960 --> 00:11:09,280 And next to configure it as a single page app. 144 00:11:09,960 --> 00:11:19,360 So yes, it's a single page app and set up automatic bills, and it doesn't get to know and file already 145 00:11:19,360 --> 00:11:19,840 exists. 146 00:11:19,870 --> 00:11:20,590 All right. 147 00:11:23,300 --> 00:11:24,410 Maybe, yes. 148 00:11:24,620 --> 00:11:26,780 I can't remember what we put for this. 149 00:11:27,240 --> 00:11:30,230 We can just put no, don't override. 150 00:11:31,040 --> 00:11:32,000 So now. 151 00:11:33,230 --> 00:11:39,740 We can see that is Fighter B's daughter, R and Firebase Georgeson file already came up here and all 152 00:11:39,740 --> 00:11:42,940 you need to run Firebase Deploy. 153 00:11:43,820 --> 00:11:48,300 This is the final command for fighter deploy and then head enter. 154 00:11:49,310 --> 00:11:55,730 It will give a unique you are elevated on fire disaster, so this will take a few minutes or few seconds. 155 00:11:56,270 --> 00:11:58,190 This is the final step after this. 156 00:11:58,550 --> 00:12:04,550 After this, you will get the order you all and your app will be deployed to Firebase and you will get 157 00:12:04,580 --> 00:12:06,530 your battery life on the internet. 158 00:12:16,460 --> 00:12:26,150 Now you can see it has given us our hosting, you also let us copied and pasted in the browser and see 159 00:12:26,750 --> 00:12:30,320 if this app is still running online or not. 160 00:12:39,680 --> 00:12:47,720 So, yeah, it is coming because you can see the water is coming, so maybe it is taking some time. 161 00:12:48,090 --> 00:12:49,160 OK, boom. 162 00:12:49,160 --> 00:12:55,540 Finally, our app is supposed to live on fire because you can see that you are all you can share it 163 00:12:55,550 --> 00:12:59,680 with your friends, family, anyone and you can see our app is running. 164 00:12:59,730 --> 00:13:03,140 We can just use it for my door and hit enter. 165 00:13:03,470 --> 00:13:05,390 Maybe it will give us the recipe. 166 00:13:05,390 --> 00:13:09,260 And yes, it is working perfectly fine. 167 00:13:09,710 --> 00:13:12,200 And that is what we were expecting, guys. 168 00:13:12,440 --> 00:13:19,860 So now we have created our app from scratch or reject app using Xia's and styling is done with KSAZ. 169 00:13:19,880 --> 00:13:26,510 And finally, we have deployed it to Firebase, and I hope you have understood there were times when 170 00:13:26,900 --> 00:13:31,310 the screen was stuck at some places, but I explained everything again. 171 00:13:31,550 --> 00:13:37,190 I reviewed everything which was missed out because it takes some time to like, rectify that. 172 00:13:37,190 --> 00:13:38,570 The screen is stuck or not. 173 00:13:38,870 --> 00:13:44,090 So at some places the screen was stuck, I admitted, and I apologize for that. 174 00:13:44,090 --> 00:13:48,110 But as soon as I got to, I got to know that the screen is stuck. 175 00:13:48,350 --> 00:13:53,300 I repeated everything like whatever you have missed, so don't worry about it. 176 00:13:53,630 --> 00:13:55,760 And that's it for this project. 177 00:13:56,030 --> 00:13:59,090 Thank you so much and see you next one. 178 00:13:59,120 --> 00:13:59,570 Thank you.