It's finally time to start developing the single page application which is going to be the front end
of our project.
So without further ado let's open up and your terminal.
We are currently inside of this folder of course the main folder of the project in itself and considering
that we've installed the view globally we can create a new project that we can just call from tender
and we can just created inside of the question time folder and where it belongs.
As for any other applications so enter let's select the features manually we want to use a router remember
to use the backspace to select all the features that you want to use.
In this case you only want a router Babel and third.
So enter.
Yeah.
Be sure to select.
Yes sir.
Because we want to use history mode for the router.
There is no need to worry about the server configuration because as you probably remember in the US
DOT by file of the project we are using that rejects to actually redirect every other request to that
index template view which will render the index dot h the email file.
Remember so here.
Yes.
Yeah.
We can select yes linked plus PDA with lint on save configuration file scene package that Jason and
not.
There is no need to save.
Press it
as you can see the project was created successfully and we now have this front end folder which contains
all the files that are part of this new view application.
And if we now move to the front end folder and give the NPM around said command starting the development
server and if we now go to these local addresses.
We see that of course your application is that our and going to the console.
We also see that the arts module replacement which is the system that allows us to get all the updates
realtime is working.
Some of you might have already noticed that there is a challenge waiting for us to be solved.
And that's because at the moment the front end View application is basically standalone.
The development server is up and running but this page that we have seen clearly is not the index not
age the email file that we want to use.
Remember that we've created this file so that we can use these DB we've idea app to mount a review application
on and we want this file to be right there by Django so then we can also control who's accessing the
application itself because remember if we go to court views that pay we have added the log in the required
mix seen to the index template class.
And because of our way everything is set to appear on authenticated users will be redirected to the
logging page.
So now basically we need to find a way to have both the view the server and the Django server running
at the same time so that we can enjoy the advantages provided by Django but at the same time also keep
the hot module replacement provided by view and wetback.
We are going to achieve our goal by using two packages the first one for a view and where Puck will
keep track of all the code and the changes happening to our front end application while the second package
used by Django will be able to read everything that the first package is tracking and will dynamically
inject all the code inside the index stored HDMI file.
I know this might sound a bit complicated but I guarantee you that it's easier than it sounds.
Once you know the procedure let us start off by installing the view and web related package which is
called Web back bundle tracker.
And this is also the perfect opportunity for us to introduce a view UI which as we said is basically
a user interface for UCLA.
And considering that again we've installed the view globally we can access it from everywhere.
So yeah in this terminal that is already open.
We can run the command view UI starting graphical user interface ready and as you can see the view project
manager window is opened automatically.
We get at least we have a view to yes projects in our system and in case your project is not found.
You can click on import and then open up the folder that you're working with.
And considering that this is a graphical user interface for the command line interface we've used so
far.
We can also create new projects in case you want to just click on the green button and then follow the
procedure.
The options that are going to be exactly the same as the one we've discussed so far but considering
that we already have a project that we want to work with we can just click on the name of the project.
And here is the project dashboard and this you can read also from this health message here on the left
there we can see a navigation bar that shows all the different pages available in this interface we
can click on plugins to manage all the currently installed plugins and add new ones so we can click
on dependencies to manage and install new dependencies.
We're going to use this feature in a second.
We can click on configuration to access that configuration for this year lie and yes lean to it and
then we can click on tasks.
And this is one of the most powerful pages of the interface.
Clicking on the Iran task button is basically the same as running NPM run server.
The code is compiled.
We have to reload for development and yet below we get a very comprehensive dashboard with all sorts
of information about the development server so let's click.
Iran task as you can see the dashboard is populated with all sorts of information.
We can also see how long it would take to load our application using different kind of connections we
can click on outputs to get basically a console output.
Or we can click on analyzer to get other information specifically about the different components of
the application.
Let us now stop this task so we can click on builder to get a very similar dashboard used in this case
for production.
Now that you know what the user interface is about.
Let's click on dependencies then install dependency.
And from here we can search and install all sorts of different plugins for our project.
For example bootstrap you see.
Yeah.
We also have fun to son at the moment is we said we only want to install a web Park bundle tracker.
Let's click on development dependencies because as we've said the goal for this package is to let the
two development servers communicate with each other.
We are not going to need it in production.
So went back Mandell cracker the package is the first one with the highest number of downloads.
And once it's selected we think we can install back Mandel track it.
Let's wait for the package to be downloaded and installed and once the installation is completed you'll
be back to the project dependencies page and you will find it here we can now go back to visit us to
your code and just the stop and the user interface.
From now on we are going to round the development server Viacom on the line interface which is of course
much lighter than the user interfaces.
So now moving forward we need a web bundle tracker the package we've just installed to keep track of
all the files used by you use development server.
And so to keep track of what is basically the status of the application at any given time the package
is going to create a new file what if you put all the information that is being tracked this file will
then be read by another package by a Django package.
That as we've said at the beginning of the video will then dynamically inject all the code in the index
not HDMI file.
And so in order for the package to properly work we need to create a configuration file inside the front
end application called view that Conficker dot GSA.
And yeah I have already prepared all the code for this file which I'm just going to paste.
So.
So let's have a look at in this file we are sitting up you'll see the configuration for the way back
when the tracker we are telling me to create these file where box dot dot Jason where all the stats
all the information about the front end application are going to be placed and then we have some settings
about the development server as well.
Remember to just copy this file as it is.
You can check these projects repository in my guitar page or just download this file from the downloadable
resources.
And in case you're developing on windows you might want to set public path to this address instead of
below.
You will also see this code commented.
And as you can read from the comments we're going to uncover and it before executing NPM around build.
So before creating the files to use in production.
So if you now open up the terminal.
Once again end.
Now giving the NPM around set of Commander building the files for development and as you can see now
we also have these new file web bug starts the Jason where we have all the information that is being
tracked as you can see so that it can then be read by Django and injected in the index to attach HTML5
so we now need to install this new package to use with Django.
So it is just clean the terminal.
So yeah the beautiful environment is already activated.
We can now use people to install Django where back loader which is the name of the package
and we can also added to the requirements that to 65 so deep freezer requirements not to exceed.
And as always we now need to install these application in the settings that by fail so installed upset.
Yeah.
Epic on this score.
Low there.
And considering that Django web loader is in charge of a reading there where buck starts the Jason file
so that the different resources can then be injected in the index thought HCM will fail.
We need to set a configuration for this package in the settings not by fail.
So for example here at the bottom you have this code that I can just paste like so.
So we're telling Django back loader where the stats file these are where buck starts with Jason so that
now we can save go to the index note each team will file in Europe first of all we can load render Mandal
from wetback no that you know we can inject device so we can use renderer Bondo for up.
So this way here the files are going to be dynamically injected and they're going to change every time
we make a change to the front end application.
So now to wrap it up let's enter the question time folder.
And yet we can't run Jangles development server manager does by server which is always by default is
running only local ost on port eight thousand.
So let's open and you tell me now.
Let's enter the front end folder in the edit we can now run NPM run server which is running you see
on another port but it doesn't matter because if we now go to local lost on port eight thousand.
So if we go to the address where Jan goes development server is served we can now log in.
So I mean and as you can see this is awesome.
We get both view GSA which is remember something that we've left written E R in the index dot aged email
file but we also get the view.
Yes single page application if we now click on about for example you'll see that there is no refresh
and there's a matter of fact the H1 stays here because the page is still the same.
If we take a look at the source code we see that this is at index dot age file but we also have this
script tag which is pointing to bundle dot J yes where we find basically if the application itself not
only that but if we now go back to the page we go to inspect it and then from the console we see hot
module replacement enabled waiting for updates signal from W DSL which is where back development server
and if we now go back to the editor for example let's go to source as see inside the front end views
hole we're going to talk about these view files later on in great detail no worries but for now let's
just change the content of message which is you probably understand is a prop of course.
So let's add some exclamation mark characters like so so without touching the development servers you
see let's now go back to Chrome as you can see the content has been added automatically without any
refresh and that's the magic of hot module replacement so to briefly wrap up what we've done in this
lesson we've created a new application use in view CLIA and this is in fact a complete self-sufficient
single page application we can run these application by using needs development server but considering
that we want our single page application to be loaded from the index thought h the email file we've
installed a package that will keep track of all the code and the changes that are happening in the single
page application while developing and to keep track of all of these new files created called Web bug
starts dot Jason in this file is then read by a Django package called Django where back lo there so
that all the code can be dynamically injected in the index that each team will file.