1 00:00:01,170 --> 00:00:04,530 ‫So let's start with a very easy way 2 00:00:04,530 --> 00:00:06,960 ‫of deploying our application 3 00:00:06,960 --> 00:00:11,853 ‫by simply uploading it to a free service called Netlify. 4 00:00:13,920 --> 00:00:15,330 ‫But first of all, 5 00:00:15,330 --> 00:00:19,473 ‫we actually need to first go back to our login form, 6 00:00:20,340 --> 00:00:22,980 ‫so right here in the authentication folder, 7 00:00:22,980 --> 00:00:27,240 ‫because here we actually left our credentials 8 00:00:27,240 --> 00:00:29,640 ‫in the default state. 9 00:00:29,640 --> 00:00:31,773 ‫So let's of course clean this. 10 00:00:32,910 --> 00:00:37,380 ‫Otherwise everyone could just log into our application. 11 00:00:37,380 --> 00:00:40,170 ‫So very important step here first, 12 00:00:40,170 --> 00:00:42,720 ‫but now with that step done 13 00:00:42,720 --> 00:00:47,400 ‫it is time to build our actual application bundle. 14 00:00:47,400 --> 00:00:49,740 ‫So remember how we learned earlier 15 00:00:49,740 --> 00:00:52,680 ‫that our development tool, so in this case, 16 00:00:52,680 --> 00:00:57,680 ‫that Vite will take all the files that we have created here 17 00:00:58,110 --> 00:01:00,960 ‫during development and will all bundle them 18 00:01:00,960 --> 00:01:02,850 ‫into one single file. 19 00:01:02,850 --> 00:01:07,020 ‫And so that file is what we then deploy to production. 20 00:01:07,020 --> 00:01:08,490 ‫So not just that file 21 00:01:08,490 --> 00:01:11,403 ‫but really the output that we will get here. 22 00:01:12,450 --> 00:01:17,450 ‫So with Vite, that command, and instead of just telling you 23 00:01:17,820 --> 00:01:20,220 ‫we can actually read that here. 24 00:01:20,220 --> 00:01:22,203 ‫And so we have it right here. 25 00:01:23,310 --> 00:01:28,310 ‫So in our terminal, let's run NPM run build. 26 00:01:29,640 --> 00:01:32,148 ‫And we actually already did this earlier 27 00:01:32,148 --> 00:01:37,148 ‫with the World Wise application, right? 28 00:01:38,310 --> 00:01:40,533 ‫And now here we have a few issues. 29 00:01:41,760 --> 00:01:44,880 ‫So like all of these ES lint warnings. 30 00:01:44,880 --> 00:01:47,070 ‫So maybe let's go check this out. 31 00:01:47,070 --> 00:01:52,070 ‫So in the cabin row we have something, 32 00:01:54,960 --> 00:01:59,760 ‫so apparently we have this variable that we're not using 33 00:01:59,760 --> 00:02:01,950 ‫so maybe we should. 34 00:02:01,950 --> 00:02:05,373 ‫So let's see where we use this function actually. 35 00:02:07,140 --> 00:02:10,233 ‫And so down here there's probably some button, 36 00:02:11,220 --> 00:02:12,720 ‫yeah, this one right here. 37 00:02:12,720 --> 00:02:14,970 ‫So since we are already here 38 00:02:14,970 --> 00:02:19,847 ‫let's just simply disable it whenever we are creating. 39 00:02:24,990 --> 00:02:27,310 ‫All right, so we fixed that 40 00:02:28,530 --> 00:02:30,880 ‫and there is something in our sales chart 41 00:02:31,770 --> 00:02:36,770 ‫so we can actually click there with command or control. 42 00:02:36,810 --> 00:02:37,953 ‫And so let's see. 43 00:02:38,880 --> 00:02:42,360 ‫So here we are importing this function we don't need. 44 00:02:42,360 --> 00:02:46,530 ‫So let's clear that and we can also actually 45 00:02:46,530 --> 00:02:51,530 ‫remove this fake data that we no longer need. 46 00:02:52,740 --> 00:02:56,493 ‫Then let's see if we have something else and apparently not. 47 00:02:58,080 --> 00:03:03,080 ‫So let's clear this and let's run NPM build again. 48 00:03:06,780 --> 00:03:07,863 ‫And there we go. 49 00:03:08,940 --> 00:03:12,480 ‫Now, okay, so we have this one bundle here 50 00:03:12,480 --> 00:03:15,210 ‫which is indeed pretty huge, 51 00:03:15,210 --> 00:03:18,810 ‫as we can see in this warning here from Vite. 52 00:03:18,810 --> 00:03:22,200 ‫Now, in an earlier project, and I think it was 53 00:03:22,200 --> 00:03:25,950 ‫in the World Wise Project, we actually did code splitting 54 00:03:25,950 --> 00:03:28,470 ‫in order to avoid this problem. 55 00:03:28,470 --> 00:03:31,650 ‫However, this application will be fully hidden 56 00:03:31,650 --> 00:03:33,270 ‫behind a login, 57 00:03:33,270 --> 00:03:38,270 ‫and also only a few users will ever use this application 58 00:03:38,430 --> 00:03:42,450 ‫which remember is also the reason why we're not 59 00:03:42,450 --> 00:03:45,180 ‫doing server side rendering as well. 60 00:03:45,180 --> 00:03:49,500 ‫And so in this situation, this is actually perfectly fine. 61 00:03:49,500 --> 00:03:53,013 ‫And also we already learned how to do this. 62 00:03:54,660 --> 00:03:57,810 ‫So let's close all of this 63 00:03:57,810 --> 00:04:00,300 ‫and let's see what we actually got. 64 00:04:00,300 --> 00:04:04,140 ‫So the folder that was created is this dist 65 00:04:04,140 --> 00:04:05,610 ‫folder right here. 66 00:04:05,610 --> 00:04:07,170 ‫So here we have the assets 67 00:04:07,170 --> 00:04:11,220 ‫which is that huge JavaScript bundle. 68 00:04:11,220 --> 00:04:16,220 ‫So that one or almost one megabyte of JavaScript. 69 00:04:16,590 --> 00:04:18,600 ‫And then we have the HTML 70 00:04:18,600 --> 00:04:21,993 ‫and all the images that are necessary. 71 00:04:23,850 --> 00:04:27,510 ‫All right, and so now we are ready to take this folder 72 00:04:27,510 --> 00:04:29,610 ‫and deploy it to that service 73 00:04:29,610 --> 00:04:32,433 ‫that I mentioned earlier called Netlify. 74 00:04:35,730 --> 00:04:40,110 ‫So let's go to netlify.com, which is one 75 00:04:40,110 --> 00:04:43,230 ‫of the many hosting providers where you can very 76 00:04:43,230 --> 00:04:48,230 ‫easily host React projects no matter how large they are. 77 00:04:48,360 --> 00:04:51,480 ‫Now, this website here changes all the time 78 00:04:51,480 --> 00:04:54,660 ‫but what you need to do is just to sign up 79 00:04:54,660 --> 00:04:57,000 ‫for your own account. 80 00:04:57,000 --> 00:05:00,240 ‫So here you can sign up with any of these services. 81 00:05:00,240 --> 00:05:03,453 ‫And then once you're done doing that, I meet you back here. 82 00:05:04,770 --> 00:05:08,220 ‫So as soon as you're logged into Netlify 83 00:05:08,220 --> 00:05:11,400 ‫your dashboard should look something like this. 84 00:05:11,400 --> 00:05:15,510 ‫Or maybe in the future they will have changed it again. 85 00:05:15,510 --> 00:05:19,590 ‫But basically all we need to do is to come here 86 00:05:19,590 --> 00:05:23,610 ‫or also we can select this site options here, 87 00:05:23,610 --> 00:05:27,780 ‫and then we can create a new site simply with this option 88 00:05:27,780 --> 00:05:30,150 ‫of deploying manually. 89 00:05:30,150 --> 00:05:33,630 ‫And as you can see, I actually host all of my like 90 00:05:33,630 --> 00:05:36,840 ‫demo projects here and even my personal website. 91 00:05:36,840 --> 00:05:40,530 ‫So I really like the service and use it myself 92 00:05:40,530 --> 00:05:44,643 ‫and they're not paying me to tell you about this. 93 00:05:45,900 --> 00:05:47,610 ‫So let's click there. 94 00:05:47,610 --> 00:05:50,430 ‫And now all we have to do is really drag 95 00:05:50,430 --> 00:05:55,203 ‫and drop that folder that Vite built for us earlier. 96 00:05:57,600 --> 00:06:01,890 ‫So that's this dist folder right here. 97 00:06:01,890 --> 00:06:05,880 ‫But actually there is something that we still need to do. 98 00:06:05,880 --> 00:06:09,540 ‫So I was thinking about doing that later, but let's actually 99 00:06:09,540 --> 00:06:12,810 ‫do it immediately because otherwise, our single page 100 00:06:12,810 --> 00:06:16,023 ‫application is not going to work on Netlify. 101 00:06:16,980 --> 00:06:21,210 ‫So let's first come back to VS code, and then 102 00:06:21,210 --> 00:06:25,260 ‫in the dist folder I need you to create a new file 103 00:06:25,260 --> 00:06:30,260 ‫called Netlify.toml, which is like some special data format. 104 00:06:33,870 --> 00:06:37,320 ‫And then here you need square brackets two times, 105 00:06:37,320 --> 00:06:39,813 ‫then redirects, 106 00:06:41,400 --> 00:06:42,670 ‫and then from 107 00:06:46,050 --> 00:06:50,583 ‫dist URL to index.html. 108 00:06:56,774 --> 00:06:59,857 ‫And then with the status code of 200. 109 00:07:02,190 --> 00:07:05,940 ‫And let's actually also copy this file here 110 00:07:05,940 --> 00:07:10,940 ‫into our main folder so that we don't lose it 111 00:07:11,070 --> 00:07:14,400 ‫in case we need to build our application again. 112 00:07:14,400 --> 00:07:16,740 ‫So then this folder would be recreated 113 00:07:16,740 --> 00:07:19,260 ‫and that file would be lost. 114 00:07:19,260 --> 00:07:21,750 ‫And it would actually be even better 115 00:07:21,750 --> 00:07:25,290 ‫if you pasted this file into the public folder. 116 00:07:25,290 --> 00:07:28,080 ‫Because then it will automatically be copied 117 00:07:28,080 --> 00:07:31,983 ‫into the dist folder each time that you create a new build. 118 00:07:33,030 --> 00:07:36,540 ‫Okay, so now here we have that important file. 119 00:07:36,540 --> 00:07:39,596 ‫And so now we can indeed grab the entire folder 120 00:07:39,596 --> 00:07:42,810 ‫and just drop it here. 121 00:07:42,810 --> 00:07:45,840 ‫So that's gonna take some time uploading everything 122 00:07:45,840 --> 00:07:50,733 ‫and once they're done, and so that was pretty fast, 123 00:07:51,660 --> 00:07:55,950 ‫then we can click here, so open our production deploy. 124 00:07:55,950 --> 00:08:00,950 ‫And then here is our application live on a web server. 125 00:08:02,160 --> 00:08:05,103 ‫So let's see if we can still log in. 126 00:08:06,150 --> 00:08:10,020 ‫So let's do test@test.com, 127 00:08:10,020 --> 00:08:13,053 ‫and you of course need to use your own credentials. 128 00:08:14,040 --> 00:08:16,020 ‫And beautiful. 129 00:08:16,020 --> 00:08:19,290 ‫So here is our application ready to be shared 130 00:08:19,290 --> 00:08:21,300 ‫with the entire world. 131 00:08:21,300 --> 00:08:24,750 ‫And again, by default, we got our dark mode. 132 00:08:24,750 --> 00:08:27,660 ‫At least I got because that's the default 133 00:08:27,660 --> 00:08:29,553 ‫on my operating system. 134 00:08:30,840 --> 00:08:32,700 ‫And here, let's just see. 135 00:08:32,700 --> 00:08:35,790 ‫And indeed everything works just exactly 136 00:08:35,790 --> 00:08:38,550 ‫in the same way as before. 137 00:08:38,550 --> 00:08:40,320 ‫So that's so great. 138 00:08:40,320 --> 00:08:43,620 ‫Now you can send this URL here to anyone, 139 00:08:43,620 --> 00:08:47,070 ‫and then anyone can see the nice application 140 00:08:47,070 --> 00:08:48,630 ‫that you have built, 141 00:08:48,630 --> 00:08:51,783 ‫at least if you also give them your credentials. 142 00:08:53,460 --> 00:08:57,660 ‫But anyway, this URL here is not really that 143 00:08:57,660 --> 00:09:00,180 ‫nice to be shared, right? 144 00:09:00,180 --> 00:09:02,343 ‫And so we can actually change this. 145 00:09:04,050 --> 00:09:07,680 ‫So let's come here to the site's overview now. 146 00:09:07,680 --> 00:09:09,750 ‫And so then here is that URL. 147 00:09:09,750 --> 00:09:11,700 ‫And here in the site settings 148 00:09:11,700 --> 00:09:14,160 ‫we can then change the site name. 149 00:09:14,160 --> 00:09:18,540 ‫And so I will now change it to the Wild Oasis 150 00:09:19,890 --> 00:09:22,410 ‫which will then give me the Wild Oasis 151 00:09:22,410 --> 00:09:25,863 ‫on this .Netlify.app subdomain. 152 00:09:26,850 --> 00:09:29,580 ‫So let's see if this is still available. 153 00:09:29,580 --> 00:09:31,170 ‫And it is. 154 00:09:31,170 --> 00:09:34,680 ‫So for you, it will now no longer be available 155 00:09:34,680 --> 00:09:37,260 ‫but then you can just use your own name 156 00:09:37,260 --> 00:09:38,940 ‫or something like that. 157 00:09:38,940 --> 00:09:43,440 ‫And so now we have this really nice looking URL right here. 158 00:09:43,440 --> 00:09:45,990 ‫And if you wanted, you could of course then 159 00:09:45,990 --> 00:09:50,990 ‫buy your own domain name and then also add that there. 160 00:09:52,890 --> 00:09:54,720 ‫And here it is. 161 00:09:54,720 --> 00:09:58,230 ‫So again, here you can set your own domain if you want 162 00:09:58,230 --> 00:10:01,500 ‫and if you wanted to now change something, 163 00:10:01,500 --> 00:10:05,070 ‫so if you want to update something in your application 164 00:10:05,070 --> 00:10:07,800 ‫you would just change the code here, 165 00:10:07,800 --> 00:10:10,650 ‫then run the build command again manually 166 00:10:10,650 --> 00:10:13,230 ‫exactly like we did here earlier. 167 00:10:13,230 --> 00:10:16,890 ‫And then don't forget to add back this Netlify file. 168 00:10:16,890 --> 00:10:20,223 ‫And then finally, once you're done, you can, 169 00:10:21,390 --> 00:10:22,803 ‫oh let's see where that is. 170 00:10:24,270 --> 00:10:26,130 ‫Yeah, so right here in deploys 171 00:10:26,130 --> 00:10:29,700 ‫you can then just drag and drop that folder here again. 172 00:10:29,700 --> 00:10:33,750 ‫And so then that will redeploy your application. 173 00:10:33,750 --> 00:10:35,940 ‫And that's actually it. 174 00:10:35,940 --> 00:10:38,370 ‫So this is the very easy way 175 00:10:38,370 --> 00:10:41,730 ‫of very quickly getting your site up and running 176 00:10:41,730 --> 00:10:46,140 ‫on a real domain ready to be shared with the world. 177 00:10:46,140 --> 00:10:49,350 ‫Now, if you want more of a real world approach 178 00:10:49,350 --> 00:10:53,400 ‫then you would use something called continuous integration. 179 00:10:53,400 --> 00:10:56,430 ‫And for that, you will have to upload your code 180 00:10:56,430 --> 00:10:59,790 ‫into a GitHub repository and then connect 181 00:10:59,790 --> 00:11:04,350 ‫that repository with your deploy right here. 182 00:11:04,350 --> 00:11:06,510 ‫So here in Netlify or also 183 00:11:06,510 --> 00:11:09,150 ‫in some other service like Vercel. 184 00:11:09,150 --> 00:11:11,760 ‫And so in order to show you how to do that 185 00:11:11,760 --> 00:11:13,680 ‫in the next lecture, we will set up 186 00:11:13,680 --> 00:11:17,703 ‫a Git repository and upload your code to GitHub.