Microsoft 365 Community SharePoint, 29 Sep 2023

Previous Meeting

Next Meeting

⏯

youtube image

►

From YouTube: Introduction SPFx framework at Microsoft - Accelerator Tooling

Description

📺 In this 13 minute developer focused demo, Daniel Turley shows Accelerator Services Framework for reusable services. He starts with a quick overview on the accelerator, followed by an explanation of environments. He walks us through the idea behind the environments.json file to be able to deploy different builds side by side to the same tenant or even the same side while preventing naming collisions and utilizing additional gulp command to package and deploy an environment. He closes with a live demo.

This demo is taken from the Viva Connections and SharePoint Framework community call 24th of August 2023. Join the next call! Download recurrent invite from https://aka.ms/community/calls

✨ Presenters
Daniel Turley (Avanade)

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

A

A

My name is Dan Turley and I'm. A full stack developer at avenard been working with SharePoint for over 10 years, most recently as part of the productivity Studio utilizing SharePoint framework to build business apps today, I'll be showing you some tooling, that is part of the spfx solution, accelerator to support development teams and environments, but first it's always a quick overview of the accelerator. It's a set of patterns, reusable code components and tools that are created for building business apps.

A

On the SharePoint platform, it's evolved over the last six years and we've used it in the productivity Studio to build a dozen business apps over that time. Accelerator is open source and we published a complete app to demonstrate its features. The SharePoint framework sample is named, react rhythm of business. Calendar accelerator has the following high level features. We have guidelines for the solution structure, to organize your domain models, Services components and schema.

A

We have a robust, empty domain model with features like change, tracking validation and relationships, there's also a services framework with provided services for SharePoint list data, time zones, users and groups and more- and we have Dynamic provisioning of SharePoint lists for app setup and upgrade experiences. There are react components for view edit panels and dialogues, asynchronous data live update, controls, wizard and more, and we have tooling to support development teams and environments and, last but not least, live update, ensures your users are always collaborating with the latest data all right.

A

So this is the seventh and final demo. We have planned in this series on the spfx solution. Accelerator we've previously talked in depth about every one of these features, except for the tooling.

A

So what do I mean when I say environments? Well, first I want to be clear that environment is not the same as tenant. It's not a site. It's more like a customized build of your app.

A

If you're fortunate enough to have separate tenants for Dev test production Etc, then you don't necessarily need environments, although I'd still recommend using them to take advantage of the package and deploy gulp commands for any values in code that are environment specific, but we'll get to all that in just a moment at the root of the solution, folder is an environments.json file. This defines all of your environments.

A

This will allow you to deploy different builds of the solution side by side at the tenant level or even at the site collection level. Now, why would you want to do this?

A

Well, if, for any reason, you're in a situation where you cannot or do not want to spin up separate tenants for Dev test and Stage, for instance, maybe your app will need to access some documents, Or List data or manage metadata or 80 user accounts, or anything really that exists in your production, tenant that it's not feasible or not allowed by policy to copy over to a developer tenant or it would be a pain to manage accounts and roles for your project team across multiple tenants. Then I think this feature is for you.

A

um If your project is even more restrictive, say you're only able to work on one site in the tenant, and you have to do development and test on that single site. Then you can even use this feature to achieve reasonable separation for Dev and test. So how it works is for each environment. You can specify a different name and ID for the solution package, as well as each web, part and extension in your solution. So that's what enables side-by-side deployment.

A

In addition, you can also configure environment, specific values that you can reference in your code. So, for instance, let's say you're adding Google analytics to your site. You can specify a different tag to be used for each environment and that value will be set at compile time.

A

We've also used this feature for things like a team's app ID, where we want to be able to have different builds of the app side by side in the teams catalog. We also always add a prefix to SharePoint lists that we provisioned dynamically and and any other elements that we provision.

A

So all of this comes together by running either the package or deploy commands. You can see an example at the bottom of the screen that we've added to the gulp build system all right, so without further Ado. Let me jump over to uh a live demo.

A

All right, the first thing I'm going to do is run this deploy command for the stage environment. We use gulp, deploy, dash dash ship dash dash EnV stage, which specifies the state environment and I'm going to let this run in the background. While we look at some other things and we'll check back in a moment,.

A

So, just to set some context uh here: I have a SharePoint site. It has the rhythm of business calendar app running on it.

A

And what I want to do is show the site contents, so we have our lists, which is where we are storing our data for the app and I want you to notice this TST prefix.

A

So this indicates this is a build for the test environment. Now these prefixes are arbitrary. You can create anything, that's meaningful for your team. We often use Dev for Dev TST, for test and for production. We don't include any prefix.

A

Now, let's jump over to the app catalog, this is the tenant level app catalog and you can do the same for a site, collection, app catalog, where you can mix and match both levels in your in your configuration you'll see here, there are two different builds of the app installed side by side. One of them is the production version and the other is for testing, and you can imagine we could have any number of builds for different environments installed side by side. This could be a developer.

A

Tenant and I can have the production version of the app installed so that I can troubleshoot bugs reported by end users. I can also have the latest test build and actively undergoing testing. I can have the latest development build. That developers are actively working on all side by side. Clearly, labeled, no accidental collisions when running the different versions.

A

All right, let me bring up the code.

A

So here we have uh what the environments file looks like and you can Define different environments using these short short labels that you reference on the command line when you're building and for each environment, you can specify different names and IDs for the solution package and for the web each web part in your solution.

A

I also want to draw attention to the deploy site URL. So this is for each environment. You can specify the app catalog site and then you can specify whether that's the site, app catalog or the tenant app catalog.

A

Also, there is this environment symbol, and so during build time, this will do a simple string replace in any file named defaults.ts in your solution. So let me look at bring up one of those files, so this particular one is in our schema folder. So this is for uh lists.

A

We're specifically configuring. The names of the lists that we'll be provisioning on the site and line nine is where we would do the string replace during the build.

A

So this references one of these values from this structure up here, which then contains different prefix values for each environment and down here, is we're exporting this defaults object, which gives us access to various titles for lists. So, if I go over to this events list, we can see um when we're defining the schema for this list. Here's how I might reference uh that value.

A

Okay- and this is still taking a little bit of time,.

A

I guess what I, what I can do is walk through. So what we do is uh for the deploy command. It starts with the out of the box uh clean task, and then we have several uh other tasks that we've added, that let you manage environments for spfx libraries, any web parts and extensions in your solution, and then it modifies any defaults, TS files that you have in your source code.

A

Then it will do the normal, build and bundle.

A

And finally, after this here there will be a task where it creates a zip file of your source code and any relevant files from the solution. So you can use that if you have to send your code to another group for review for deployment for instance, and so after it packages up, uh then there are some tasks that will set all those files back to their original values and finally, for deployment there. We use the PNP uh Powershell commands to do an interactive, login and then publish that to the app catalog.

A

So if this ran faster, we would in a moment see the stage uh build, show up here side by side with these other builds in the app catalog.

A

So I'm going to do.

A

All right, well that wraps up my demo of environments and tooling and the spfx solution accelerator. So where do we go from here?

A

Well, my dream for years has been to share this with the world, and last year we were able to publish it open, source and I want to thank Vasa and David and team for all your support and allowing me to present this series of seven demos over the last I think six months and thank you to the community for listening to my demos and I, look forward to where we can take this in the future. So thank you so much foreign.