1 00:00:00,840 --> 00:00:05,110 In the coming videos, I'm going to show you how to deploy a react application to a variety of different 2 00:00:05,110 --> 00:00:05,770 providers. 3 00:00:06,490 --> 00:00:10,900 I'm going to show how to deploy the YouTube app, but you can deploy any project we've built so far 4 00:00:10,900 --> 00:00:14,590 inside this course as long as it was built using create react app. 5 00:00:14,710 --> 00:00:17,710 The deployment process, I got to show you, is going to work just fine. 6 00:00:18,430 --> 00:00:22,060 So, again, you can play the YouTube app or any other one we've built so far. 7 00:00:22,960 --> 00:00:25,610 The first provider we're going to deploy with is called Virtual. 8 00:00:26,410 --> 00:00:31,930 We are starting off with Virge Cell to do a deployment just because it is so easy and quick to get started 9 00:00:32,710 --> 00:00:34,040 to deploy with Versed Cell. 10 00:00:34,120 --> 00:00:36,340 We're going to sign up for an account adverse Cellcom. 11 00:00:36,850 --> 00:00:40,030 We're then going to install the Ver cell selye onto our local machine. 12 00:00:40,450 --> 00:00:43,750 And then we will run one single command inside of our project directory. 13 00:00:44,260 --> 00:00:47,290 So let's give this a shot inside of a new browser tab. 14 00:00:47,350 --> 00:00:49,010 I will navigate to Verdell dot com. 15 00:00:49,810 --> 00:00:51,220 And it looks like I'm already signed in. 16 00:00:51,370 --> 00:00:52,630 Let me just sign out really quickly. 17 00:00:54,800 --> 00:00:56,960 Once here, you'll then find on the top right hand side. 18 00:00:57,050 --> 00:00:58,520 Either log in or sign up. 19 00:00:59,120 --> 00:01:01,130 I already have an account myself, so I'm going to log in. 20 00:01:01,970 --> 00:01:04,190 When you sign up with ver cell or log in. 21 00:01:04,280 --> 00:01:07,760 You're going to authenticate through GitHub, get lab or BitBucket. 22 00:01:07,960 --> 00:01:11,660 So you will need an account with one of these providers to continue. 23 00:01:12,500 --> 00:01:14,680 I'm going to sign in through my get hub account. 24 00:01:16,320 --> 00:01:18,240 Once you sign up, that's pretty much it. 25 00:01:18,540 --> 00:01:20,310 So we can now go back over to our terminal. 26 00:01:20,940 --> 00:01:25,080 We're going to install the verse Celsi Allai and then run one or two quick commands with it. 27 00:01:26,560 --> 00:01:30,910 So at my terminal, I'm going to navigate to my YouTube project directory. 28 00:01:31,420 --> 00:01:36,100 Make sure that you're inside of your YouTube project directory or any other of the projects we've built 29 00:01:36,100 --> 00:01:36,640 so far. 30 00:01:38,340 --> 00:01:43,850 Then inside of here at our terminal, we're going to run NPM, install Das G Bursill. 31 00:01:44,460 --> 00:01:47,650 This is going to install diverse cell CLIA onto your local machine. 32 00:01:48,390 --> 00:01:52,590 If you run this command in your own windows and you get an air, just make sure that you reopen your 33 00:01:52,590 --> 00:01:56,090 command prompt as an administrator and they can try running this command again. 34 00:01:57,790 --> 00:02:03,380 OK, so going to run that it installs very quickly, I'm then going to run one command to sign into 35 00:02:03,390 --> 00:02:10,090 herself through the CLIA, so I'm going to run BURSILL log in as soon as you run that command. 36 00:02:10,150 --> 00:02:12,010 You're going to enter your email address. 37 00:02:12,850 --> 00:02:13,660 That's really important. 38 00:02:13,720 --> 00:02:19,930 You need to enter the email address that is associated with the account or the provider that you just 39 00:02:19,930 --> 00:02:22,690 signed in over adverse Cellcom with. 40 00:02:22,900 --> 00:02:27,460 So in other words, you have to enter your GitHub or BitBucket or get lab email address. 41 00:02:28,400 --> 00:02:30,000 It's going to enter that and hit enter. 42 00:02:31,900 --> 00:02:34,060 And then going to be told that I was sent an e-mail. 43 00:02:35,240 --> 00:02:40,170 And I need to go and find that e-mail and click a link inside of it, so inside of a second monitor 44 00:02:40,200 --> 00:02:44,610 that I have, I'm going to open up my e-mail address and just wait for that e-mail to appear. 45 00:02:47,410 --> 00:02:47,700 Go. 46 00:02:47,950 --> 00:02:54,190 So I'm going to get an email that looks a little bit like this right here in the email, is gonna be 47 00:02:54,220 --> 00:02:55,720 a black verify button. 48 00:02:55,870 --> 00:02:57,220 Just go ahead and click on that one. 49 00:02:57,580 --> 00:02:59,230 And that's going to log you into her cell. 50 00:03:00,290 --> 00:03:03,100 Well, then go back over to our terminal and see that everything has resolved. 51 00:03:03,980 --> 00:03:09,260 So now once again, making sure them inside of one of my project directories, I went to run simply 52 00:03:09,330 --> 00:03:12,170 verso the first time we run this command. 53 00:03:12,200 --> 00:03:14,270 We're going be asked a series of different questions. 54 00:03:14,680 --> 00:03:15,980 We're just about all these questions. 55 00:03:15,980 --> 00:03:17,930 We can just use the default responses. 56 00:03:18,380 --> 00:03:24,170 So I'm going to hit, enter, enter, enter, enter, enter. 57 00:03:24,950 --> 00:03:29,120 And then finally, the very last question you'll notice is that it has detected that we are making use 58 00:03:29,120 --> 00:03:30,650 of a create react out project. 59 00:03:31,220 --> 00:03:34,520 So this is just saying, hey, you want to use the create react outside to deploy. 60 00:03:34,550 --> 00:03:34,880 Right. 61 00:03:35,360 --> 00:03:36,180 And of course we do. 62 00:03:36,310 --> 00:03:37,820 So I can hit enter one more time. 63 00:03:40,130 --> 00:03:43,340 After that will then be told that our application is being built and deployed. 64 00:03:43,940 --> 00:03:48,500 So we're gonna wait for about 30 seconds or so and after that will then be given a link that we can 65 00:03:48,500 --> 00:03:53,780 visit and see our application running inside the browser, the link that we are going to be provided. 66 00:03:53,810 --> 00:03:55,460 It's 100 percent public. 67 00:03:55,880 --> 00:03:58,730 You can take this link and share it with your friends family. 68 00:03:59,000 --> 00:04:00,050 Put it on your resumé. 69 00:04:00,200 --> 00:04:02,870 Put it in a portfolio, whatever you want to do with it. 70 00:04:04,170 --> 00:04:06,180 Deploying with Rowsell is one hundred percent free. 71 00:04:06,270 --> 00:04:10,680 So you don't really have to worry about this project some time, some day disappearing or anything like 72 00:04:10,680 --> 00:04:10,980 that. 73 00:04:12,040 --> 00:04:12,230 OK. 74 00:04:12,350 --> 00:04:13,490 So looks like it's all deployed. 75 00:04:13,820 --> 00:04:16,300 So here is my deployment link right there. 76 00:04:17,090 --> 00:04:21,200 Going to take that address and then visit it inside my browser. 77 00:04:23,250 --> 00:04:23,820 And there we go. 78 00:04:24,420 --> 00:04:26,700 There is my running YouTube application. 79 00:04:27,120 --> 00:04:29,490 Again, anyone can visit this link and see my app. 80 00:04:30,420 --> 00:04:33,810 Now, of course, deploying our app just one time isn't quite enough. 81 00:04:33,840 --> 00:04:35,490 We might eventually make some update. 82 00:04:35,940 --> 00:04:38,340 So how would we redeploy our application now? 83 00:04:38,970 --> 00:04:42,360 Well, first, let's go and make a very small change to my two hour project. 84 00:04:42,870 --> 00:04:47,790 I'm going to go into my search bar component and I'm just going to update that label text right there. 85 00:04:48,540 --> 00:04:53,070 So back inside my code editor very quickly, I'm going to find my search bar component file. 86 00:04:53,280 --> 00:04:58,200 Find the label and I'll change the label to, say, search for a video. 87 00:04:59,940 --> 00:05:00,850 I'll then save that. 88 00:05:01,030 --> 00:05:05,410 And now we want to redeploy our application to redeploy our app. 89 00:05:05,560 --> 00:05:07,030 We'll just go back over to our terminal. 90 00:05:08,790 --> 00:05:14,490 Again, make sure that we're inside of our project directory and run cell, dash, dash, broad. 91 00:05:17,300 --> 00:05:20,000 Well, then see the same output scroll on by once again. 92 00:05:20,180 --> 00:05:23,330 So it's going to rebuild our project and then give us another updated link. 93 00:05:23,870 --> 00:05:25,640 Again, this would take about 30 seconds or so. 94 00:05:25,670 --> 00:05:27,570 So I'm going to speed up the video very quickly. 95 00:05:29,470 --> 00:05:32,830 My redeploy is now complete so I can take this new link right here. 96 00:05:32,860 --> 00:05:34,070 Well, it's really the same link. 97 00:05:34,120 --> 00:05:35,110 But in theory, it's updated. 98 00:05:35,940 --> 00:05:37,450 And then visit that inside my browser. 99 00:05:37,930 --> 00:05:42,220 So I hit refresh again and I will see that updated label search for a video. 100 00:05:42,710 --> 00:05:43,520 And that's pretty much it. 101 00:05:44,510 --> 00:05:49,130 So, again, anytime you want to deploy a project, just run over cell inside your project directory, 102 00:05:49,320 --> 00:05:52,040 any time you want to redeploy it into place, a new update. 103 00:05:52,250 --> 00:05:55,070 You'll run via cell, dash, dash, prod. 104 00:05:56,670 --> 00:05:59,670 Well, like I said, Rowsell is as easy as it gets. 105 00:05:59,880 --> 00:06:02,520 But we're going to take a look at one or two other providers as well. 106 00:06:02,640 --> 00:06:05,820 So quick pause and we'll take a look at another provider in the next video.