Angular CLI with SPFx (SharePoint Framework)

hi this is Sahil and this is you the developer you typically use yeoman generator to generate SharePoint framework solutions so what happens is that when you need a react solution the SharePoint framework yeoman generator helps you generate a react solution when you need a knockout solution it helps you generate a knockout SharePoint framework solution so as we get new frameworks will just keep adding on to this skyscraper so what happens is that when you get a new version of react or rather even when you install the latest version of SPF X it's already out of date the newest version of react has moved on so you can't use the yeoman generator anymore actually there are a lot of scenarios where you can't use the yeoman generator like if you have any customizations even if a new version of SharePoint framework comes out you have to hand at it that generate a template if you've taken dependency on third-party libraries custom build steps integration with their source control etc my point is that you should treat the yeoman generator as a starting point you need to take control of the generated project in most real-world scenarios now let's see how do we work with angular well you have angular CLI with which we generate angular solutions a lot of similar challenges apply there but angular CLI has gone through many iterations or people have gotten very comfortable using angular CLI with angular so what ideally we want you you want to own their source code at the end of the day but what you want is a project template that has angular CLI and SPF X together so it gives you a angular plus SPF X solution and the advantage of doing that is that everything that works with angular works with angular CLI now in the community also you're going to find a lot of help on angular CLI if you're a hardcore angular developer chances are that you will find yourself to be more familiar with angular CLI and you're moving according to SPF X so you know what is driving what is the question so I'm a big fan of angular and I like SPF X so I put together this project template where I have you know it's a concept template which I've been using in my projects which uses angular CLI supports everything a or T SAS lazy loading everything that you'd expect from angular and it works with SPF X in the way you'd expect it to work with SPF X so let me talk about that with a demo so I run a Windows 10 machine here that is already pre-configured to work with SPF X but everything I'm showing you will work on a Mac as well in fact I wrote all this code on a Mac I'm just using the Windows machine for recording purposes so let me show you what all I have here no dash dash version so that's my node version and p.m. dash dash version so that's my npm version when it wakes up okay and let me show you my local packages and PM list - t - - depth 0 that should show me my packages that are globally installed so there you go so I have the one point four point one share point yeoman generator globally installed in Gulf yarn and all that other stuff ok so I'm going to go ahead and clone this github repo so I'm going to simply say git clone and let's go into that repo let's here and let's go ahead and run yarn install so this will go ahead and you know download all the node modules you know what this does so let's wait for this to finish so once yarn install finishes it the the get thing is only because they've created a yarn file I guess I could check that in but that's you know not very important let's go ahead and open visual studio code and those of you who are familiar with angular CLI you would immediately recognize this as an angular CLI project with a few extra things let me give you a high-level overview of how this is put together so the start command has been changed to gulp serve because SharePoint framework prefers to use a gulp so that's why that is I have added the SP effects stuff right in this project including in the dev dependencies the necessary dev dependencies I have customized the build process a little bit so there is that and in the source this is where things get interesting in the source I have an entry point web part which the config files these are the SP FX config files they point you to this starter web part and this starter web part inherits from base client side web part and this is basically bootstrapping an angular app ok it's using app module energy factory so it is it is a or tier ID and all of that so and also there is a property that it has which is description in this description we basically set it up as an element as you see here let me make this a little bit smaller so the description is sent in as a property now you may be asking what about angular elements why didn't I use angular elements here well for one it is not released yet second angular elements is actually not required to work with SPF X it's I I don't know where that rumor came from but whatever it's not required certainly angular elements will help the picture a lot because it makes things very standards compliant however it's not required strictly speaking I would also venture to guess that when the angular team finishes angular elements currently slated for angular 6 it will work with angular CLI for sure now inside of this app folder here you see this is just an angular app ok that is the beauty of the solution that you write your code in angular as you normally would and therefore your main skill is still angular but you are running in SPF X you have full access to the SPF X context you know you are running you have the SPF X stuff in you're you know packaged our Jason so you're writing angular code in an angular format so you get you know concepts like dependency injection you have concepts like if you're DS material design lazy loading you know writing tests publishing this as a library all that investment that comes with angular you get that in SPF X and that's the real value here okay let's go ahead and run this I'm gonna say gulp serve I've already done gulp trust desert on this machine so let me just go ahead and do gulp serve and it fires up the local workbench as you would expect and so once this loads I'm going to drop my angular CLI webpart Hey seems to work actually let me try and edit this and I'm going to say hey this is awesome and that seems to work just as you'd expect an SPF XY bar to behave but they say you can't add a second angular webpart on the same page no you can look at that you can add a third you can add a fourth I mean it's not a problem you can add as many as you want in fact because angular and angular see live is all this investment in you know being able to separate things out as modules you know I have full control on the build process so I think this is absolutely amazing I can externalize these libraries or parts of my codebase and make it reusable across multiple places so this is totally separate from the above apart spellings you know please pardon those but here you go so yeah this seems to work let's delete this let's loop sorry let's delete yes so anyway you see that it works but the real test will it work in SharePoint because you know how that goes ok so let's try that so ctrl C yes so I'm going to say gulp so this is if you're familiar with SPF X this is SPF X 101 gulp - - ship actually it when you clean first gulp clean so it'll just clear out all the temporary files and I'm gonna say gulp - - ship now I will mention that I am going to use the automatic client assets deployment here this guy here ok just to keep things simple I've already enabled CDN on my tenancy so you can see that my you know path the CDN is left as default so but if you want to put this in a CDN it works with that as well I've tested it you know you can you're welcome to test it as well ok here we go so then gulp package solution - - ship here we go now let's go ahead and find that SP pkg file that should be under SharePoint / solution imagine SharePoint folder and angular CLI project so here you go SP FX s B pkg that's great let's go to my Italian si so that would be let's go to the App Catalog first apps for SharePoint and let's drag drop that in here so a SharePoint Online that looks good click on deploy and I'm gonna test this in a classic site but I've tested it in a modern site it works there as well so with smart stairs slash test classic so that's a classic site here I'm going to say add an app I'm going to add my angular CLI SP effect solution it's gray right now refresh a couple of times wait for this to get enabled once this is enabled then hopefully my web part should be available for me to use page edit insert a web part again look for the other category that's the default these are just SPF X concepts so I'm going to drop this angular CLI web part here and it works well can i edit it let's try so configure yay yeah it seems to work and the acid test can I drop a second one yep I can drop a second one too so you see you can use angular CLI with SPF X and everything that angular brings you and you can do this this actually even works with angular 4 I've been using it for almost a year and a half so I don't know what the official story will look like but for many reasons that I mentioned I prefer to use angular CLI over a handcrafted angular project when I'm working with angular there and I think a lot of angular developers will will agree with me on that ok cool hope you found this useful you'll find all the relevant links in the bottom at the bottom of the video as a first comment or something or description I would love to get your feedback on this and see what you think of it thanks

Channel: Sahil Malik

Views: 9,700

Rating: 5 out of 5

Keywords: Angular, AngularCLI, SPFx, SharePoint Framework, Development, Office365, Office365dev

Id: _OgEqWtouuU

Length: 12min 17sec (737 seconds)

Published: Sun Mar 04 2018