WEBVTT 00:02.180 --> 00:06.140 Okay, we are back in our React application. 00:06.140 --> 00:12.650 So this is the front end and we have our localhost running so we can go to our application and this 00:12.650 --> 00:17.660 is up and running, but this application is not ready to hit production. 00:17.660 --> 00:22.070 So whatever we are running here, we are running that on localhost. 00:22.070 --> 00:25.250 So basically that's development version of running. 00:25.250 --> 00:30.980 Even here, when you run it, you will have a hint that this is development build and it's not optimized. 00:31.010 --> 00:36.200 So in order to put our application on production, we'll need to build it. 00:36.200 --> 00:43.910 So I will stop it here and we'll use this command NPM, build, run, build, or we can do yarn as well. 00:43.910 --> 00:51.350 So I will do NPM run build and you can see here on top of the folders we have here, we have another 00:51.350 --> 00:52.520 one called Build. 00:52.520 --> 00:58.160 So I will open it here and it will take a while until it will be finished. 00:58.160 --> 01:05.550 But we need to make sure this is built first and then we'll come back to the firebase and then we can 01:05.550 --> 01:09.420 use code from this build to put it on the server. 01:09.570 --> 01:10.080 Okay. 01:10.080 --> 01:12.090 So we have everything there. 01:12.090 --> 01:17.100 I can take a look what's inside the build and we have our application here. 01:17.100 --> 01:24.450 So basically NPM run build took the source from here and build a new application there. 01:24.450 --> 01:28.650 So I have a index.html and we have all the styles here. 01:28.650 --> 01:34.200 So we have static CSS and JS here JavaScript and I have some favicons and whatever. 01:34.200 --> 01:38.430 I had it here in the public and source it was build it for me. 01:38.430 --> 01:41.940 And you can see here we have some random characters here. 01:41.940 --> 01:47.400 That means every time I will build a new version it will change this. 01:47.400 --> 01:52.170 So it's not going to be cached in the browser for the users, so it will use a new version. 01:52.170 --> 01:56.340 Okay, we have that built here and that's very important to have it here. 01:56.340 --> 02:03.480 And actually Firebase will ask us for this folder and will tell in which which folder we are having 02:03.480 --> 02:04.380 our build. 02:04.920 --> 02:06.090 Okay, so this is done. 02:06.090 --> 02:11.280 Let's go back to the our firebase here and follow the instruction. 02:11.520 --> 02:12.060 Okay. 02:12.060 --> 02:13.860 So we have this installed. 02:13.860 --> 02:21.270 You can also click if you would like to implement any of this, like our cloud firestore authentication, 02:21.270 --> 02:22.950 performance monitoring and so on. 02:22.950 --> 02:26.910 You can also edit it, but we are not interested in that here. 02:26.910 --> 02:28.260 So I will go next. 02:28.260 --> 02:29.340 We need to log in. 02:29.340 --> 02:31.080 We already have done that. 02:31.080 --> 02:38.400 So we have an account with Firebase, we are logging and then we can use Firebase in it. 02:38.400 --> 02:42.420 I can click on this to copy that so I can come back to our terminal. 02:42.420 --> 02:51.090 I'm in this folder of my application in the root folder here and I can do Firebase init. 02:55.410 --> 03:00.990 So basically, this will give me some kind of different options that I can use. 03:00.990 --> 03:06.930 You can see here Firebase debug has been created and there will be more files created by this command. 03:06.930 --> 03:16.110 But here what I can do is I can go up an arrow, up arrow and down arrows selection and then I can use 03:16.110 --> 03:19.980 a space if I need to have any of these options. 03:19.980 --> 03:24.330 So basically we are interested in hosting only. 03:24.330 --> 03:28.260 So we'll click space on this and I can move and select more. 03:28.260 --> 03:32.070 If you need more services from Firebase, you can select them. 03:32.430 --> 03:37.410 And at the moment what we are trying to do is we are trying to do the hosting only. 03:37.410 --> 03:46.350 So once this is selected with space and it's highlighted with green, I can click return and then Firebase 03:46.350 --> 03:47.760 will ask us a few questions. 03:47.760 --> 03:50.010 So is this an existing project? 03:50.010 --> 03:57.940 Yes, actually we have our own project and this is asking for the project that we have created. 03:58.410 --> 03:59.070 Here. 03:59.070 --> 04:05.700 So as you remember, we had that project that created that project, the movie rater in the user interface. 04:05.700 --> 04:10.500 And I told you that that we could create something in the CLI. 04:10.530 --> 04:14.070 So if you haven't created, you can create a new project with this. 04:14.100 --> 04:16.440 We already have the existing project. 04:17.420 --> 04:24.140 And you can see here a firebase will ask us which project is that I have at the moment on my account. 04:24.140 --> 04:32.540 I'm I log in with Firebase so Firebase knows what are the available projects on my account are and I 04:32.540 --> 04:36.560 have to I have my own private one and I also have the one that I've created. 04:36.560 --> 04:37.820 So I will pick this one. 04:39.980 --> 04:49.660 And this is another question that hosting will ask us What do you want to use as a public directory? 04:49.670 --> 04:56.720 And I would like to use a public, not a public, as a default because this one is the default. 04:56.750 --> 05:01.700 What I want to do is I want to use my build folder as a public directory. 05:02.570 --> 05:07.190 So I will need to type in build here because that will need to represent this one. 05:07.190 --> 05:12.260 Otherwise Firebase will try to get the source code from this folder. 05:12.260 --> 05:17.960 And basically this is not a version that we can actually put it on our server and expect it to run. 05:17.960 --> 05:23.810 So build here the same name as it is here and click Yes. 05:25.890 --> 05:31.050 So configure as a single page application, rewrite all your rails to index.html. 05:31.080 --> 05:33.540 Yes, we would like to do that. 05:34.540 --> 05:41.350 And then it will ask us if we have already it the text that we in the build, we have an index page 05:41.350 --> 05:43.270 here, index file here. 05:43.270 --> 05:45.670 And do we do we want to overwrite it? 05:45.700 --> 05:49.750 No, we don't want to overwrite our and we would like to use our own. 05:50.200 --> 05:57.370 And now we have fully configured firebase and you can see two new files here. 05:57.370 --> 05:59.910 So we have Firebase Firebase, RC. 06:03.010 --> 06:06.640 And this is basically pointing to our project. 06:06.940 --> 06:13.390 This is the project we've created with some random ID here and we have another one, Firebase.json. 06:13.390 --> 06:18.670 So basically that's the settings we have used, which with that question. 06:18.670 --> 06:20.260 So you can see public build. 06:20.260 --> 06:23.920 If you need to change any of this, you can change it here. 06:23.920 --> 06:26.230 So basically you don't need to touch it. 06:26.230 --> 06:31.000 Once you've done your initialization, then everything will be ready for you. 06:31.000 --> 06:39.430 So what we can do, we can go back here, we've done a firebase init, then we can go here. 06:39.430 --> 06:42.190 So basically it is as easy as this one. 06:42.190 --> 06:43.630 Firebase deploy. 06:43.630 --> 06:49.060 Let me copy this one and we can go back to terminal and then I will paste it here. 06:49.060 --> 06:50.290 Firebase deploy. 07:04.680 --> 07:06.750 And that has been deployed. 07:06.780 --> 07:08.820 So I will come back here. 07:09.270 --> 07:10.680 I will close this. 07:10.800 --> 07:13.320 And let me refresh this page now. 07:24.730 --> 07:30.420 You can see after I refreshed, I don't see that screen anymore. 07:30.430 --> 07:34.630 I see my deployment, so I will take a look what's here. 07:34.630 --> 07:39.100 So what we have here is we have our release histories here. 07:39.100 --> 07:44.770 So at the moment I have a current version, if you will deploy more, then you will you will see the 07:44.770 --> 07:46.750 full history here. 07:46.750 --> 07:48.820 So we have our application here. 07:48.820 --> 07:53.730 And at the moment I have a default movie creator, which is my ID and web app. 07:53.740 --> 08:02.710 What I can do is I could actually I have to here a domain so I can open this one and that will be my 08:02.710 --> 08:04.480 application online. 08:05.380 --> 08:13.150 You can see movie later this one dot web app that will give me my application and it is working the 08:13.150 --> 08:15.940 same way as it was working here locally. 08:16.480 --> 08:18.310 I can also click on this one. 08:20.320 --> 08:22.000 And that will work as well. 08:22.000 --> 08:23.710 So you have two options. 08:23.710 --> 08:34.210 You have Firebase App.com or you can have web app URLs, and Firebase will give you that for free. 08:34.240 --> 08:37.360 So basically you don't need to pay for any of this. 08:37.390 --> 08:43.400 This will be already give it to you for free if you would like to use your own domain. 08:43.420 --> 08:44.770 You will need to buy it. 08:44.770 --> 08:49.080 So basically that will be the URL to access your application. 08:49.090 --> 08:55.270 I know it's not looking really pretty, but if you want to have your hobby application, you can put 08:55.270 --> 09:03.790 your API on the Heroku, you can put your frontend on the firebase and it will work just like that. 09:03.790 --> 09:10.870 So our application has been deployed on Firebase completely for free and it's working perfectly. 09:11.080 --> 09:15.100 So there is one more thing that you will need to do. 09:15.520 --> 09:17.800 So I will go back here. 09:19.780 --> 09:21.310 And as you remember. 09:22.480 --> 09:24.460 In the settings we have. 09:29.430 --> 09:31.480 Course, origin whitelist. 09:31.500 --> 09:39.380 So basically this is the whitelist of the different application URLs that can fetch our data. 09:39.390 --> 09:42.750 What we will need to do on top of the localhost here. 09:42.750 --> 09:47.250 And so we have localhost 3000, which is a react application. 09:47.250 --> 09:54.870 We also have an angular application here, but if you will register your new application on Firebase 09:54.870 --> 10:02.010 app, what you will need to do is you will need to grab this and you will also need to put it another 10:02.010 --> 10:02.850 one here. 10:02.850 --> 10:05.190 So I will put it like this. 10:05.190 --> 10:09.690 And then if you also would like to use the other one here. 10:10.910 --> 10:12.320 You will need to copy. 10:15.290 --> 10:18.920 And you will need to add another one here. 10:18.920 --> 10:20.290 Once it is done. 10:20.300 --> 10:28.400 It's not going to work well, it will work for the localhost, but it's not going to work for a remote. 10:28.400 --> 10:32.030 So you will need to also deploy it on Heroku. 10:32.030 --> 10:36.740 And once the Heroku will be built, you will be able to use that. 10:36.740 --> 10:39.320 And we have our error here with a course header. 10:39.320 --> 10:43.880 So basically it complains this should not have a path. 10:43.940 --> 10:47.660 That means we have that slash at the end. 10:47.660 --> 10:52.400 So we need to remove it from here and also from the other one. 10:52.400 --> 10:55.100 And once we remove it and save it. 10:58.160 --> 11:02.920 A it is working fine, so our server is up and running and that has been added. 11:02.930 --> 11:03.260 Okay. 11:03.260 --> 11:06.410 So let's go back to our Visual Studio code here. 11:06.590 --> 11:13.760 Whatever we have here in the source, we have components and then for example, we have login. 11:15.180 --> 11:21.240 You can see we we use React app API URL. 11:21.270 --> 11:32.190 So if I will go to the environment here, we have that React app API URL and we build our API with the 11:32.190 --> 11:32.880 localhost. 11:32.880 --> 11:36.810 So we also deploy it for the localhost. 11:36.840 --> 11:44.130 If you would like to use the Heroku URL, you will need to also change it and then redeploy it to Firebase. 11:44.130 --> 11:52.080 So basically this was used a localhost and that was good for it is still good and valid for a development 11:52.080 --> 11:58.770 on your local machine, but it's not going to work from the server from the firebase because you expect 11:58.770 --> 12:03.810 this to be running on the internet, not from your local machine. 12:03.810 --> 12:11.280 So whatever you decided to put it online, then you have the backend API on Heroku, you have your URL, 12:11.280 --> 12:12.990 you just change it. 12:14.230 --> 12:17.780 Here and they will communicate with each other. 12:17.800 --> 12:21.160 It's not going to stop you from having that as well. 12:21.200 --> 12:22.120 Tested locally. 12:22.120 --> 12:28.750 So you can still have your local version and use this with with the server running locally and on PyCharm. 12:28.750 --> 12:35.650 But the production version on Heroku and production version of your front end application will need 12:35.650 --> 12:37.480 to link to each other. 12:37.930 --> 12:38.890 That's it. 12:39.100 --> 12:41.300 And that's basically it. 12:41.320 --> 12:43.900 You don't have to do much more. 12:43.930 --> 12:46.000 Your application is up and running. 12:46.030 --> 12:49.350 As you can see here, it's a working fine. 12:49.360 --> 12:55.390 Then you will need to do some extra things to make it communicate with your Heroku or wherever you put 12:55.390 --> 12:59.760 your API because it doesn't have to be Heroku, it can be on any server. 12:59.770 --> 13:01.930 I hope that was helpful. 13:01.930 --> 13:08.650 And you know how to do a deployment with a firebase is very straightforward. 13:08.650 --> 13:14.450 You can use CLI and everything is very easy and well explained on their docs. 13:14.450 --> 13:18.350 So apart from the hosting you also have an other services. 13:18.380 --> 13:20.300 Go ahead and explore them.