WEBVTT 00:01.340 --> 00:01.850 Okay. 00:01.880 --> 00:06.830 Once we have our application here, we will need to do a few things here. 00:06.830 --> 00:10.760 So first thing first I will go back to here. 00:10.790 --> 00:12.770 What we've done is we've created here. 00:12.770 --> 00:18.260 And it said to us that we need to create a put a virtual environment name there. 00:18.260 --> 00:24.740 So if I will go back here and you see virtual environment, it's under path here. 00:25.550 --> 00:31.040 So what we need to do is we need to provide that virtual environment. 00:31.040 --> 00:31.640 The name. 00:31.640 --> 00:36.650 So it was movie writer virtual env. 00:36.680 --> 00:38.450 That was the name that we had it there. 00:38.450 --> 00:41.330 So if I click here you see it is added there. 00:41.330 --> 00:45.920 So basically we need to tell what is the virtual environment for our application. 00:46.760 --> 00:52.040 The next thing that we need to do is we need to put a patch on our for our code. 00:52.040 --> 01:00.500 So the path for our code is if we go back to our console and this is the console that we used before. 01:00.520 --> 01:02.950 so it will kind of keep it here in the history. 01:02.950 --> 01:06.550 I can click on that and if I will do RLS here. 01:06.550 --> 01:14.350 Basically this is the name of the folder that we imported with git, so called Django react API is the 01:14.350 --> 01:17.470 name of the folder that we need to put it there. 01:17.470 --> 01:21.700 So we'll go back to web and we go here. 01:21.700 --> 01:23.710 And we need to put that here. 01:23.710 --> 01:27.130 So I will paste it and click okay. 01:27.130 --> 01:29.200 And you can see him home. 01:29.200 --> 01:32.110 My username and then folder is here. 01:32.140 --> 01:37.600 Another thing what we need to do is we need to edit the Wsgi file. 01:37.630 --> 01:47.980 So basically what we have here is we have here if we go to our API we have this is the name of our project. 01:47.980 --> 01:50.680 And we have that Wsgi file here. 01:50.680 --> 01:52.270 So you can click on this one. 01:52.270 --> 01:54.550 And this is the what comes with a Django. 01:54.580 --> 01:59.380 But what we need to do is not to have this as G. 01:59.410 --> 02:03.340 We need to create our own or use their own Wsgi. 02:03.370 --> 02:05.410 So this is actually explained here. 02:05.410 --> 02:09.250 What I will do first is I will copy whatever is here. 02:09.280 --> 02:10.300 I'll copy that. 02:10.360 --> 02:18.130 And here what we can do is you see you have a Wsgi configuration file that is here. 02:18.130 --> 02:20.350 So I can click actually on this one. 02:21.430 --> 02:23.920 And this will open the editor for me. 02:23.950 --> 02:29.680 So you can see here this is the kind of hello world like a default Wsgi. 02:29.710 --> 02:31.990 But I can control or command A. 02:31.990 --> 02:34.750 And I will click delete and it will remove everything. 02:34.750 --> 02:36.940 We don't need their own hello world. 02:36.940 --> 02:37.990 We can paste it. 02:38.020 --> 02:38.440 Whatever. 02:38.440 --> 02:39.910 I copy that from here. 02:39.910 --> 02:43.270 So I copied that from here and I paste it here. 02:43.270 --> 02:45.370 So there's a few things that we need to change. 02:45.370 --> 02:46.360 Like this is command. 02:46.360 --> 02:47.800 So we don't need that. 02:48.040 --> 02:49.930 And we also have this one. 02:49.930 --> 02:50.860 So home. 02:50.860 --> 02:53.050 And then you need to put your username. 02:53.050 --> 02:55.660 So your username will be different than mine. 02:55.660 --> 02:59.410 But I will have like this. 02:59.410 --> 03:05.490 And then we have my site, and my site is basically whatever it's worth. 03:05.490 --> 03:09.690 This because that's the name of the folder that I put it there in the console. 03:09.690 --> 03:11.310 So my site will be this. 03:11.310 --> 03:13.140 This is what I copied that from git. 03:13.140 --> 03:16.110 So it created that folder and it will be here. 03:16.110 --> 03:18.660 So this is the path to my application. 03:18.660 --> 03:24.900 And then you will need to also change this which is basically a place where I have my settings. 03:24.900 --> 03:29.220 So if we go here into API you see my settings are in this. 03:29.220 --> 03:32.190 So this is the name of the application movie writer. 03:32.190 --> 03:37.320 So I will go here and I will do movie Writer like this. 03:37.740 --> 03:39.000 And I have a setting. 03:39.000 --> 03:44.760 So I have a path here that I need to change with a username and the name of the folder I have my application. 03:44.760 --> 03:47.220 This is the name of my application inside the folder. 03:47.220 --> 03:50.910 And then we need to either do this or do that. 03:50.910 --> 03:55.590 So it depends on the version of the Django we are using bigger than 1.5. 03:55.590 --> 03:58.830 So basically we can remove all of that here. 03:58.830 --> 04:02.280 We don't need it and all the comments actually are not needed here. 04:02.280 --> 04:06.600 So they are here just to help you write it. 04:06.600 --> 04:10.650 So this is my new Wsgi and I can click save. 04:12.810 --> 04:15.240 And I can click here to refresh it. 04:15.240 --> 04:21.300 So basically it will be loaded a new Wsgi file okay this is done. 04:21.300 --> 04:23.760 We can go back to our web. 04:24.660 --> 04:30.270 And then if I will go here you can see here we can have a database setup here. 04:30.270 --> 04:32.580 So it depends on what you would like to do. 04:32.610 --> 04:34.980 We can actually have a migrate here. 04:34.980 --> 04:36.630 So I will show you how to do that. 04:36.630 --> 04:38.250 And we can go here. 04:38.250 --> 04:41.580 And I will go back to console and I will open the console. 04:41.580 --> 04:42.540 I had it there. 04:43.140 --> 04:46.170 And here what we can do is I will go to that folder. 04:46.170 --> 04:52.020 So CD course I can click tap to finish writing for me. 04:52.020 --> 04:59.660 So I will go to that folder and I can do manage py because this is where I have my file and then I can 04:59.660 --> 05:00.620 do migrate. 05:02.270 --> 05:04.250 And if the migration has been applied. 05:04.250 --> 05:12.890 So basically if you apply the migration the new database will be created and it will be MySQL database 05:12.890 --> 05:15.170 the same as we have it actually here. 05:15.170 --> 05:21.290 So if you go to settings here you have databases and we have MySQL database. 05:21.290 --> 05:22.850 And this is database created. 05:22.850 --> 05:27.740 So when you run this migrate command it will create that file for you the same as we've done it here. 05:28.040 --> 05:33.140 And so basically you might deploy your you can deploy your application this way. 05:33.140 --> 05:39.710 Or what you could do is you can go to dashboard and you have an option here to databases. 05:39.740 --> 05:41.990 So you can create a databases. 05:41.990 --> 05:46.490 MySQL is free because if you want to go to Postgres then you will need to pay. 05:46.490 --> 05:48.050 But this one is for free. 05:48.080 --> 05:49.880 The small database is available. 05:49.880 --> 05:55.460 You can create this, initialize it, but you will need to go to your settings and you will need to 05:55.580 --> 06:00.890 specify the database engine and the name from here, but we are okay with the one. 06:00.890 --> 06:02.180 We have it there. 06:02.180 --> 06:08.480 So I will go back to web and we should be almost up and running so we can actually check it if that 06:08.480 --> 06:08.930 works. 06:08.930 --> 06:13.610 So if I go here I will reload this application. 06:13.610 --> 06:16.910 So we click on this and that's been reloaded. 06:16.910 --> 06:19.970 So basically this is my application I will right click. 06:19.970 --> 06:21.830 And I said open in a new tab. 06:21.830 --> 06:24.950 And this is my application here. 06:24.950 --> 06:27.890 What I see here is actually a Django error. 06:27.890 --> 06:35.390 And the reason why we have that is we have need to run our Django in that host. 06:35.390 --> 06:44.660 So this is the host and we know how to do it because we could go here and we have option here allowed 06:44.660 --> 06:44.930 host. 06:44.930 --> 06:50.510 So basically if you want to run Django in different hosts you need to tell this Django is running on 06:50.540 --> 06:51.320 that host. 06:51.350 --> 06:58.990 So what you can do is I could put that here, commit it to git git pull and have that version there. 06:59.020 --> 07:00.430 Or I can have the corner. 07:00.430 --> 07:04.150 I'm not going to do it now, but that will be preferable way to do it. 07:04.150 --> 07:11.050 But basically what I need to do is I need to copy that and I can go here into console and we can do 07:11.080 --> 07:12.250 it directly on the server. 07:12.250 --> 07:14.200 So I can go to console here. 07:14.200 --> 07:17.890 So what we have is we we are inside that folder. 07:17.890 --> 07:27.130 So react API I will go CD movie writer I will go to that folder where our settings are. 07:27.130 --> 07:28.120 So I can do ls. 07:28.120 --> 07:30.220 You see the settings file is here. 07:30.220 --> 07:32.470 So I can do use vim again. 07:32.470 --> 07:35.050 So vim and then settings. 07:36.280 --> 07:38.830 And I can edit that directly here. 07:38.830 --> 07:40.930 So I can navigate down. 07:41.380 --> 07:46.270 What we are trying to do is go and put that in allowed host. 07:46.270 --> 07:54.250 So I'm inside that square brackets here I will press I which is an you see that here there is an insert. 07:54.250 --> 07:56.950 So I can do quote quote. 07:56.950 --> 08:01.990 And inside I can do command V or control V just to paste it. 08:02.020 --> 08:04.540 And that's not what I wanted to paste. 08:04.810 --> 08:07.780 I wanted to paste this one. 08:07.780 --> 08:10.870 So we'll copy that and I will paste it here. 08:10.900 --> 08:13.540 Basically my username pythonanywhere. 08:13.570 --> 08:16.240 Com so this is what we need to tell. 08:16.240 --> 08:19.810 So once I in that insert mode I can do escape. 08:19.810 --> 08:21.460 So you don't see it anymore. 08:21.460 --> 08:23.050 You do colon again. 08:23.050 --> 08:26.770 And then you can do X just to save it here and enter. 08:26.800 --> 08:29.440 So basically this has been saved now. 08:29.440 --> 08:39.790 And if I will go here to actually I need to go back from console to my web, I will reload my application. 08:39.910 --> 08:46.660 And if I will go back here and refresh the page, you'll see this is my application up and running. 08:46.660 --> 08:50.770 So you can see page not found because we don't have that in the URL. 08:50.800 --> 08:52.990 But I could do admin. 08:54.610 --> 09:03.750 And you can see here this is a admin page here working on that URL, but this is not ready yet because 09:03.780 --> 09:09.870 like we don't have uh, this nice styles, which is CSS and JavaScript that for, for that user interface. 09:09.870 --> 09:13.530 So what we could do is you actually can see it here. 09:13.530 --> 09:18.870 So you have an additional configuration here that you can do and you can create some settings of it. 09:18.900 --> 09:25.320 I will suggest to read this tutorial because it has a lot of useful information, like for example setting 09:25.320 --> 09:27.180 up environmental for secret key. 09:27.210 --> 09:34.740 So if you put something in the in the production, you don't use the secret key and store it in a environmental 09:34.740 --> 09:35.190 variables. 09:35.190 --> 09:37.470 And it's actually um described here. 09:37.470 --> 09:43.920 But you can also what we can do is we can do we can do it on your own, but we will do the static file. 09:43.920 --> 09:50.550 So basically what we need to do is we need to tell where to store the static file. 09:50.550 --> 09:52.590 So we'll copy the second bit from here. 09:52.590 --> 09:54.810 And I will go back to the console again. 09:54.840 --> 10:00.600 So I will go consoles and I will change that directly in on the server. 10:00.600 --> 10:05.760 So I will use Veeam as Settings.py again and I will go to the very bottom. 10:05.760 --> 10:07.230 So if we'll go. 10:13.110 --> 10:18.900 It doesn't have to be bottom, but there's a reason why I'm going there because we have static URL here 10:18.900 --> 10:20.340 at the last. 10:20.340 --> 10:23.730 So I will do I basically I will go to insert mode. 10:23.760 --> 10:26.970 I will click enter to have a new line and I will paste it there. 10:26.970 --> 10:33.360 So basically what we are saying here, the static URL will be static and static route will be whatever 10:33.360 --> 10:36.540 the base year of this file is and then static. 10:36.540 --> 10:38.040 So that's what we will do. 10:38.070 --> 10:42.090 I paste it so I'll click escape to go back from insert mode. 10:42.090 --> 10:44.310 And I will do colon and then x. 10:44.310 --> 10:47.040 You can see here the command what I'm doing here. 10:47.040 --> 10:47.760 And I enter. 10:47.760 --> 10:49.410 So basically we've done that. 10:49.410 --> 10:52.500 So if I will go here we already had that. 10:52.500 --> 10:55.500 But what we need to do is we need to collect static. 10:55.670 --> 10:57.710 and so collect static. 10:57.710 --> 10:59.000 We will go here. 10:59.000 --> 11:02.090 We already are in the movie rater. 11:02.090 --> 11:05.930 So we need to go one folder up CD dot dot. 11:05.930 --> 11:09.530 And this is where my manage.py file is. 11:09.530 --> 11:17.330 And I can do dot manage py and then collect static. 11:17.450 --> 11:23.450 So basically what we will do here is we will get the static files for that admin page. 11:23.450 --> 11:26.150 And we will put it in the folder that we have it in the settings. 11:26.150 --> 11:28.550 So this has been collected already. 11:28.550 --> 11:32.780 So you can go here, you can change the static URL and so on. 11:32.780 --> 11:39.860 So what we need to go do is we need to close this, go back to the web and then reload it. 11:40.520 --> 11:45.020 And what static does is created that folder static here. 11:45.020 --> 11:49.700 So this is refreshed if I will go console here and run the console again. 11:50.750 --> 11:54.800 So if I will do ls here we have that static folder. 11:54.800 --> 12:01.430 And if I can do RLS static, you can see here since I have admin and Rest framework and so on. 12:01.460 --> 12:05.420 So basically static files have been used and put it there. 12:05.420 --> 12:12.200 So if I will go to dashboard and we actually need to set up there. 12:12.200 --> 12:17.600 So basically what we need to do is in the web we need to change this static URL. 12:17.600 --> 12:18.950 So I will go here. 12:18.950 --> 12:25.460 And inside my web I will go down. 12:26.660 --> 12:29.000 And this is where we have static files. 12:29.000 --> 12:31.280 So static files here. 12:31.280 --> 12:35.870 What I can do is I can do home might be username. 12:40.160 --> 12:43.190 And then movie. 12:43.430 --> 12:46.130 And basically that's the name of the folder. 12:46.130 --> 12:47.690 So it was like this one. 12:54.580 --> 13:00.400 And I will click okay and then URL will be static. 13:00.430 --> 13:01.810 So this is where we put it. 13:01.810 --> 13:07.930 So I will put I will have actually this is not so I will save this I misspelled this. 13:07.930 --> 13:12.280 So if I will click and it should be home. 13:15.100 --> 13:17.110 Home like this. 13:17.410 --> 13:20.860 And if I will save it and then we go refresh it. 13:23.800 --> 13:29.080 And then you refresh this and it didn't work. 13:29.110 --> 13:33.130 So what we need to do I think is we need to also put a static here. 13:33.130 --> 13:37.840 So at the very end I will do slash static here. 13:37.840 --> 13:41.740 So this URL and this you will have the static there. 13:41.770 --> 13:43.330 I will refresh it once again. 13:49.510 --> 13:51.910 And if I will go here and refresh it. 13:52.180 --> 13:53.170 And now we have it. 13:53.170 --> 13:56.050 So you see all the styles here are done. 13:56.050 --> 14:01.780 And we have our application running here on Pythonanywhere. 14:02.380 --> 14:04.270 So this is already done. 14:04.270 --> 14:05.470 I can log in here. 14:09.580 --> 14:14.050 And this is where we have our applications I will close this. 14:14.050 --> 14:16.690 And you can see here I have a list of movies and everything. 14:16.690 --> 14:19.270 So this is working and just fine. 14:19.270 --> 14:21.970 This is already deployed on production. 14:21.970 --> 14:27.880 In the next video I will show you how to deploy our web application using Firebase. 14:27.880 --> 14:31.330 But I mentioned that there a Heroku URL. 14:31.330 --> 14:34.750 So if you will need to use this URL instead. 14:34.750 --> 14:38.770 So whatever you will do there, just not put the Heroku one. 14:38.770 --> 14:46.360 As I explained there, everything will be the same, but the actual URL for our API is your username 14:46.360 --> 14:48.460 and then pythonanywhere.com. 14:48.460 --> 14:53.200 So just remember that whenever I will tell you that in the next section.