hey folks my clerk here with the pragmatic studio we just finished building this single pageview app for a course and we used the view CLI to generate the initial app and serve it up during development so let me show you how we did that if you scroll down on this page you'll see the command to install the CLI whether you're using NPM or yarn and I already have it installed so I'm ready to create a new project when you install the view CLI you get the view command and then we'll say create and the name of the app will just be my app and then depending on the app you're building you can either go with the defaults or manually select features and for fish hub we went ahead manually selected the features we wanted for that application based on its requirements so just select that hit enter and then we'll arrow down and select different features we went with Babel we also used a router because this is a single page application for a client side state management we wanted to use view X so we selected that and then we used SAS so we need a preprocessor for it and then we just went ahead and went with the standard linter formatter then go ahead and hit enter and you'll get a couple more prompts do you want to use the history mode for the router sure and then again we use SAS you could use less or stylus if you wanted to we went with SAS and then in terms of the linter I went with es lint plus prettier and then we'll go ahead and let it lint on save and then it asks if you prefer placing the configuration files for some of these features you've selected in dedicated config files or in package.json I like to have them separated out in their own config file hit enter and we'll go with that and then you can save these selections as a preset if you want to if you're going to use the same selections in a future project I'm not gonna do that here alright then it starts creating the project which we sped up through the magic of video so don't run out and buy a new computer thinking yours is too slow this is gonna take a minute now the nice part is without fussing around with any configuration files or webpack or any of that stuff we can go ahead and build and serve the app on our local machine we just CD into the my app directory and run npm run serve just like it tells us to do cool so it's running on this URL but hop over to a browser go ahead and paste that in well there's the app you know it has two pages a home page and a really simple about page okay so what did the CLI generate to make all this happen if we open it up in vs code we see it generated two directories a public directory and a source directory and inside the source directory you'll see an initial set of files based on the features we selected so because we chose a router we get router dot j s and a view X store we got a store dot J s so let's take a peek at the package.json and you see it's already added the dev dependencies for example because we're using sass it knew it needed a dependency on node sass also has our runtime dependencies listed right here because we chose the router we get the view router and we're using view X and then it gave us three scripts serve build and lint and serve is just the alias we used to actually fire up the server so what's nice is all the batteries are included and everything is configured using sensible defaults so this generated some scaffolding but where do you start building on that scaffolding well let's dive a bit deeper into the application in this public directory you're gonna put any static assets that you don't want processed by web pack and you see there's a generated fav icon and also an index dot HTML and inside of there you'll see this div with an ID of app and that's where the view app gets mounted you also see this comment about build files will be auto injected we'll look at how that happens a little bit later the source directory is where you're going to put all your application code the asset subdirectory contains static assets that will be processed by web pack and they gave us a logo by default then the components directory is where you're gonna put any components and the views directory by convention is where you're gonna put files corresponding to specific views or pages in a single page application now this directory is only generated if you chose the router feature also in the source directory we have a handful of loose files so let's start with me Jess and that's the entry point in the application you notice it imports view it also imports the app component the router and the view X store then it creates the view instance which renders this route app component and mount it in the div with an ID of app and we saw that in the index dot HTML file you notice that also the router in the store into all the components so this sets the view instance in motion and you really never need to change this file so let's take a look at this router it's in router AAS and this defines the routes and mapping to components so as you add new pages or views to your application you'll add new routes and then in store dot J S we see it initializes a view X Thor and gives us a starting point to fill in the state mutations and the actions of the store so back in mean it injects those two things router in store then it renders this route app component so let's have a look at it it's right here app dot view it has a template section this is what's going to get rendered in the DOM and then it has some styling for that template right down here so in this file you're gonna need to update these router links as necessary for your application and to see how these router links work let's open the view dev tools in the browser so we're on the home page and if we look in the app component here we see that it's rendering the home component if we click on about then that's going to change to render the about component so what happens is this router view line here changes based on the current route right now we're on slash about which is rendering the about component so it gets rendered right here if we go back to home our route is just slash which maps to the home component and so this is getting replaced by whatever the home component renders so let's have a look at that home component it's under the views directory home dot view and back over here let's close the view dev tools so in this template section we're just gonna add an h1 right here we'll just say my app and when we save that off well this thing gets dynamically reloaded we see my app which is really handy during development you notice it also renders this HelloWorld component passing it a message as a prop so let's go ahead and change that will just say howdy here and again it dynamically reloads so let's have a look at this HelloWorld component it's in the components directory because it's a part of a page or a piece of a page and it just renders the message in an h1 and let's just go ahead and take out all this other stuff and you notice it also has a script section which declares that it expects a prop named message of type string and in this script section is where you'd put any JavaScript that's related to this component so to summarize how everything hangs together we have a component for each page in the views directory so any page you want to add the application you would add a file in here and then those pages can use components for parts of a page and those go in the components directory and those can be nested arbitrarily deep and then in router j/s we have mappings between paths and components now at some point you'll likely want to deploy your app to a production content server and thankfully the view CLI streamlines that too to build the app for production we just use NPM run build and behind the scenes it uses web pack using a configuration that's optimized for most applications to build a production ready bundle so all the vendor libraries end up in this chunk vendors JavaScript file and then our application code is in the app JavaScript file the CSS is in this app CSS file but you also notice that it's generated a separate JavaScript file for the about page well that's because if we come back over here and we look at the router you notice for the about page it has this comment about route level code splitting and so for the about page it's generating a separate chunk which is lazy loaded when that route is visited now you don't have to do that if you don't want to they just give you an example if you want to generate separate chunks for separate pages anyway all this stuff is optimized and minimized and all that good stuff for faster loading speed and you notice that all the build artifacts are put in the disk directory so if we come back over to vs code open up the Explorer there's this new dist directory here it has a CSS directory there's that app dot CSS file our images got put in the image directory then there's a JavaScript directory and now that has bundled J's files and source map files and then you see the fav icon and index dot HTML so what happened was they were in the public directory down here and they just get copied into the top-level dist directory so if we open this index dot HTML file I'll just make this a bit bigger so we can see it you'll notice that its auto injected stuff so it's injected the app dot CSS file down here is that div this is where the view app is mounted but notice it's also injected the chunked JavaScript it's also injected a script tag to load app KS and when the browser evaluates this app dot J's file well that has all the application code which renders the app component that then mounts to this app div so now you just deploy the contents of this district to your favorite static file server now if you want to preview the production build locally you can use any static file server for example I'm going to use the serve NPM package I can just say serve that's the command - yes just tells it it's a single page application and then I give it the name of the directory containing all the stuff I want to serve which is that dist directory then it automatically copied this URL to my clipboard so I come back up at the browser pop that in a new tab well there we go there's our application being served from that district turi anyway I hope that helps you feel more confident about using the view CLI as a starting point now to see how we use view in real applications check out our courses have fun