In this lesson we are finally going to talk about the powerful view see a lie.
We will understand why we need of UCLA to create that project by making an overview of its features
and by analyzing the components that it creates for us ready to be used.
View C L I stands for view command line interface and it's a full system for a rapid the future yes
development and project scaffolding.
Creating a new project using the command line interface instead of including this script tag in our
HDMI templates like we did in the previous projects is in a way similar to creating a Django project.
We can then start project command meaning that it creates most of the initial boilerplate code and configuration
files that we need automatically allowing us to also install and integrate extra packages in our projects.
Easy as we'll see in great detail during this section using UCLA really simplifies our development experience.
For example we can select the libraries that we want to use immediately such as for example a view router
one of the most important packages of The View ecosystem.
We can develop the HDMI all CSX and the javascript code for our front end project according to our needs
and preferences using for example single file components which are a very convenient way of creating
view components we can use SPSS we can use TypeScript and so on.
Another very useful thing about UCLA is that it provides us a ready to use web back configuration that
allows us to group and magnify all the G.S. CSX and dependencies code in bundles that we can do in use
in production and no worries if this is the first time you're reading about wetback we are going to
talk about it clearly and because of this.
Ready to use configuration working with it is going to be really easy.
At the same time we also get a development server we have hot module replacement show in real time browser
updates about all the changes we are applying to our application while developing.
Which means that to make an example if we make a change to our code using the visual studio code for
example we change an H to tag to our h1 tag we are instantly going to see the change happening in realtime
in the browser without needing to reload the developer server or to refresh the page.
This is one of the most complicated things to configure while using django because in fact we're going
to have two development servers running at the same time but again no worries because we're going to
explain everything step by step.
Last but not least the recent versions of UCLA also include their web interface called view UI that
you can use to manage your existing projects or just create new ones from scratch 3 style of UCLA in
our system.
We need NPM node package manager NPM is the default package manager for no GSA that as you probably
know is a javascript around time environment built on top of Chrome's V8 JavaScript engine that allows
code execution outside of the browser such as for example as US server side language.
So let's jump to Chrome and let's get started as you can see I'm currently in the official website of
the node j yes Foundation at the address.
No the J Yes dot org because of course as we said we need know the J.
Yes to use UCLA and as you can see here you can find the appropriate download links for your operating
system of choice.
You can choose both the long term support or the latest version download the links.
They're both fine and installing node in your system.
You will also get NPM the node package manager which is needed to download and install view CLIA once
installed.
You'll be able to access nodes and NPM from a terminal and so here first of all I can give the commands
node dash V as you can see I'm currently using version eleven dot event and NPM.
This should be and as you can see in my case this is the version of NPM that I'm using.
Not sure yes is a javascript that ran time built on Chrome V8 JavaScript engine that allows us to execute
javascript code outside of the browser.
And so just to give an idea of what this means so we can access a node console by just called the node
so yeah we can now run javascript code for example console dot log.
Hello world but let's just close these for now instead of UCLA using NPM is very easy.
Everything you need to do is to give the command NPM.
I install dash G which means global so that we can access UCLA and create new projects from everywhere
in our system.
Then at the view 4 was Lesh CLIA.
Considering that I'm on Linux I also need to use sudo enter the setup is downloading all the required
files for the installation
and now that everything is installed we can create the view projects from everywhere in our system.
So let's move to the desktop folder for example.
And here we can use the command view create just like we would use there.
Jane Gladney start project command and then of course we need a name for the project itself.
For example in this case.
Hello few we can now select all sorts of features for our project.
First of all we can choose if we want a default configuration or if you want to manually select the
features for our project.
So enter here we can press space to select the features that we want.
For example Bebo but also the router.
Then let's press Enter considering that we're going to use view router.
It asks us if we want to use his mode.
Yes.
Pick a configuration for the limiter you can select.
Yes Linda plus a prettier we've leaned on safe.
Yeah we can just leave the configuration in there pay cage dot Jace on file and now if we want to we
could also save this configuration to use it with future projects but we can just select no.
As you see it's now sitting up the whole configuration for ourselves
and once completed as suggested we can move inside of the folder and give the command NPM a transfer
to run the developer server for our project.
Let's do that.
Hello view is now NPM around server.
Let's press Enter starting the development server.
It's now creating a bill to weave all the modules for the project and similarly to what we get with
Django we now see that the app is running at these local addresses on the port 80 80 and we also see
a very useful ad message which reminds us that the development build is not suited for production because
it's not optimized.
And if we want to create a production build we can just give the command and be an Iran build.
But let's now have a look at this address so copy link addresses.
And this is our low view application.
We see that we have a lot of links to external resources such as for example the documentation forum
chart and so on but up here we also have two more links which are part of the application itself.
And notice how by clicking on DMA there is no refresh happening you see because they're using a view
router the application knows that for each single address.
In this case it's less about and the home page for each one of them.
It is to show a different component.
And this is one of the most important concepts of a single page application that you are going to discuss
and practice in great detail during the whole section.