Coding

VueJS – CLI 3 Tutorial

  • 00:00:01 welcome to this video great to have you
  • 00:00:04 on board in this video I will walk you
  • 00:00:06 through the new view CLI version free we
  • 00:00:09 have a view seal I already version two
  • 00:00:11 and it allowed us to create new view
  • 00:00:13 projects using pre-built templates you
  • 00:00:17 had a registry of templates and you
  • 00:00:19 could choose one and then simply clone
  • 00:00:21 that template initialize it with some
  • 00:00:23 starting options that were presented to
  • 00:00:26 you by the template offers basically and
  • 00:00:28 then get going with that most of the
  • 00:00:31 time you would probably use that webpack
  • 00:00:33 driven template which was one of the
  • 00:00:34 available options and there's nothing
  • 00:00:36 wrong with using that you can continue
  • 00:00:38 using that but the new CLI gives you
  • 00:00:41 more options and follows a different
  • 00:00:43 architecture a different approach so
  • 00:00:46 let's have a look at dead news Eli and
  • 00:00:47 its most important options and how to
  • 00:00:49 use it
  • 00:00:53 obviously we'll start using it in the
  • 00:00:56 command line and I'll show you a small
  • 00:00:59 demo off DC light but let's first get
  • 00:01:01 the big picture how does the new view
  • 00:01:03 CLI work after you installed it for
  • 00:01:06 which I will show you the command in a
  • 00:01:07 second you can run you create to create
  • 00:01:10 a new view project previously with the
  • 00:01:13 old Xilai you used view in it and this
  • 00:01:15 command can still be enabled but more on
  • 00:01:17 that later but now you use view create
  • 00:01:20 to create a new project and then you're
  • 00:01:22 presented with a choice do you want to
  • 00:01:24 use a preset and you can save your own
  • 00:01:26 presets or use some free build one or do
  • 00:01:30 you want to create a new project where
  • 00:01:32 you configure everything on your own now
  • 00:01:34 if you use a preset then you're done you
  • 00:01:36 get the options off the preset and you
  • 00:01:38 get a project with which you can work if
  • 00:01:40 you choose custom config you can choose
  • 00:01:42 from a set of different plug-ins you can
  • 00:01:45 add to your CLI project because the new
  • 00:01:48 views Eli is heavily plug-in driven you
  • 00:01:52 can add your own plugins even you can
  • 00:01:54 write your own plugins and distribute
  • 00:01:55 them and you can add functionalities to
  • 00:01:58 a view CLI project by adding plugins and
  • 00:02:00 some choices are presented to you when
  • 00:02:02 installing or when creating a new
  • 00:02:04 project you can add plugins like linting
  • 00:02:07 progressive web app support and way more
  • 00:02:09 we'll see it in action soon you can then
  • 00:02:13 once you're done also save that as a new
  • 00:02:16 preset if you want so that you can use
  • 00:02:18 it for future creations and you don't
  • 00:02:20 have to go through that manual conflict
  • 00:02:21 process for every new project so you can
  • 00:02:24 save your own favorite template and once
  • 00:02:28 that is done and you got a new project
  • 00:02:30 either with a preset or with your custom
  • 00:02:33 configuration you can of course develop
  • 00:02:35 in there get features like a development
  • 00:02:37 server hot reloading all that fun stuff
  • 00:02:40 which you would expect and you can of
  • 00:02:42 course build your project so then it's
  • 00:02:44 close to the old C light but of course
  • 00:02:46 with the contact and the power of the
  • 00:02:48 new CI you can then also add plugins to
  • 00:02:52 that project after you created it and
  • 00:02:54 that's a huge advantage compared to the
  • 00:02:56 old CLI there you got this template
  • 00:02:58 you couldn't configure that much and
  • 00:03:00 once you created the project it was
  • 00:03:03 pretty hard to change that configuration
  • 00:03:04 you basically had to dive into the
  • 00:03:07 configuration fault who add features and
  • 00:03:09 once you can of course do that it's not
  • 00:03:12 that much fun with the news Eli you can
  • 00:03:15 easily pull in official plugins and I
  • 00:03:17 will show you how such plugins are
  • 00:03:20 distributed and how to find them you can
  • 00:03:22 easily pull in such plugins into your
  • 00:03:24 existing project and add the
  • 00:03:26 functionality you want without creating
  • 00:03:28 a new project that's a huge plus so this
  • 00:03:32 is how the seal I works in the big
  • 00:03:34 picture now let's take a closer look at
  • 00:03:37 that and let's actually start using it
  • 00:03:38 and let's of course start with
  • 00:03:40 installing it now for that you ran NPM
  • 00:03:43 install – G to install it globally add
  • 00:03:47 view CLI and that's important the old
  • 00:03:50 seal I could and can still be found at V
  • 00:03:53 you see lie written like this view – CLI
  • 00:03:55 the newest Eli is found at at view / CLI
  • 00:04:00 so these are two different packages and
  • 00:04:02 you can use either of the two you don't
  • 00:04:03 have to upgrade and by default with view
  • 00:04:06 – CLI you still get the old one this is
  • 00:04:09 the new one you can of course also use
  • 00:04:10 yarn to install that if you're using
  • 00:04:12 that it's an alternative package manager
  • 00:04:14 and on Mac and Linux you probably need
  • 00:04:17 to add a pseudo in front of that to get
  • 00:04:18 the right permissions to install that on
  • 00:04:20 Windows it should work without sudo then
  • 00:04:23 you can hit enter you might be prompted
  • 00:04:25 for your password and then TC light gets
  • 00:04:28 installed and now it's important this
  • 00:04:30 will replace the view binary which you
  • 00:04:33 used to run view in it so from now on
  • 00:04:36 you can't run view in it anymore at
  • 00:04:38 least not without a little change or a
  • 00:04:42 little addition which I will show you
  • 00:04:43 later so let's wait for this
  • 00:04:45 installation to finish now now with the
  • 00:04:48 CLI installed you can run you create to
  • 00:04:50 create a new project and there's one
  • 00:04:51 thing you need to specify here and that
  • 00:04:53 is the project name so I'll name it view
  • 00:04:57 CLI – new you can of course choose any
  • 00:05:00 name you want now you can it enter them
  • 00:05:03 and once you do that you can choose a
  • 00:05:06 preset here now I already created one
  • 00:05:08 dummy preset and I saved that that is
  • 00:05:10 why I can choose it you can also go with
  • 00:05:13 the default preset which you while you
  • 00:05:15 see which features it gives you it gives
  • 00:05:16 you Babel so that you can use next-gen
  • 00:05:18 JavaScript features and
  • 00:05:20 or they're interesting manually select
  • 00:05:23 features if we hit enter there we can
  • 00:05:25 check these features by navigating with
  • 00:05:27 the arrow keys and hitting space on any
  • 00:05:29 feature we want our mark so there we can
  • 00:05:32 add things like babel progressive web
  • 00:05:34 app support we can decide if we want to
  • 00:05:36 use the view router in the project or
  • 00:05:38 the UX if we want to add CSS
  • 00:05:40 pre-processing so if we want to use sass
  • 00:05:42 for example linting unit testing all
  • 00:05:45 these things once you're done you can
  • 00:05:46 simply hit enter and now some of the
  • 00:05:49 plugins might need additional
  • 00:05:51 configuration for example the linting
  • 00:05:53 plug-in here is asking us for which
  • 00:05:55 Linton rules to use and I'll go with the
  • 00:05:58 standard configure I also have to choose
  • 00:06:01 if I want to lint on save and that's
  • 00:06:03 also coming from that linting plug-in
  • 00:06:05 and it will confirm the default here and
  • 00:06:07 then you can define where you want to
  • 00:06:09 manage your options in dedicated config
  • 00:06:11 files which will be added to your
  • 00:06:13 project folder or do you want to manage
  • 00:06:15 all the configuration in the
  • 00:06:16 package.json file and I will go with the
  • 00:06:19 dedicated config files you're then
  • 00:06:22 prompted whoever you wanna save that
  • 00:06:24 preset for future projects and if I you
  • 00:06:26 hit yes you can give it a name standard
  • 00:06:29 custom whatever you want and now with
  • 00:06:32 you run you create again you'll have
  • 00:06:34 this as an option now let's wait for
  • 00:06:37 this to finish and once it finishes let
  • 00:06:39 me show you something interesting in
  • 00:06:41 your user folder on your operating
  • 00:06:43 system you'll find that you are see file
  • 00:06:45 it's a hidden file so you might need to
  • 00:06:47 turn on the option to view hidden files
  • 00:06:49 and if you inspect that let's say with
  • 00:06:52 the normal text edit app then this
  • 00:06:54 actually is the global configuration for
  • 00:06:56 the new views Eli and there you also see
  • 00:06:59 all the presets you created so let me
  • 00:07:02 increase that here you see that presets
  • 00:07:04 note that's my dummy preset and that's
  • 00:07:06 the one I just configured and there you
  • 00:07:08 see which plugins we added for this
  • 00:07:10 preset and for each plug-in if it
  • 00:07:13 requires additional configuration which
  • 00:07:15 configuration options you chose so this
  • 00:07:17 is where it just gets stored and this of
  • 00:07:19 course alls is a place where you can
  • 00:07:21 edit this for example if I wanted to get
  • 00:07:23 rid of my test1 preset well then I could
  • 00:07:26 of course simply delete it from here
  • 00:07:28 like this in the meantime my
  • 00:07:31 installation finished and we're now
  • 00:07:33 ready to use our
  • 00:07:34 new project we see some commands with
  • 00:07:36 which we can get started here so I can
  • 00:07:38 simply navigate into my newly created
  • 00:07:40 folder and run npm run surf which is a
  • 00:07:42 npm script automatically generated to
  • 00:07:45 use the locally so in that project
  • 00:07:47 installed view Szalai you bring up the
  • 00:07:50 development server and build a
  • 00:07:51 development bundle so if I hit enter
  • 00:07:53 here this will bring up that dev server
  • 00:07:55 built the project for the first time and
  • 00:07:58 once done it'll allow you to whizz it
  • 00:08:00 this URL here to visit your running page
  • 00:08:03 which is life reloading upon changes has
  • 00:08:06 hot module reloading all that fun stuff
  • 00:08:08 you would expect here it is that's the
  • 00:08:10 starting page it generated for you now
  • 00:08:13 let's have a look at that project that
  • 00:08:15 gave us in an IDE
  • 00:08:16 I opened the project in Visual Studio
  • 00:08:19 code the ID I'm using here it's a free
  • 00:08:22 IDE and in this project we see this is
  • 00:08:25 what the seal I generated for us we get
  • 00:08:27 a bunch of config files since I chose
  • 00:08:30 that store each configuration for each
  • 00:08:32 of the features we're using in a
  • 00:08:33 separate file and we get the
  • 00:08:35 package.json file where we see the
  • 00:08:37 scripts that gave us these are the
  • 00:08:39 scripts we can run with npm run and then
  • 00:08:41 the script name and there we got a
  • 00:08:43 script for development and serving that
  • 00:08:45 development server and for building the
  • 00:08:47 production app this will automatically
  • 00:08:49 use production ready settings and
  • 00:08:51 optimize everything we also see some
  • 00:08:54 dependencies here and one thing you
  • 00:08:56 won't see neither here in the
  • 00:08:58 dependencies nor here in the conflicts
  • 00:09:00 is the web pack configuration now the
  • 00:09:02 view Szalai does use webpack under the
  • 00:09:05 hood it basically hides it away in these
  • 00:09:08 view CLI plugins or to be precise in the
  • 00:09:12 views eli's service here this is where
  • 00:09:14 it uses web pack and you can't directly
  • 00:09:18 access the web pack configuration though
  • 00:09:20 you can extend it and details can be
  • 00:09:22 found about this advanced feature in the
  • 00:09:25 official docks of TCL ID which you of
  • 00:09:27 course find a link attached to this
  • 00:09:29 video you don't really have to tweet
  • 00:09:32 that though because as you will see in
  • 00:09:33 that link you can't add things to the
  • 00:09:35 conflict if you need to but most of the
  • 00:09:37 time using these plugins gives you a lot
  • 00:09:39 of power and a lot of features now here
  • 00:09:43 in the package to chase if all we also
  • 00:09:44 see that browsers list thing this allows
  • 00:09:47 you to set up
  • 00:09:48 which browsers you want to support with
  • 00:09:50 your project and this is important for
  • 00:09:53 plugins like D or for tools like the
  • 00:09:56 autoprefixer which will be added
  • 00:09:59 automatically it's already part of the
  • 00:10:00 default setup which will take your CSS
  • 00:10:03 code and automatically prefix it such
  • 00:10:06 that it works best in the selected
  • 00:10:08 browsers here it's the same for Babel
  • 00:10:10 our setup here uses Babel to give you
  • 00:10:12 next-gen JavaScript support and this
  • 00:10:15 will automatically give you polyfills
  • 00:10:17 for features you're using depending on
  • 00:10:19 which browsers you support so it's
  • 00:10:21 already detecting what it needs to add
  • 00:10:24 therefore this is your browser list and
  • 00:10:26 you can tweak this you'll also find a
  • 00:10:28 link to explanations on how to work with
  • 00:10:30 that and what you can write there
  • 00:10:32 attached to this video and the other
  • 00:10:35 files here well there you can dive in to
  • 00:10:37 configure for example the linting to
  • 00:10:40 configure the compilation of your CSS
  • 00:10:43 code choose configure babel most of the
  • 00:10:47 defaults should be fine but if you need
  • 00:10:48 to you can tweak the conflicts of these
  • 00:10:51 packages now what about these two
  • 00:10:53 folders public and source the public
  • 00:10:56 folder is where you have that index.html
  • 00:10:59 file for your single page app you will
  • 00:11:01 see the manifesto chase and file which
  • 00:11:03 is related to the progressive web app
  • 00:11:05 this file basically provides metadata
  • 00:11:08 information about your app which can be
  • 00:11:09 read by the browser to make it
  • 00:11:11 installable on the home screen
  • 00:11:13 and you can also store some static
  • 00:11:16 assets here though I will also show you
  • 00:11:18 that there is another way of adding
  • 00:11:19 assets which is recommended since that
  • 00:11:22 other way will be handled by web pack
  • 00:11:24 which will do additional optimizations
  • 00:11:26 whereas any assets you add in the public
  • 00:11:28 folder will simply be copied to your
  • 00:11:30 production ready app and will not be
  • 00:11:32 optimized anymore the source folder then
  • 00:11:35 is where you write your code here is
  • 00:11:37 that assets folder that's the other way
  • 00:11:39 I was talking about this file here for
  • 00:11:41 example will be analyzed by web pack and
  • 00:11:44 will be optimized and then besides that
  • 00:11:46 you write your UJS code you got your
  • 00:11:49 main J's file where your view app starts
  • 00:11:51 where you have to root view instance you
  • 00:11:54 have the router where you set up your
  • 00:11:55 router configuration since we added UX
  • 00:11:58 you got a default store with which you
  • 00:12:00 can start working register service work
  • 00:12:02 you don't need to tweak it right now you
  • 00:12:04 can of course if you know what you're
  • 00:12:06 doing this will basically register a
  • 00:12:08 serviceworker to give you that
  • 00:12:10 progressive web app support app view is
  • 00:12:12 our route view component then in the
  • 00:12:15 views folder we find two pages to which
  • 00:12:17 we can navigate we could of course also
  • 00:12:19 store them in components or wherever you
  • 00:12:21 want and components and this setup is
  • 00:12:23 simply non routing components so
  • 00:12:26 components which you don't load through
  • 00:12:28 the router but which you embed through
  • 00:12:30 their tag in our components this is the
  • 00:12:33 setup we have here this is what DC like
  • 00:12:35 gave us and now we can work with that
  • 00:12:37 setup just as you work with the average
  • 00:12:39 setup you can now start adding
  • 00:12:41 components there's really nothing
  • 00:12:43 special about this the syntax is the
  • 00:12:45 same it's the same framework but it
  • 00:12:47 gives you more features and let's have a
  • 00:12:49 look at some of these more features and
  • 00:12:52 what exactly we can do one thing we can
  • 00:12:55 do for example and I mentioned this
  • 00:12:56 earlier on the slide is we can add
  • 00:12:59 plugins after we created this and for it
  • 00:13:02 is of course we need to know which
  • 00:13:03 plugins exist all plugins including the
  • 00:13:06 ones you could create manually have to
  • 00:13:09 follow a certain naming pattern the
  • 00:13:11 package has published on NPM have to be
  • 00:13:14 named view – seal I – flag in – and then
  • 00:13:18 the name of the plug-in and you can
  • 00:13:20 choose that name on your own if you're
  • 00:13:22 developing such a plugin and here we
  • 00:13:24 already see some plug-in well
  • 00:13:26 suggestions by Google there also are
  • 00:13:28 some official plugins they are stored in
  • 00:13:31 an at view CLI plug-in folder there we
  • 00:13:35 have things like babel linting these
  • 00:13:37 were the options you could choose from
  • 00:13:38 during the setup but if you add your own
  • 00:13:41 ones or if you want to use plugins
  • 00:13:42 developed by our view developers well
  • 00:13:45 then you would name the packages like
  • 00:13:47 this and here for example let's have a
  • 00:13:49 look at that beautiful plug-in we can
  • 00:13:51 install that plug-in into our project
  • 00:13:54 and queue install it we don't need to
  • 00:13:56 run npm install but for packages which
  • 00:13:58 are named like this and that's important
  • 00:14:00 this has to be the name you can run a
  • 00:14:03 command in the terminal and this is the
  • 00:14:06 normal terminal here just opened in my
  • 00:14:08 project and that command is view add and
  • 00:14:12 then just the last part of that name so
  • 00:14:15 here we can't
  • 00:14:16 beautiful so I can't run view ad
  • 00:14:18 beautify and it will automatically find
  • 00:14:21 this package because it follows that
  • 00:14:24 naming convention and will install it
  • 00:14:26 and set it up and run through any
  • 00:14:28 prompts this plugin might ask me you
  • 00:14:33 find a link to how you can create your
  • 00:14:35 own plugins in the video description so
  • 00:14:37 that you get a deeper understanding of
  • 00:14:40 how you could create your own plugins
  • 00:14:41 and this is of course a cool feature
  • 00:14:43 because it makes your app very
  • 00:14:45 extensible and it's easy to add new
  • 00:14:47 features to it after you create the
  • 00:14:49 project so here it is CLI the beautify
  • 00:14:53 seal a plugin for example asks me if I
  • 00:14:55 want to use a certain pre-made plugin
  • 00:14:57 which would replace some of my files and
  • 00:14:59 let's choose yes here maybe we can
  • 00:15:02 choose a custom theme I'll hit know the
  • 00:15:06 Alucard components now that's something
  • 00:15:08 beautify specific which would simply
  • 00:15:09 mean we install or we import each
  • 00:15:12 component on its own to keep our bundle
  • 00:15:14 of small let's use yes
  • 00:15:16 yeah let's add a polyfill and let's hit
  • 00:15:19 enter and now this will install the
  • 00:15:21 package the NPM package we could have
  • 00:15:23 done that without the view CLI with NPM
  • 00:15:25 install but do you think it does besides
  • 00:15:28 that is that it adds this extra
  • 00:15:30 configuration these extra prompts it
  • 00:15:32 changes the project as you saw it
  • 00:15:34 changed our files and if I now bring up
  • 00:15:37 that dev server again and for that I
  • 00:15:39 have to quit it first you should quit it
  • 00:15:41 and restart it after while doing bigger
  • 00:15:44 changes like this if I now run that
  • 00:15:46 again whoops NPM runs serve is the
  • 00:15:49 command now it will start the
  • 00:15:51 development server again and hopefully
  • 00:15:53 the beautify plugin didn't break
  • 00:15:55 anything so we should still see a
  • 00:15:56 working app here yes we do and this is
  • 00:16:00 now using unify and gives us that
  • 00:16:02 default setup which we installed with
  • 00:16:05 our prompt answers and that is how to
  • 00:16:09 think about the new seal i it's lagging
  • 00:16:11 driven you can set up a configuration
  • 00:16:14 which is very detailed when you create a
  • 00:16:16 new project and you can always add
  • 00:16:18 plugins to the existing project
  • 00:16:20 thereafter you can also still install
  • 00:16:23 packages without DCI of course you can
  • 00:16:25 still run in a new terminal window here
  • 00:16:28 npm install and then whichever
  • 00:16:30 you need because not every package you
  • 00:16:32 need is a view seal I plug-in for
  • 00:16:34 example Axios as far as I know doesn't
  • 00:16:37 have a view seal I plug-in yet so if you
  • 00:16:40 install X yes you still would have to do
  • 00:16:42 it like this and then you can use it as
  • 00:16:44 taught in the access module of this
  • 00:16:46 course so you're not limited to view CLI
  • 00:16:48 plugins only but if you got such a
  • 00:16:51 plug-in installing and adding it is
  • 00:16:53 particularly easy now there is a special
  • 00:16:56 case and that is related to CSS you
  • 00:16:59 might remember that for creating this
  • 00:17:01 project I didn't check the CSS
  • 00:17:04 preprocessor option there for my project
  • 00:17:06 here doesn't have sass enabled and this
  • 00:17:09 of course means that if I decide to
  • 00:17:12 write some sass code here let's say in
  • 00:17:14 this home component which now uses
  • 00:17:16 beautify here I got my small style there
  • 00:17:21 and let's say I want to change that
  • 00:17:23 style and I want to change it by using
  • 00:17:25 some sass features so I actually want to
  • 00:17:28 select it like this I add my footer
  • 00:17:31 because that is where I have that small
  • 00:17:34 element and I'll be targeting it this
  • 00:17:36 year by the way this name of the author
  • 00:17:39 of this quote so I can select the footer
  • 00:17:42 element and then I want to create my
  • 00:17:45 curly braces and in there I want to
  • 00:17:47 style small and this is not valid CSS
  • 00:17:50 syntax in a CSS we can use that though
  • 00:17:53 and it basically is then converted to
  • 00:17:56 this CSS index but the cool thing about
  • 00:17:59 s CSS is that you could argue that this
  • 00:18:02 syntax is a bit easier to understand so
  • 00:18:05 I want to target small here and give it
  • 00:18:07 a red color now as I said this is not
  • 00:18:09 valid CSS syntax so I have to cheer
  • 00:18:12 switch tous SES s and for that I can go
  • 00:18:15 to my style tag and add the lang element
  • 00:18:18 here and rename this or add the S CSS
  • 00:18:21 option now this is not marked as an
  • 00:18:24 error anymore but I get an error and
  • 00:18:26 that error is of course that it failed
  • 00:18:28 to compile because it didn't find a
  • 00:18:31 loader basically a compiler for sass and
  • 00:18:34 indeed we just have to install it and
  • 00:18:36 this is one thing which is not managed
  • 00:18:38 through a seal I plugin that's why it's
  • 00:18:41 a special case instead you can just run
  • 00:18:43 NPM as
  • 00:18:44 – – save and then it's SAS loader and
  • 00:18:48 you need one other package which isn't
  • 00:18:49 mentioned here note – SAS with that you
  • 00:18:54 had entered and now this will install
  • 00:18:55 that through the normal npm installation
  • 00:18:58 path so no CLI magic is used here and
  • 00:19:01 this will make sure that this seal I
  • 00:19:04 project here can compile your code
  • 00:19:06 because the cool thing is it has a setup
  • 00:19:08 where it will basically check for the
  • 00:19:10 existence of SAS loader and node SAS and
  • 00:19:13 if it does exist it will compile your
  • 00:19:16 code from SAS to CSS and otherwise it
  • 00:19:20 won't so it has this auto detection we
  • 00:19:23 could say and now we've dead if I bring
  • 00:19:25 up my development server again we should
  • 00:19:28 see a red offer name because of my s CSS
  • 00:19:33 code which is now compiled and indeed if
  • 00:19:36 I reload it's red so this is working and
  • 00:19:38 this is just a special case I wanted to
  • 00:19:41 bring to your attention if you want to
  • 00:19:43 switch from CSS to s CSS for an existing
  • 00:19:46 project you don't have to create a new
  • 00:19:47 one you can do that simply by installing
  • 00:19:50 these two packages and you can by the
  • 00:19:52 way all views our CSS preprocessors
  • 00:19:54 check out the official seal all dogs
  • 00:19:56 there you'll find instructions on how to
  • 00:19:58 use a stylus or less if you want to use
  • 00:20:01 that we already saw quite a lot of the
  • 00:20:03 very nice features the new seal I offers
  • 00:20:06 us now one common thing you need in
  • 00:20:09 bigger apps is environment variables
  • 00:20:12 environment variables are configuration
  • 00:20:15 variables you could say or global values
  • 00:20:17 which you want to inject into your app
  • 00:20:20 for example URLs which then might differ
  • 00:20:23 in the production and in the development
  • 00:20:26 environment a good example would be API
  • 00:20:29 keys or URLs for your testing
  • 00:20:32 environment you might reach out to some
  • 00:20:34 testing API or to an IEEE API with a
  • 00:20:37 test API key which has a lot of access
  • 00:20:41 rights for example attached to it for
  • 00:20:43 production you don't want to use that
  • 00:20:45 same key or that same URL instead you
  • 00:20:48 want to use a production ready URL and
  • 00:20:50 you want to swap that API URL or that
  • 00:20:52 API key obviously you can manually edit
  • 00:20:55 your code right before you build your
  • 00:20:57 app for
  • 00:20:58 action but it would be nicer if you
  • 00:20:59 could simply store it your values and
  • 00:21:02 then automatically inject them into your
  • 00:21:04 code and just reference these global
  • 00:21:06 values and have them replaced
  • 00:21:08 automatically and DC lies reports that
  • 00:21:10 let me show you how this works not at
  • 00:21:13 the example of HTTP request I send but
  • 00:21:16 still over URL upon an output let's say
  • 00:21:18 so in my home that view file which is
  • 00:21:21 basically that page which is loaded here
  • 00:21:23 let's output something there and there I
  • 00:21:26 will add a h1 tag or let's say paragraph
  • 00:21:29 to make it less big a paragraph where I
  • 00:21:32 say hello just to see that this works
  • 00:21:34 yeah there it is and now let's say we
  • 00:21:36 want to output a URL here the URL to
  • 00:21:39 which we would normally send the HTTP
  • 00:21:40 request now obviously we can send it
  • 00:21:43 there so here I have my dev dot API
  • 00:21:47 dot-com URL and this is as the name
  • 00:21:50 suggests my development API let's say so
  • 00:21:53 for development it's fine that this gets
  • 00:21:55 printed but if I now build this for
  • 00:21:57 production I don't want to use that so
  • 00:22:01 for that I don't want to hard code it in
  • 00:22:04 there instead I want to store it in some
  • 00:22:07 environment variable file which is then
  • 00:22:09 handled by the View seal I for that I
  • 00:22:12 can create a new file here in my project
  • 00:22:14 folder which I named dot and now dot
  • 00:22:18 ends is a file which will automatically
  • 00:22:21 be picked up by this Eli where I can
  • 00:22:23 store values which I can use in my
  • 00:22:26 project and environment variables are
  • 00:22:28 simply key value pairs and there you can
  • 00:22:31 add a view underscore app URL name and
  • 00:22:35 then an equal sign and then the value
  • 00:22:37 which could be my HTTP staff dot API
  • 00:22:40 dot-com value now with that added if you
  • 00:22:43 save that you can reference this name in
  • 00:22:47 your components or in your code not just
  • 00:22:50 any components you could of course also
  • 00:22:52 use it in your view instances so there
  • 00:22:55 you could use it in computed properties
  • 00:22:57 in Watchers anywhere you can use it in
  • 00:22:59 your entire project essentially it's
  • 00:23:01 injected everywhere you can use it in
  • 00:23:03 the view X store you can use it
  • 00:23:04 everywhere and actually it will use it
  • 00:23:07 in such a way here in home view there I
  • 00:23:09 can't direct the output it
  • 00:23:11 a template because it's injected into my
  • 00:23:15 code but it's not set up as a view
  • 00:23:17 instance data property which I could
  • 00:23:20 output here so instead it will be
  • 00:23:22 available in all my JavaScript code so
  • 00:23:25 let's add my script tag there this
  • 00:23:27 creates the view instance for this
  • 00:23:28 component or allows us to configure it I
  • 00:23:30 should say and there I can add that data
  • 00:23:32 field which has to be a function here as
  • 00:23:35 you learned where I returned my URL
  • 00:23:39 let's say and here I then reference
  • 00:23:42 process dot n
  • 00:23:44 dot view app URL that's important you
  • 00:23:47 don't use just a name like this instead
  • 00:23:50 you add process dot and dot and this is
  • 00:23:53 simply a hard-coded or an a provided
  • 00:23:56 object you could say provided to you by
  • 00:23:59 the view CLI which gives you access to
  • 00:24:01 your global variables and now we can
  • 00:24:03 they use that URL property here in our
  • 00:24:06 paragraph with string interpolation like
  • 00:24:08 this before we see that though I need to
  • 00:24:11 restart my dev server for it to pick up
  • 00:24:13 that and file and really take it into
  • 00:24:15 account in its configuration once this
  • 00:24:20 is done after reloading you see that URL
  • 00:24:22 here now of course I mentioned that we
  • 00:24:26 could use that to swap that value and
  • 00:24:28 right now we have a global place where
  • 00:24:31 we can manage it which already is nice
  • 00:24:32 and suffices in some cases because now
  • 00:24:35 at least you can manage your URL here
  • 00:24:38 and if you use it in different
  • 00:24:39 components you only have to change it in
  • 00:24:41 one place to change it everywhere so
  • 00:24:43 that's already great but to also get
  • 00:24:45 that different value thing going you can
  • 00:24:48 simply add another file here and that is
  • 00:24:51 the dot ends dot and now you got
  • 00:24:53 different modes you get free modes out
  • 00:24:56 of the box you got a development mode
  • 00:24:58 you got a test mode and you got a
  • 00:24:59 production mode and these modes are
  • 00:25:02 simply global configurations
  • 00:25:04 automatically managed and handled and
  • 00:25:06 set by the view CLI so if you name that
  • 00:25:09 file dot and dot development then this
  • 00:25:14 file will be used during development so
  • 00:25:16 now if I take my view app URL here and
  • 00:25:18 add it into this file and here I used F
  • 00:25:21 and for the other file I use just API
  • 00:25:24 dot come without death
  • 00:25:25 like this then you will see that this
  • 00:25:28 dot and if not development file will be
  • 00:25:30 used after restarting dear nd server
  • 00:25:33 here with NPM runs earth so after
  • 00:25:35 restarting this we should now see def
  • 00:25:38 here in our page still so if we reload
  • 00:25:41 this we still see def API and not this
  • 00:25:45 URL which I set up in the dot and file
  • 00:25:47 which we previously used so it now uses
  • 00:25:49 this foul because of the dot development
  • 00:25:52 because this is one of the default nodes
  • 00:25:54 DC ly supports and as I said
  • 00:25:56 alternatives are production so if you
  • 00:25:59 had a dot n F dot production file then
  • 00:26:01 this one would get used for production
  • 00:26:03 builds which you by the way create by
  • 00:26:06 running npm run build this will
  • 00:26:09 automatically set mode production and
  • 00:26:11 you have a test mode too for that you
  • 00:26:14 can add a dot and if not test file and
  • 00:26:16 you don't need to add all these files
  • 00:26:18 only need them in places where you
  • 00:26:20 really want to override some setting so
  • 00:26:22 i will get rid of test and production
  • 00:26:24 here but if you are need that if you
  • 00:26:26 need to get rid of a setting and
  • 00:26:28 overwrite it then these files help you
  • 00:26:30 with that because they will then
  • 00:26:32 overwrite any keys you might set in our
  • 00:26:36 end files and one important note about
  • 00:26:39 the key names i named mine view app
  • 00:26:42 underscore URL now you need to name it
  • 00:26:45 view underscore app and then your name
  • 00:26:48 for it to be available in your client
  • 00:26:51 side so in your view code so as we are
  • 00:26:54 using it here in the home dot view by
  • 00:26:57 accessing process and and then the name
  • 00:26:59 this only works because it starts with
  • 00:27:01 view app if i had named it just my cool
  • 00:27:06 name then it would not be available
  • 00:27:09 there so for your environment variables
  • 00:27:12 to be available in your view code they
  • 00:27:15 need to start with you underscore app
  • 00:27:17 underscore and then your name this is
  • 00:27:20 really important otherwise well you can
  • 00:27:23 try it but otherwise it just won't work
  • 00:27:25 so we covered a lot of ground already
  • 00:27:28 we'll learn a lot about environment
  • 00:27:29 variables to plugins and so on now I was
  • 00:27:32 talking about building the app before
  • 00:27:35 and about these different modes building
  • 00:27:38 simply means that we
  • 00:27:39 compiled or a code to a bundle and the
  • 00:27:41 serf command here test is automatically
  • 00:27:44 it does dead in memory and spins up that
  • 00:27:47 development server which then serves
  • 00:27:49 that development bundle with debugging
  • 00:27:51 tools enabled and all of that the build
  • 00:27:54 command does dead for a production ready
  • 00:27:57 bundle and as you can see we got some
  • 00:28:00 commands set up in the package.json file
  • 00:28:02 and they all use view seal eyes service
  • 00:28:05 now that's a package we didn't install
  • 00:28:07 it's a package which was installed
  • 00:28:09 automatically here it is which was
  • 00:28:12 installed automatically when we created
  • 00:28:14 this project it only exists in this
  • 00:28:17 project it's not installed globally so
  • 00:28:19 if you would run view build here this
  • 00:28:23 would fail because the view Celaya
  • 00:28:26 service which is doing this only exists
  • 00:28:28 locally and not globally on your machine
  • 00:28:30 and the view CLI itself does not have
  • 00:28:33 that functionality added to it because
  • 00:28:35 of that plug-in driven architecture the
  • 00:28:38 build commands itself are part of a
  • 00:28:40 plugin to of that civilized service
  • 00:28:43 plugin here basically so you can of
  • 00:28:46 course add your own scripts though like
  • 00:28:48 build development and then you could
  • 00:28:53 define that there you want to use that
  • 00:28:54 local view CLI service and now the
  • 00:28:58 interesting thing is I can run built
  • 00:29:01 there and by default this would build it
  • 00:29:03 for production now I can set my mode
  • 00:29:07 here and remember I talked about mode
  • 00:29:10 when I talked about the environment
  • 00:29:11 variables with – – mode I can set my
  • 00:29:14 mode here queue development this is one
  • 00:29:19 of the free built-in modes if I now save
  • 00:29:22 this and I run npm run build colon
  • 00:29:25 development so I'm using that script I
  • 00:29:27 just created it will use that local CLI
  • 00:29:30 service to create that built and it will
  • 00:29:32 now not just build it for memory as it
  • 00:29:35 does with surf but it will give me a
  • 00:29:37 build folder that dist folder which
  • 00:29:39 contains my build application but and
  • 00:29:42 that's important in development mode
  • 00:29:44 which is why it's not minified in
  • 00:29:46 anything like that and it is in
  • 00:29:48 development mode because i you set this
  • 00:29:51 mode to development
  • 00:29:53 so this is how you can build it and how
  • 00:29:55 you can work with modes and one
  • 00:29:57 additional note you can also create your
  • 00:29:59 own modes I can build for staging for
  • 00:30:02 example it's not one of the free
  • 00:30:04 built-in modes and then I could use a
  • 00:30:06 dot and dot staging file here to set
  • 00:30:10 variables for my custom mode here and
  • 00:30:12 with dead if I now run this again it
  • 00:30:15 will still work because it accepts this
  • 00:30:17 custom mode
  • 00:30:18 cue it will then not of course use some
  • 00:30:21 of the optimizations it sets on its own
  • 00:30:23 for production for example because it
  • 00:30:25 isn't production mode but if you tweak
  • 00:30:28 the webpack config and set your own
  • 00:30:30 custom variables here you can run your
  • 00:30:33 custom mode you just have to do more
  • 00:30:35 work then because as I just explained to
  • 00:30:38 build for example will not be optimized
  • 00:30:40 because it's not building for production
  • 00:30:43 so it doesn't detect that this should be
  • 00:30:45 comparable to production for example but
  • 00:30:48 if you need all that fine tuning you can
  • 00:30:50 dig into the official web pack
  • 00:30:52 configuration and you can set your own
  • 00:30:54 mode and that is really cool thing a lot
  • 00:30:56 of it works out of the box then you
  • 00:30:58 can't add plugins and if you need full
  • 00:31:00 control you can have that too
  • 00:31:02 you can customize everything essentially
  • 00:31:04 now let me come back to these belts and
  • 00:31:07 what we got there the view CLI has an
  • 00:31:10 average olfi Chur which is named instant
  • 00:31:12 prototyping I mentioned that these
  • 00:31:16 commands here which you execute in the
  • 00:31:17 package to chase and fall with these
  • 00:31:19 scripts that these commands aren't
  • 00:31:21 available globally because the view CLI
  • 00:31:24 service is a local package installed
  • 00:31:26 into that project well you can install a
  • 00:31:29 global view Szalai service you install
  • 00:31:32 it with NPM install – g2 install it
  • 00:31:35 globally and then it's at the slash c
  • 00:31:39 l– i – service – global and on Mac and
  • 00:31:43 Linux you might need to add sudo at the
  • 00:31:45 beginning again this will now install
  • 00:31:47 that it will install that seal ice
  • 00:31:50 service which you all's used locally in
  • 00:31:52 the project here globally so then you
  • 00:31:55 will be able to run you build on a
  • 00:31:57 global level which is nice but there's
  • 00:32:00 one feature which is a lot nicer
  • 00:32:02 actually which I want to show you so
  • 00:32:05 let's wait for this to finish
  • 00:32:06 so for me it did finish and now I could
  • 00:32:08 run view build here – I would have to
  • 00:32:10 target a file though I'll come back to
  • 00:32:12 that in a second but an agriculture I
  • 00:32:15 want to show you first is called instant
  • 00:32:16 prototyping let's say you you have such
  • 00:32:19 a project or you have a totally empty
  • 00:32:21 folder with one view component only
  • 00:32:24 hello dot view this is now not embedded
  • 00:32:27 into my project it's not even in the
  • 00:32:29 source folder and in there I'll just add
  • 00:32:32 my template where I add a h1 tag where I
  • 00:32:35 say hello and this is a very simple view
  • 00:32:38 component and of course you could use
  • 00:32:39 script there add styles things like that
  • 00:32:42 if you just want to serve such a
  • 00:32:45 component and have a look at it you can
  • 00:32:47 now run view sir–the and for that you
  • 00:32:49 need to add global sea life service and
  • 00:32:51 then the name of the view component you
  • 00:32:54 want to serve and this now starts a
  • 00:32:56 development server and loads this view
  • 00:32:58 component into it so you can inspect a
  • 00:33:01 single view component of course if that
  • 00:33:03 component depends on things like routing
  • 00:33:05 and so on it'll get hard because that
  • 00:33:08 information will then probably be
  • 00:33:09 missing but if you just want to look at
  • 00:33:11 a standalone component now I can reload
  • 00:33:14 my dev server and I just see hello and
  • 00:33:16 this is this one component getting
  • 00:33:18 loaded here and this is pretty awesome
  • 00:33:20 in my opinion because this gives you a
  • 00:33:22 way of quickly creating new components
  • 00:33:25 and looking into them and working on
  • 00:33:27 single components if you just need that
  • 00:33:29 functionality if you don't want to work
  • 00:33:31 on the entire app all the time and kind
  • 00:33:34 of related to this is one advanced
  • 00:33:36 feature or one cool feature related to
  • 00:33:38 building which I also want to show you
  • 00:33:40 view surf was nice but now let me also
  • 00:33:43 show you something regarding the build
  • 00:33:46 process thus far we used the
  • 00:33:48 package.json file and there I said that
  • 00:33:51 the build command would build it for
  • 00:33:52 production and that is true the question
  • 00:33:55 justice what does it build for
  • 00:33:57 production and as it turns out we have
  • 00:33:59 three different build targets or three
  • 00:34:02 different ways of building that
  • 00:34:04 application and with dead I'm not
  • 00:34:05 talking about the modes instead when
  • 00:34:08 building a view project or when building
  • 00:34:11 a view component even we can build it
  • 00:34:14 for or as a view app we can also build
  • 00:34:17 it as a view library though which we
  • 00:34:19 could use in our apps
  • 00:34:20 if we're building our own component
  • 00:34:22 library for example or and that's really
  • 00:34:24 awesome
  • 00:34:25 we could build a web component and the
  • 00:34:27 web component is now not a view app but
  • 00:34:30 it's a normal web component and in case
  • 00:34:32 you don't know what it is it's like a
  • 00:34:34 custom HTML element and that is just
  • 00:34:37 what view components are right but a
  • 00:34:39 custom HTML element which you can use
  • 00:34:42 outside of view applications too and
  • 00:34:45 that's the awesome thing you don't need
  • 00:34:47 to embed it into a root view instance
  • 00:34:49 you can dump it into a HTML file then
  • 00:34:52 you need to add to JavaScript imports
  • 00:34:55 because it still is driven by JavaScript
  • 00:34:57 behind the scenes but it's registered as
  • 00:34:59 a standalone element to the browser
  • 00:35:01 this is an official browser API web
  • 00:35:03 components so we can then build our view
  • 00:35:06 components as reusable web components
  • 00:35:09 which we can use in a react project in
  • 00:35:11 an angular project or in a vanilla J's
  • 00:35:13 project let's have a look at this
  • 00:35:16 step-by-step the view app is what we
  • 00:35:18 built thus far we run it with view build
  • 00:35:21 – – target app or just view build it's
  • 00:35:24 the default the default target is app
  • 00:35:26 this gives us a normal view app bundle
  • 00:35:28 which is optimized minified where code
  • 00:35:31 splitting is automatically used to lazy
  • 00:35:33 load routes where you configure them to
  • 00:35:35 be lazy loaded have a look at the
  • 00:35:36 routing section to learn how that worked
  • 00:35:38 and it includes your code and the view
  • 00:35:41 framework because it gives you an entire
  • 00:35:43 bundle which runs standalone where you
  • 00:35:45 don't need to add any other imports now
  • 00:35:47 for the library you built that with view
  • 00:35:50 built target lip what this does is it
  • 00:35:53 gives you a project which holds your
  • 00:35:55 code and that's of course a typical use
  • 00:35:57 case would be a bunch of components to
  • 00:36:00 build a view component library it does
  • 00:36:03 not include the view framework though so
  • 00:36:05 if you use that library you need to
  • 00:36:07 ensure that you use it in a new View
  • 00:36:10 application which then includes your
  • 00:36:12 code which then includes that library
  • 00:36:14 and the view framework so this is how
  • 00:36:16 that would work and for the web
  • 00:36:18 component we run it with view build – –
  • 00:36:21 targets WC there also is an alternative
  • 00:36:24 command for code split web components
  • 00:36:26 which is a bit more advanced it's
  • 00:36:28 basically web components which are
  • 00:36:30 loaded lazily you find more details in
  • 00:36:32 the official Docs
  • 00:36:33 but the functionality is similar and
  • 00:36:35 then you get a distributable web
  • 00:36:38 component and this is just a file a
  • 00:36:40 JavaScript file which you dump into any
  • 00:36:43 project you will still need to import
  • 00:36:45 view there but you won't need to create
  • 00:36:48 a root view instance you just can use
  • 00:36:50 your HTML tag there after so this also
  • 00:36:54 includes just your code not view and
  • 00:36:56 therefore you will need to import the
  • 00:36:58 you still but don't create a full view
  • 00:37:00 project let me show you how that works
  • 00:37:02 and how we can utilize these features to
  • 00:37:06 build different things so back in the
  • 00:37:09 project I want to show this at the
  • 00:37:11 example of this hello view file here
  • 00:37:14 let's run view build and target hello
  • 00:37:19 dot view and then add – – target app
  • 00:37:22 which is the default if I do that it
  • 00:37:24 builds for production by default as you
  • 00:37:26 can see and by the way the more common
  • 00:37:28 way of using this command of course
  • 00:37:30 would be to use it on the entire project
  • 00:37:33 with just a built command and
  • 00:37:35 package.json which takes your source
  • 00:37:37 folder and there the main J's file and
  • 00:37:39 view X and so on I just want to show
  • 00:37:41 this command on this simple example of
  • 00:37:44 one file but typically if you build an
  • 00:37:46 app you would take the whole project
  • 00:37:47 folder and not a single component but
  • 00:37:50 now I built an app based on that hello w
  • 00:37:52 file and in the distal der I therefore
  • 00:37:55 get my JavaScript folder which holds all
  • 00:37:59 the code which includes the view
  • 00:38:00 framework as I said and although my
  • 00:38:04 component code which would be stored in
  • 00:38:06 here and now we can serve that and for
  • 00:38:09 that we just need a HTTP server because
  • 00:38:12 double-clicking on the index.html file
  • 00:38:14 won't load due to the JavaScript
  • 00:38:16 features being used you can install such
  • 00:38:19 a server with npm install' – g to
  • 00:38:21 install it globally HTTP – server for
  • 00:38:24 example that's a simple note server
  • 00:38:26 which allows you to statically serve
  • 00:38:29 your your web projects and on Mac and
  • 00:38:33 Linux you need to add sudo in front of
  • 00:38:36 that and with that installed you can
  • 00:38:38 navigate into the dist folder with CD
  • 00:38:40 dist in your project folder and then run
  • 00:38:43 HTTP server in there and it will
  • 00:38:45 automatically pick up the index.html
  • 00:38:47 file
  • 00:38:47 and start serving this on that URL that
  • 00:38:51 is the URL I used before so if I simply
  • 00:38:53 reload now I see hello again but this is
  • 00:38:55 now not my development mode I did quit
  • 00:38:59 that server instead it really is my
  • 00:39:01 built project
  • 00:39:02 it's my built and minified project and
  • 00:39:05 as you see you can even build a simple
  • 00:39:07 single view component as a view app
  • 00:39:10 typically as I said though you would of
  • 00:39:12 course build an entire project folder
  • 00:39:15 and therefore you would just run npm run
  • 00:39:17 build to use that local Celia service
  • 00:39:19 and that build command which
  • 00:39:21 automatically targets the source folder
  • 00:39:23 and then the main J's file they're still
  • 00:39:26 nice to have now let's go out of the
  • 00:39:28 disk for back to the root folder and
  • 00:39:30 let's try view build hello dot view with
  • 00:39:34 target set to lib if I do that it now
  • 00:39:39 builds a library a library which we can
  • 00:39:41 use in our view projects so in the dist
  • 00:39:44 folder we therefore simply get a bunch
  • 00:39:47 of outputs which we could now distribute
  • 00:39:50 as a NPM package and for that you should
  • 00:39:52 of course look how that works and how
  • 00:39:53 you really create a production ready
  • 00:39:55 package but in the end this now can use
  • 00:39:59 your code it pulls in the view framework
  • 00:40:03 itself here from a CDN because that is
  • 00:40:06 not included in the library why is it
  • 00:40:08 not included by the way well to not
  • 00:40:09 include it twice and therefore blow to
  • 00:40:11 your final app code so here we did an
  • 00:40:13 export view separately and then here it
  • 00:40:15 pulls in our or library code and simply
  • 00:40:20 uses it so this is a nice demo it gives
  • 00:40:22 you a sets up a very simple app where it
  • 00:40:24 basically showcases what you had there
  • 00:40:27 in the end you would have a library
  • 00:40:29 which you could pull into our project
  • 00:40:32 into our review projects and then import
  • 00:40:34 from that library well as you configure
  • 00:40:36 it basically so as you also import from
  • 00:40:39 the beautiful library ends on so you can
  • 00:40:41 create libraries in an easier way with
  • 00:40:43 that and now let's have a look at the
  • 00:40:46 last build command view build hell out
  • 00:40:48 of you with target WC if I hit enter
  • 00:40:52 here I get an error that we also must
  • 00:40:55 define a name here and that name is
  • 00:40:57 actually the tag which we will later be
  • 00:41:00 able to use so he
  • 00:41:01 I will give this the – – name
  • 00:41:04 configuration and name this my –
  • 00:41:07 greetings and you should use a name
  • 00:41:09 which has a hyphen in there to not clash
  • 00:41:12 with default HTML tags so with that it
  • 00:41:16 will build that web component for
  • 00:41:18 protection as it says and in the disk
  • 00:41:20 for you now find these files and you
  • 00:41:23 also find a demo here and that demo is
  • 00:41:26 very simple it imports view because you
  • 00:41:28 still need that dependency and then my
  • 00:41:31 greeting j/s you also have a minified
  • 00:41:33 version available for production or for
  • 00:41:35 distribution and my greeting jeaious is
  • 00:41:37 really just in the end a normal web
  • 00:41:40 component which still relies on view a
  • 00:41:42 bit but it's not a complete view app
  • 00:41:44 here you don't create a view instance
  • 00:41:47 anywhere you just use this in a normal
  • 00:41:49 HTML file as a normal HTML element and
  • 00:41:53 this could be a file which also uses
  • 00:41:56 angular for example so that's really
  • 00:41:58 awesome you can now use your view
  • 00:42:01 components in any web project browser
  • 00:42:04 support is something to consider for
  • 00:42:06 that and the official Docs
  • 00:42:07 tell you more about that but in the end
  • 00:42:09 this is something which is extremely
  • 00:42:11 interesting already and will probably
  • 00:42:13 become more interesting even in the
  • 00:42:15 future so with that this was a lot about
  • 00:42:18 the new CLI there's one last thing I
  • 00:42:20 want to cover what if you still want to
  • 00:42:22 use view in it but default this will not
  • 00:42:24 work
  • 00:42:25 because the new seal I replaced that
  • 00:42:28 view command which the old CLI also used
  • 00:42:30 so to make view Network again you just
  • 00:42:33 need to install a global package you can
  • 00:42:36 run that or install that on Mac and
  • 00:42:37 Linux with sudo npm install – G on
  • 00:42:40 Windows it's just npm install – g and
  • 00:42:42 then the name of the package you need is
  • 00:42:44 at view slash CLI in it and this will
  • 00:42:48 now enable that init command again so
  • 00:42:51 now you can run view in it again in
  • 00:42:53 exactly the same way as we used in this
  • 00:42:55 course so view in it then which template
  • 00:42:58 you want to use and then the name of the
  • 00:43:00 project so if you prefer this approach
  • 00:43:01 you can still do that I can now still
  • 00:43:04 run you in it web pack there simple view
  • 00:43:08 old CLI for example if I hit enter it
  • 00:43:11 will create a new view project based on
  • 00:43:13 that old seal
  • 00:43:15 so I can answer this and I got this
  • 00:43:18 project so this is still possible with
  • 00:43:20 the help of this extra package so now
  • 00:43:22 you really got the best of both worlds
  • 00:43:24 you can stick to the old CLI if you
  • 00:43:26 prefer that or use the new zeolite with
  • 00:43:28 all the great features I showed you in
  • 00:43:30 this video with all of that we saw the
  • 00:43:33 core features of the new CLI but one
  • 00:43:36 important and interesting feature is
  • 00:43:38 missing back in the terminal let's run
  • 00:43:41 view UI because the new view CLI
  • 00:43:44 actually has a graphical user interface
  • 00:43:46 which you can use this command starts it
  • 00:43:49 and should automatically open up a tab
  • 00:43:51 in the browser which hosts it if not you
  • 00:43:54 can wizard this page to see it and this
  • 00:43:57 is what it looks like this is a
  • 00:44:00 graphical manager and which basically
  • 00:44:02 gives you access to the same commands we
  • 00:44:04 ran from within the command line but now
  • 00:44:07 with this nice interface here you can
  • 00:44:09 see existing projects you created I have
  • 00:44:11 none so this is basically view create
  • 00:44:14 and there you got your file system where
  • 00:44:16 you can navigate around so in there you
  • 00:44:18 could navigate into a folder where you
  • 00:44:20 want to create a new project you can
  • 00:44:22 also by the way favorites that pop so
  • 00:44:24 that you can always quickly access that
  • 00:44:26 folder in the future you can then create
  • 00:44:29 a new subfolder if you want show hidden
  • 00:44:31 folders and then the end create a new
  • 00:44:32 project as you can see you can then
  • 00:44:35 define a name for the folder which will
  • 00:44:37 be created like you see Liu I choose the
  • 00:44:41 package manager you want to use for
  • 00:44:43 managing the dependencies in a project
  • 00:44:45 if you only got NPM installed you will
  • 00:44:47 only use that but if you have yarn you
  • 00:44:49 have two choice you have two
  • 00:44:50 alternatives there you can choose you
  • 00:44:53 want to overwrite that folder if it
  • 00:44:55 already exists and you can decide if
  • 00:44:57 you're using git
  • 00:44:58 if you want to initialize this already I
  • 00:45:00 hope that if we click on next we go to
  • 00:45:02 the presets page and now we can choose
  • 00:45:04 to take our saved preset the default one
  • 00:45:07 or use the manual approach where we then
  • 00:45:10 will go to the next page and now we can
  • 00:45:13 check some features and this is exactly
  • 00:45:15 the same set of features we were
  • 00:45:17 presented in the terminal so here I
  • 00:45:20 could then enable router u X and let's
  • 00:45:23 say CSS pre-processing click Next again
  • 00:45:27 finally here you can add some
  • 00:45:30 configuration for the presets for the
  • 00:45:32 features you added for the plugins you
  • 00:45:34 added this also was something you got
  • 00:45:36 asked when using the terminal now it's
  • 00:45:38 in here so here we can choose for TS CSS
  • 00:45:41 pre-processing which preprocessor to use
  • 00:45:44 for linting which configuration to use
  • 00:45:46 and to lint unsafe and then we can
  • 00:45:48 create the project we can now also save
  • 00:45:51 this preset just as we could in the
  • 00:45:53 terminal or continue without saving and
  • 00:45:55 now this will take a while as it will
  • 00:45:57 create this new folder and install all
  • 00:45:59 the dependencies in there it's up to you
  • 00:46:02 of course if you want to use that user
  • 00:46:03 interface or the terminal I personally
  • 00:46:05 find terminal to be a bit faster for me
  • 00:46:08 but this of course is a bit easier to
  • 00:46:10 work with I'd argue and it's always nice
  • 00:46:12 to have a graphical user interface now
  • 00:46:15 let's wait for it is to finish and with
  • 00:46:17 it finished this is now the project brim
  • 00:46:20 now you can't always go back by click on
  • 00:46:22 the Home icon there now you should see
  • 00:46:24 your project there and there you can go
  • 00:46:26 back into the project and here you see
  • 00:46:28 the installed plugins you can add a new
  • 00:46:30 plugin if you want and there you can
  • 00:46:32 also search so for example if I search
  • 00:46:34 for beautify here it finds that plugin
  • 00:46:37 so that's very convenient this is a way
  • 00:46:39 to find all the available plugins this
  • 00:46:42 is a registry where you can search
  • 00:46:43 plugins or simply browse them all of
  • 00:46:47 course and let's say I want you add that
  • 00:46:50 beautify plug it again then I can simply
  • 00:46:52 click on it here install that plug-in
  • 00:46:54 and now it will do that same thing it
  • 00:46:56 did in the terminal download it and once
  • 00:46:59 it's done it will also ask you for the
  • 00:47:01 configuration that plugin needs so here
  • 00:47:04 it is I can now choose if I want to use
  • 00:47:06 a custom theme no premade template yes
  • 00:47:09 Alucard components pale polyfill
  • 00:47:11 finished installation and this will then
  • 00:47:14 well execute that or install that
  • 00:47:17 plug-in and do all these changes apply
  • 00:47:19 all these changes you can actually see
  • 00:47:21 the changes here before they are applied
  • 00:47:22 so that's really great you see what will
  • 00:47:24 change and then you can commit this here
  • 00:47:28 to get up or you skip to just apply them
  • 00:47:31 and with that this is now added we can
  • 00:47:35 also configure some settings here on
  • 00:47:37 this screen for example the base URL
  • 00:47:40 these are all the things
  • 00:47:41 she could you from within the CLI the
  • 00:47:43 official dog show you a full reference
  • 00:47:45 of CLI commands you can run in the
  • 00:47:48 terminal to configure an existing
  • 00:47:49 project here you have them all in one
  • 00:47:51 page all these settings and in the last
  • 00:47:54 area here you then have these commands
  • 00:47:57 you can run so you can build it you can
  • 00:47:59 serve it you can lend it inspect as an
  • 00:48:01 extra command which lets you look into
  • 00:48:03 the web pack config you're using in the
  • 00:48:06 project view inspect would be the
  • 00:48:08 terminal command you could have also
  • 00:48:11 execute it and overall I can only
  • 00:48:13 encourage you to play around with it and
  • 00:48:15 to take advantage of this graphical
  • 00:48:17 interface especially for browsing
  • 00:48:19 available plugins I had argued that this
  • 00:48:22 is especially useful and overall it's a
  • 00:48:24 nice alternative to the terminal driven
  • 00:48:27 CLI and it's good to have this as it can
  • 00:48:30 really speed up your development process