1 00:00:00,920 --> 00:00:04,670 Well, we've built out a variety of different applications, but right now they can only be used on 2 00:00:04,670 --> 00:00:05,450 our local machine. 3 00:00:05,730 --> 00:00:09,050 So in this video and the coming videos, we're going to figure out how to change that. 4 00:00:09,500 --> 00:00:14,450 We're going to deploy our applications online that our friends, family, employers, whoever else can 5 00:00:14,450 --> 00:00:16,880 visit these applications and try them out on their own. 6 00:00:17,690 --> 00:00:21,140 The first thing we're going to do is better understand what the deployment process looks like. 7 00:00:21,860 --> 00:00:27,860 So we are making use of create react app built in to create react app is a command to build out our 8 00:00:27,860 --> 00:00:30,080 project when we build our project. 9 00:00:30,320 --> 00:00:32,420 It creates what is called a deployment bundle. 10 00:00:32,970 --> 00:00:37,400 In this deployment bundle are a couple of different files that are required to run our project inside 11 00:00:37,400 --> 00:00:37,970 of a browser. 12 00:00:38,510 --> 00:00:44,000 So for example, the indexed HDMI file, a JavaScript files, VSS images and so on. 13 00:00:45,330 --> 00:00:48,600 These are all static files and these are used for the actual deployment. 14 00:00:49,080 --> 00:00:50,880 Don't use the term static files. 15 00:00:50,940 --> 00:00:55,950 I mean, to say that these are just normal files that can exist inside of some folder or directory. 16 00:00:56,760 --> 00:01:01,170 Up to this point in the course, we've been running create react app in development mode, which means 17 00:01:01,170 --> 00:01:06,860 that there is a running development server when we build our project and build up this deployment bundle. 18 00:01:07,080 --> 00:01:08,760 We no longer have a running server. 19 00:01:08,880 --> 00:01:13,410 Instead, we just need to load these files into a browser to run our application. 20 00:01:14,460 --> 00:01:19,320 So we are going to take those files and upload them to some kind of deployment target. 21 00:01:20,090 --> 00:01:23,940 The deployment target right here is going to be the service that we used to deploy our application. 22 00:01:24,510 --> 00:01:28,170 This might be whatever service provider we decide to deploy our app to. 23 00:01:28,980 --> 00:01:32,490 This deployment target is going to take these files and host them. 24 00:01:34,100 --> 00:01:38,850 Then whenever user types in our domain into their browser, their browser is going to make a request 25 00:01:38,910 --> 00:01:44,580 over to our deployment provider and they're going to immediately get back response that contains always 26 00:01:44,640 --> 00:01:45,330 the index dot. 27 00:01:45,410 --> 00:01:50,280 Each temo file, that file will be loaded up inside the browser, and inside of it will be some variety 28 00:01:50,280 --> 00:01:52,500 of script tags, linked tags and so on. 29 00:01:52,920 --> 00:01:57,060 That will cause the browser to make additional requests and get some additional JavaScript files. 30 00:01:57,090 --> 00:01:58,470 Or C SS files. 31 00:01:59,520 --> 00:02:03,760 Now, one thing that's really critical for you to understand about the deployment of REACT application 32 00:02:04,090 --> 00:02:10,480 is that we do not have to be running some kind of virtual machine or anything like that to deploy a 33 00:02:10,480 --> 00:02:11,470 react application. 34 00:02:12,340 --> 00:02:17,320 You only need a virtual machine if you're running some kind of active server, some kind of server that 35 00:02:17,320 --> 00:02:19,270 is actively running some code. 36 00:02:19,900 --> 00:02:25,230 So, for example, you might need a virtual machine if you're running a node J.S. API there. 37 00:02:25,570 --> 00:02:31,210 The expectation here is that this virtual machine is going to run this server process and this server 38 00:02:31,240 --> 00:02:33,040 will respond to incoming requests. 39 00:02:33,850 --> 00:02:40,120 We do not need a virtual machine to deploy a react application because we are not executing any code 40 00:02:40,180 --> 00:02:43,900 whatsoever on any server when we host our REACT application. 41 00:02:44,530 --> 00:02:48,490 The only thing we are hosting are these very plain static files. 42 00:02:49,090 --> 00:02:52,960 These files would be equivalent to just uploading a couple of images and then downloading them over 43 00:02:52,960 --> 00:02:53,380 time. 44 00:02:53,800 --> 00:02:54,940 That's what you really want to think about. 45 00:02:54,940 --> 00:02:56,800 And we start to deploy a react application. 46 00:02:58,330 --> 00:03:03,340 This is very important to understand, because it means that it costs dramatically less to deploy in 47 00:03:03,430 --> 00:03:08,560 a react application than it does to deploy something like a no J.S. server or API. 48 00:03:09,250 --> 00:03:12,220 Virtual machines cost a lot of money to rent and run every month. 49 00:03:12,910 --> 00:03:18,280 But hosting static files like what we're going to do with our REACT application is usually very, very 50 00:03:18,280 --> 00:03:21,460 cheap or even more frequently just plain free. 51 00:03:23,370 --> 00:03:25,080 All right, so now we've got a little overview. 52 00:03:25,320 --> 00:03:28,920 We're going to start to take a look at our first deployment provider in the next video.