WEBVTT 00:02.580 --> 00:07.920 It's finally time to start developing the single page application which is going to be the front end 00:07.980 --> 00:09.340 of our project. 00:09.360 --> 00:13.490 So without further ado let's open up and your terminal. 00:13.520 --> 00:21.090 We are currently inside of this folder of course the main folder of the project in itself and considering 00:21.090 --> 00:28.260 that we've installed the view globally we can create a new project that we can just call from tender 00:28.590 --> 00:33.300 and we can just created inside of the question time folder and where it belongs. 00:33.300 --> 00:42.270 As for any other applications so enter let's select the features manually we want to use a router remember 00:42.270 --> 00:46.190 to use the backspace to select all the features that you want to use. 00:46.230 --> 00:49.660 In this case you only want a router Babel and third. 00:49.680 --> 00:50.820 So enter. 00:51.270 --> 00:51.560 Yeah. 00:51.570 --> 00:53.450 Be sure to select. 00:53.490 --> 00:54.050 Yes sir. 00:54.060 --> 00:58.180 Because we want to use history mode for the router. 00:58.200 --> 01:04.020 There is no need to worry about the server configuration because as you probably remember in the US 01:04.050 --> 01:12.240 DOT by file of the project we are using that rejects to actually redirect every other request to that 01:12.630 --> 01:17.350 index template view which will render the index dot h the email file. 01:17.370 --> 01:19.560 Remember so here. 01:19.570 --> 01:20.000 Yes. 01:20.290 --> 01:20.500 Yeah. 01:20.520 --> 01:28.040 We can select yes linked plus PDA with lint on save configuration file scene package that Jason and 01:28.060 --> 01:28.350 not. 01:28.390 --> 01:30.040 There is no need to save. 01:30.080 --> 01:30.700 Press it 01:39.590 --> 01:46.550 as you can see the project was created successfully and we now have this front end folder which contains 01:46.580 --> 01:50.870 all the files that are part of this new view application. 01:51.080 --> 02:00.550 And if we now move to the front end folder and give the NPM around said command starting the development 02:00.580 --> 02:05.920 server and if we now go to these local addresses. 02:07.150 --> 02:13.280 We see that of course your application is that our and going to the console. 02:13.300 --> 02:18.770 We also see that the arts module replacement which is the system that allows us to get all the updates 02:18.820 --> 02:20.520 realtime is working. 02:20.680 --> 02:26.200 Some of you might have already noticed that there is a challenge waiting for us to be solved. 02:26.200 --> 02:31.480 And that's because at the moment the front end View application is basically standalone. 02:31.630 --> 02:39.250 The development server is up and running but this page that we have seen clearly is not the index not 02:39.280 --> 02:41.440 age the email file that we want to use. 02:41.440 --> 02:48.250 Remember that we've created this file so that we can use these DB we've idea app to mount a review application 02:48.250 --> 02:56.020 on and we want this file to be right there by Django so then we can also control who's accessing the 02:56.020 --> 03:03.670 application itself because remember if we go to court views that pay we have added the log in the required 03:03.730 --> 03:06.180 mix seen to the index template class. 03:06.490 --> 03:11.560 And because of our way everything is set to appear on authenticated users will be redirected to the 03:11.560 --> 03:13.030 logging page. 03:13.030 --> 03:19.710 So now basically we need to find a way to have both the view the server and the Django server running 03:19.780 --> 03:26.890 at the same time so that we can enjoy the advantages provided by Django but at the same time also keep 03:26.890 --> 03:30.660 the hot module replacement provided by view and wetback. 03:30.660 --> 03:36.130 We are going to achieve our goal by using two packages the first one for a view and where Puck will 03:36.130 --> 03:42.370 keep track of all the code and the changes happening to our front end application while the second package 03:42.490 --> 03:48.850 used by Django will be able to read everything that the first package is tracking and will dynamically 03:48.850 --> 03:53.450 inject all the code inside the index stored HDMI file. 03:53.470 --> 03:58.720 I know this might sound a bit complicated but I guarantee you that it's easier than it sounds. 03:58.720 --> 04:04.600 Once you know the procedure let us start off by installing the view and web related package which is 04:04.600 --> 04:06.710 called Web back bundle tracker. 04:06.880 --> 04:13.180 And this is also the perfect opportunity for us to introduce a view UI which as we said is basically 04:13.180 --> 04:15.850 a user interface for UCLA. 04:16.270 --> 04:21.330 And considering that again we've installed the view globally we can access it from everywhere. 04:21.970 --> 04:24.300 So yeah in this terminal that is already open. 04:24.310 --> 04:34.020 We can run the command view UI starting graphical user interface ready and as you can see the view project 04:34.020 --> 04:36.560 manager window is opened automatically. 04:36.660 --> 04:42.420 We get at least we have a view to yes projects in our system and in case your project is not found. 04:42.420 --> 04:46.400 You can click on import and then open up the folder that you're working with. 04:46.860 --> 04:53.010 And considering that this is a graphical user interface for the command line interface we've used so 04:53.010 --> 04:53.850 far. 04:53.850 --> 04:59.460 We can also create new projects in case you want to just click on the green button and then follow the 04:59.460 --> 05:00.550 procedure. 05:00.600 --> 05:05.850 The options that are going to be exactly the same as the one we've discussed so far but considering 05:05.850 --> 05:10.830 that we already have a project that we want to work with we can just click on the name of the project. 05:10.980 --> 05:17.100 And here is the project dashboard and this you can read also from this health message here on the left 05:17.100 --> 05:23.250 there we can see a navigation bar that shows all the different pages available in this interface we 05:23.250 --> 05:29.940 can click on plugins to manage all the currently installed plugins and add new ones so we can click 05:29.940 --> 05:33.960 on dependencies to manage and install new dependencies. 05:33.960 --> 05:36.230 We're going to use this feature in a second. 05:36.280 --> 05:41.880 We can click on configuration to access that configuration for this year lie and yes lean to it and 05:41.880 --> 05:43.250 then we can click on tasks. 05:43.570 --> 05:47.680 And this is one of the most powerful pages of the interface. 05:47.700 --> 05:52.890 Clicking on the Iran task button is basically the same as running NPM run server. 05:52.890 --> 05:54.090 The code is compiled. 05:54.090 --> 06:00.330 We have to reload for development and yet below we get a very comprehensive dashboard with all sorts 06:00.330 --> 06:03.630 of information about the development server so let's click. 06:03.630 --> 06:10.770 Iran task as you can see the dashboard is populated with all sorts of information. 06:10.830 --> 06:17.520 We can also see how long it would take to load our application using different kind of connections we 06:17.520 --> 06:21.690 can click on outputs to get basically a console output. 06:21.690 --> 06:28.260 Or we can click on analyzer to get other information specifically about the different components of 06:28.260 --> 06:29.820 the application. 06:29.820 --> 06:36.390 Let us now stop this task so we can click on builder to get a very similar dashboard used in this case 06:36.510 --> 06:37.740 for production. 06:37.740 --> 06:40.220 Now that you know what the user interface is about. 06:40.260 --> 06:44.150 Let's click on dependencies then install dependency. 06:44.210 --> 06:50.290 And from here we can search and install all sorts of different plugins for our project. 06:50.310 --> 06:53.420 For example bootstrap you see. 06:53.430 --> 06:53.590 Yeah. 06:53.610 --> 06:59.480 We also have fun to son at the moment is we said we only want to install a web Park bundle tracker. 06:59.670 --> 07:05.460 Let's click on development dependencies because as we've said the goal for this package is to let the 07:05.460 --> 07:08.010 two development servers communicate with each other. 07:08.010 --> 07:10.330 We are not going to need it in production. 07:10.470 --> 07:18.630 So went back Mandell cracker the package is the first one with the highest number of downloads. 07:18.660 --> 07:22.690 And once it's selected we think we can install back Mandel track it. 07:22.950 --> 07:28.740 Let's wait for the package to be downloaded and installed and once the installation is completed you'll 07:28.780 --> 07:35.390 be back to the project dependencies page and you will find it here we can now go back to visit us to 07:35.390 --> 07:38.350 your code and just the stop and the user interface. 07:38.540 --> 07:43.610 From now on we are going to round the development server Viacom on the line interface which is of course 07:43.670 --> 07:46.180 much lighter than the user interfaces. 07:46.220 --> 07:52.610 So now moving forward we need a web bundle tracker the package we've just installed to keep track of 07:52.640 --> 07:56.240 all the files used by you use development server. 07:56.240 --> 08:01.580 And so to keep track of what is basically the status of the application at any given time the package 08:01.580 --> 08:06.920 is going to create a new file what if you put all the information that is being tracked this file will 08:06.920 --> 08:10.210 then be read by another package by a Django package. 08:10.210 --> 08:16.460 That as we've said at the beginning of the video will then dynamically inject all the code in the index 08:16.460 --> 08:18.380 not HDMI file. 08:18.380 --> 08:24.770 And so in order for the package to properly work we need to create a configuration file inside the front 08:24.770 --> 08:29.570 end application called view that Conficker dot GSA. 08:29.840 --> 08:35.710 And yeah I have already prepared all the code for this file which I'm just going to paste. 08:35.920 --> 08:36.340 So. 08:36.440 --> 08:42.880 So let's have a look at in this file we are sitting up you'll see the configuration for the way back 08:43.240 --> 08:48.820 when the tracker we are telling me to create these file where box dot dot Jason where all the stats 08:48.910 --> 08:54.010 all the information about the front end application are going to be placed and then we have some settings 08:54.130 --> 08:57.340 about the development server as well. 08:57.340 --> 09:00.600 Remember to just copy this file as it is. 09:00.700 --> 09:06.250 You can check these projects repository in my guitar page or just download this file from the downloadable 09:06.250 --> 09:07.250 resources. 09:07.390 --> 09:15.810 And in case you're developing on windows you might want to set public path to this address instead of 09:15.840 --> 09:16.250 below. 09:16.270 --> 09:18.540 You will also see this code commented. 09:18.540 --> 09:24.200 And as you can read from the comments we're going to uncover and it before executing NPM around build. 09:24.250 --> 09:27.870 So before creating the files to use in production. 09:27.970 --> 09:30.210 So if you now open up the terminal. 09:30.400 --> 09:34.160 Once again end. 09:34.780 --> 09:44.010 Now giving the NPM around set of Commander building the files for development and as you can see now 09:44.010 --> 09:49.320 we also have these new file web bug starts the Jason where we have all the information that is being 09:49.320 --> 09:56.460 tracked as you can see so that it can then be read by Django and injected in the index to attach HTML5 09:57.420 --> 10:01.710 so we now need to install this new package to use with Django. 10:01.710 --> 10:03.810 So it is just clean the terminal. 10:04.410 --> 10:09.650 So yeah the beautiful environment is already activated. 10:09.690 --> 10:16.680 We can now use people to install Django where back loader which is the name of the package 10:19.850 --> 10:27.330 and we can also added to the requirements that to 65 so deep freezer requirements not to exceed. 10:27.910 --> 10:35.130 And as always we now need to install these application in the settings that by fail so installed upset. 10:36.140 --> 10:36.680 Yeah. 10:38.190 --> 10:41.010 Epic on this score. 10:41.960 --> 10:43.660 Low there. 10:43.760 --> 10:50.490 And considering that Django web loader is in charge of a reading there where buck starts the Jason file 10:50.750 --> 10:56.050 so that the different resources can then be injected in the index thought HCM will fail. 10:56.090 --> 11:01.380 We need to set a configuration for this package in the settings not by fail. 11:01.430 --> 11:09.700 So for example here at the bottom you have this code that I can just paste like so. 11:10.060 --> 11:18.040 So we're telling Django back loader where the stats file these are where buck starts with Jason so that 11:18.070 --> 11:30.330 now we can save go to the index note each team will file in Europe first of all we can load render Mandal 11:32.000 --> 11:45.750 from wetback no that you know we can inject device so we can use renderer Bondo for up. 11:46.280 --> 11:52.340 So this way here the files are going to be dynamically injected and they're going to change every time 11:52.370 --> 11:55.790 we make a change to the front end application. 11:55.790 --> 12:01.490 So now to wrap it up let's enter the question time folder. 12:01.890 --> 12:10.730 And yet we can't run Jangles development server manager does by server which is always by default is 12:10.730 --> 12:13.950 running only local ost on port eight thousand. 12:14.040 --> 12:16.220 So let's open and you tell me now. 12:16.830 --> 12:27.220 Let's enter the front end folder in the edit we can now run NPM run server which is running you see 12:27.220 --> 12:33.530 on another port but it doesn't matter because if we now go to local lost on port eight thousand. 12:33.700 --> 12:39.410 So if we go to the address where Jan goes development server is served we can now log in. 12:39.430 --> 12:43.780 So I mean and as you can see this is awesome. 12:43.780 --> 12:51.030 We get both view GSA which is remember something that we've left written E R in the index dot aged email 12:51.040 --> 12:54.190 file but we also get the view. 12:54.210 --> 13:01.210 Yes single page application if we now click on about for example you'll see that there is no refresh 13:01.360 --> 13:06.540 and there's a matter of fact the H1 stays here because the page is still the same. 13:06.730 --> 13:13.770 If we take a look at the source code we see that this is at index dot age file but we also have this 13:13.780 --> 13:22.000 script tag which is pointing to bundle dot J yes where we find basically if the application itself not 13:22.000 --> 13:29.980 only that but if we now go back to the page we go to inspect it and then from the console we see hot 13:29.980 --> 13:36.430 module replacement enabled waiting for updates signal from W DSL which is where back development server 13:36.550 --> 13:43.870 and if we now go back to the editor for example let's go to source as see inside the front end views 13:44.440 --> 13:51.220 hole we're going to talk about these view files later on in great detail no worries but for now let's 13:51.220 --> 13:56.590 just change the content of message which is you probably understand is a prop of course. 13:56.620 --> 14:03.940 So let's add some exclamation mark characters like so so without touching the development servers you 14:03.940 --> 14:12.280 see let's now go back to Chrome as you can see the content has been added automatically without any 14:12.280 --> 14:19.060 refresh and that's the magic of hot module replacement so to briefly wrap up what we've done in this 14:19.060 --> 14:26.080 lesson we've created a new application use in view CLIA and this is in fact a complete self-sufficient 14:26.140 --> 14:32.130 single page application we can run these application by using needs development server but considering 14:32.140 --> 14:37.150 that we want our single page application to be loaded from the index thought h the email file we've 14:37.150 --> 14:42.460 installed a package that will keep track of all the code and the changes that are happening in the single 14:42.460 --> 14:48.440 page application while developing and to keep track of all of these new files created called Web bug 14:48.460 --> 14:55.300 starts dot Jason in this file is then read by a Django package called Django where back lo there so 14:55.300 --> 14:59.650 that all the code can be dynamically injected in the index that each team will file.