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

You may also like