- 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