Microsoft 365 Community PnP Webcasts, 1 Nov 2018

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: PnP Webcast - Scaffold SharePoint Framework projects build with Angular Elements

Description

See how to easily scaffold SharePoint Framework solutions that use Angular Elements with the PnP SPFx Yeoman generator. PnP SPFx Yeoman generator extends the out-of-the-box generator by adding new supported frameworks and other options.

You can find more details on the PnP SPFx Yeoman generator from https://pnp.github.io/generator-spfx. PnP SPFx Yeoman generator is an open-source generator and we do welcome all feedback and contributions from the community.

A

B

A welcome in this PMP webcast, we'll talk about using angular elements in SPF X, using the P and P SharePoint framework yeoman generator together with me, our Pavo after Locke and Stefan Bower guys. Do you want to do intro a few words about yourself. I can.

C

S, my name is Nabokov Erlich and I work as a SharePoint solution. Architect at eg is.

A

Yeah, my name is Stephan power, I'm part of the PNP core team and also MVP for office development, cool.

B

So how about we have a quick look at the shape way framework p.m. peach generator, what it is, what it's for and what's available, yeah.

A

So what what we actually do is a PPS B FX generator is that we take the standard Microsoft provided a young yeoman generator and extended with additional capabilities. So when ever there is a new generator coming out from Microsoft and we are able to update our reference to this generator and we are able to run different kind of projects based on this default generator. So what you actually get is you get handlebar projects which yes projects, and let me show you the next slide.

A

So, yes, the base is the generator sharepoint, and then we have our own generator, which you can select from, for example, if you want to include always in your projects, PNP chess or the reusable controls, then we have additional framework generators which are actually, for example, handlebars Fuji s or the news team in the family is the engine elements, yeoman generator cool.

B

Cool so so, in other words, it simplifies adding orders I barista to to SP effects, but it also allows you to create projects using different.

B

Frameworks and the one available out of the box right because out of the boss, we have react, react and knockout, and with this we can also create things or or in a web part or extension with view, GS handlebars and now with angular elements. Correct. Yes, yes,.

A

And we also improve a little bit the default projects, for example, when you take create a new react project and always install, for example, the reusable controls there. This is something you can directly select from a menu to install all to all your project, so other than that you have. If you use the default generator, you have to install first a reactor s project and then add some additional npm install after that, but with the PPS pfx generator, you get way faster, all the required libraries that you need in Europe for your regular development, yeah.

B

And also I I can imagine that over time it will be easier because it will automatically pick for you, the version that works with the version of SPF x. You use right, so you will need to go back in time and think okay. So what version of that do?

B

I need to have for this, because, like things change and at some point, you might need to go back in time to the project that you created, let's say with SPF x, 1.5, 1 or 11.6, when the mainstream will be already 1.8, and you might want to add something to that. But then you would have to install the libraries from that point in time because they were to.

C

B

Her right so I can imagine that this will simplify this scenario. A lot as well yeah.

A

And there are also some additional things like, for example, we integrated the office to office 365 CI that actually has included the the which version is a project from so when you run the generator on an existing project to get a notification hey. We currently use 1.6, but this project you're running on is currently 1.4 so well. It helps you a lot to keep your projects updated as well. Cool.

B

Alright, so you mentioned that the latest edition is angular elements and that was build by Pavo right. Yes,.

C

Ok, so why should you ask about angular elements? Project using generator is easy way to use angular element in a specifics. You don't have to bother with all this stuff yourself, it's it's probably for you.

C

We use to project approach, so we have separate project for angular and separate project for SP fix, and this allows us to use angular CLI, that is standard tool used by angular developers and we can use angular a ot, because if we would do that in single project, this ability would be the problem, because 51.6 have webpack free and angry I would he requires web pack? For so this converter allows you to easily strapping a project, and you don't have to bother with all these things so.

B

I'm, probably right, imagine that you didn't have this mm-hmm, how much time would it cost for you, given that you know angular and you know SPF X a little. How long would you take? You seem to do the same thing to figure out basically how to tie these two together.

C

Several hours ah there.

B

C

Not sure, but probably something like that right.

C

B

I mean sure, eventually, when you know how it's done, if you've done it once it will be just rinse and repeat, but I guess, first time it will be hard to get all the the building blocks together and with this it will just be done within minutes. Right I mean the windows minutes on a Mac seconds, obviously, and.

A

Then you have the problem when you start the next project with angle elements and that's been fixed to get everything you have to remember all the steps it did for this one project so tightly. You might be trained after the fifth project or something like that. But you always in the beginning, it's more harder than to set up your project correct.

B

Yeah um and also the fact right, you don't create a new project every day, I mean I, do because I test things, I, write dogs I, do things like that. But if you work on a project you create a project and then work for a month or two or three on that. You don't create a new project every day right. So if there will specific tidbits like things to think about, it could even be the case. I can imagine that if you have development team, but not everybody on the team might even know the way.

B

The project is actually built together right because one person did that and they know it and then, if they didn't tell everybody else in a team, they wouldn't know it right. So with this approach, it basically empowers everybody to create a new project and focus on building the angular at basically the app and not think about okay. So how do I make it work right, cool so with that paavo? How about we see it in practice? Yes,.

C

Of course, let's move to demo I will share my screen. Okay, so we'll create a new angular elemental project for SP fix to do that. We'll create a new folder for this project. We will call it demo project and we open this folder in Visual Studio code.

C

We'll open terminal.

C

To create new angular elements, project for aesthetics using PNP, then the writers you need to have two packages installed globally, music, NPM or yarn. Generally, it's of course a fixed package that contains our custom generators, pimpy generators and unguent CLI package, because we use angular CLI to bootstrap project with mr. pange reject and to actually develop so do that we can use if we are using NPM. We can use this comment and TM install I mean with G at PNP, gonna write or less prefix at and cooler CLI.

C

This comment will install these two packages globally and that's prerequisite for for project creation. I will not run it because I have already have this so I rather have this installed. So I don't have to do that.

C

Okay. So when we have these two packages installed globally, we actually can run comment yo at PNP specifics that we run PNP generators yeah. It takes some time to start not so long. Ok, so we have our custom Pentagon writers. As you can see, we have several frameworks frameworks to choose from. We have underbars UJS and we have experimental, angular elements converter. We will choose this generator. Of course we will unselect optional libraries, because we don't need them and we generally need to provide solution.

C

Name I will leave it as it is, so it will be demo project and we can provide different angular CLI options because, as I said, we use angular CLI, so bootstrap angular project. So we can actually provide additional options to this comment.

C

As you can see by default, we are using a CSS style sheets and we skip git repository creation, but if you want you can provide different options. For example, you can use plain CSS if you want I will not change that, because it satisfies me so, okay, and now we have standard SP v generator.

C

We will of course, choose SharePoint Online. Now we want to create, we part web part. Our web part name is hello, world can be, we leave description of the test and we don't want to add angular routing yet generally, this takes some time because dependencies for both projects have to be installed, so it takes about from 5 to 10 minutes.

C

So we don't want to wait so before if, before this demo, I created cream project and I can use to actually show you this so I will interrupt this project creation and we'll move to the project. I have created before ok. So, as you can see, we have to mindful has a demo folder that contains angular solution and we have a folder with aesthetics affix the most perfect that contains a specific solution.

C

Let's see what was changed in angular solution to actually be able to use it in SPF fix right. There are several fix. What the most important things are.

C

This elements built jeaious script file, so what it does is that takes JavaScript files generated by angular CLI and very balanced this files to two single file, because it's easier to import etcetera for several reasons. But generally we take these files and bundle it into singing single file, and this script is used in package.json script. A comment: we have a new comment: bundle in angular project that builds the angular project in production mode, so with a ot compilation and and all this stuff and without output, hashing, and then it bundles it.

C

Using this JavaScript and another build.

C

Okay, so we can see how actual app module looks of module. Yes, as you can see in app module, we have a standard way of creating registering angular element, so we have ng the bootstrap method and we create custom element here or we call create custom element and we generally define. Did you define this element?

C

Yes, so it can be used and let's see what our element has come and how our component looks like it's simple component with encapsulation set to shadow DOM and with single input that it's called description, and this description is, as you can see in tab, we will have have it added in template in HTML template, so it will be displayed with some additional text. Okay, so that's mostly it regarding angular project.

C

Let's move to a specifics project I will open our web part hello, world web part, and you can see that we import this bundle that we create from from angular project. We import this bundle and in render method we set in a inner HTML in HTML of Dom element of web part, Dom element to our angular element, selector specifier, and we provide description from property pain from properties as input. Yes, sorry, then it will be parse and inside this element, this element will have our web or web part or component will be rendered.

C

Ok, so that's mostly it. Let's see it in action to do that. To run this project we can go, we have to go to angular project and we will build it and bundle it so we'll use this custom custom comment and p.m. run bundle.

C

Take some time so we need to wait a moment.

C

Okay, it's it's created! So when we go to angular project and to the dis folder, you can see that we have our bundle. J's file.

C

Okay, so now we can go to.

C

Project and run gulp surf to start workbench and to build a specific solution. Let's see if it will work.

C

Okay, we have it.

C

Now we can add our web part and, as you can see, it works, we can edit our description and it will be automatically updated.

C

Okay, but but sometimes it's not convenient to actually develop and grow a solution in work in a fix workbench. Yes,.

C

So we can, we can develop it using standard and Guler web pocket observer and we can, for example, use hot module, reloading I.

C

Will show this? Yes, so we we stop it in this workbench and we will move to our angular solution and we will run a cute and p.m. run start. It will start web pack the server and we'll build our soul and world solution.

C

I will open this address.

C

And, as you can see, it works because.

C

In index.html file we have we have our angular element with hard-coded description, so you can actually develop your solution without bothering with SP fix at all, we smoke at data etc, and then you can adapt it adjusts it to to SP fix and intensities in a fixed work bench. Yes, so that's really really convenient.

B

Cool, so it was, it was really great to see it in practice and how easily it creates a new project and basically alleviates all the pain that you would otherwise need to go through to hook up angular elements in in SP effects. Any last thoughts or words guys.

A

How difficult was it for you pal to to create a new generator, because you, you already knew how to set up the angular project. So how difficult was it for you to create a new generator for this? It.

C

Was other simple, it's it's rather straightforward, so anyone can create their own generator. So I didn't have many problems with that.

A

B

Excellent, so with that thanks everybody and we'll come up with your webcast sooner or later, bye nice.