Mastering the SharePointStop wasting time searching Master the SPFx with confidence
Frustrated by scattered resources and outdated courses when trying to master the SharePoint Framework (SPFx)?
You're not alone. Too many developers waste hours sifting through incomplete or confusing materials, only to hit dead ends. But it doesn't have to be this way. Imagine learning the SPFx with clarity, confidence, and a direct path to success.
The Mastering the SharePoint Framework course puts an end to the struggle. With a clear, step-by-step path, you'll learn the SPFx faster—without the overwhelm.
Whether you're looking to:
- Sharpen your SPFx skills
- Become the go-to developer in your team
- Deliver top-tier SharePoint projects for your clients
This course covers it all. You'll get:
- In-depth training to master the SPFx, from fundamentals to advanced techniques
- Lifetime access to stay up-to-date with every new update
- A supportive community to ask questions, share experiences, and learn together
Created by Andrew Connell, a 20+ year Microsoft MVP and a trusted expert in the Microsoft 365 ecosystem.
This course goes beyond theory—you'll gain hands-on skills to build real-world solutions with confidence.
You deserve to learn faster, master the SPFx, and become irreplaceable in your role.
The best part? It's all laid out for you—no guesswork, just results
All the tools you need to master the SPFx
Learn faster, build smarter, and become an irreplaceable expert.
Buy once, own forever
No subscriptions. No recurring fees. You get lifetime access to all the content, so you can learn at your own pace and revisit any module whenever you need.
Step-by-step, real-world training
Say goodbye to guesswork. Every module is designed to build your skills step-by-step, with a focus on real-world applications—not just theory. You'll learn to build practical SPFx solutions you can start using right away.
Exclusive access to source code & resources
Get your hands on 70+ demo project source codes that you can use to learn, practice, and reference. Save hours of coding time by having ready-to-use examples at your fingertips.
A supportive, active community
Join a private space in Voitanos Learn exclusively for students. Get help from fellow developers—plus, get priority access to Q&A sessions with Andrew Connell himself.
Lifetime access to future updates
The SPFx is constantly evolving, and so is this course. You'll get access to all future updates, so you can stay on top of the latest changes in the SPFx, ensuring your skills are always up-to-date.
Student-only mastermind channel
Included in the Ultimate Bundle OnlyGet access to a mastermind group within the community to connect with other high-level developers and Andrew.
Course breakdown
Everything you need to go from basics to building advanced SPFx solutions.
Starter bundle
3 chapters & 21 lessons
Fundamentals Bundle
16 chapters & 119 lessons
Ultimate Bundle
13 chapters & 99 lessons
Starter bundle
3 chapters & 21 lessons
Set up your developer environment
11 Lessons
11 Lessons
The SharePoint Framework introduces a completely new development toolchain from traditional SharePoint development. This chapter teaches you what this is all about and gets your environment set up.
Chapter overview4:10
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Working with command prompts5:28
SharePoint Framework developers will spend a good bit of time on the command line as you''ll see throughout this chapter. In this lesson, you''ll learn about alternate options you should consider regardless if you are using Windows or macOS as your primary development machine.
SharePoint solution & add-in vs. SharePoint Framework development6:02
Before diving into the development toolchain for the SharePoint Framework, take a minute to consider what traditional SharePoint development was like. This helps in understanding why we have new tools and how they map to the tools you may have used if you did traditional SharePoint development.
SharePoint Framework development toolchain overview9:17
This lesson will provide an overview of the SharePoint Framework development toolchain. As you''ll quickly see, things are very different if you''re a traditional SharePoint developer; you know, those Visual Studio days...
Setup SharePoint Online development environment7:12
One of the first things you should do is create a development environment where you can test things against a real SharePoint environment. This lesson will show you how to configure your SharePoint Online environment for SharePoint Framework development.
Node.js & NPM33:01
The modern web development toolchain that Microsoft chose for SharePoint Framework development is rooted in Node.js. In this lesson, you''ll learn what Node.js and its associated package manager NPM are and how to install them. Regardless of your primary development platform of choice, you''ll learn how to install, configure and manage Node.js on Windows or macOS in this lesson. You''ll also see how the popular tool Node Version Manager (NVM), while not required, can be used to manage your installation.
Yeoman11:24
SharePoint Framework projects are specifically organized files and folders. In this lesson, you''ll learn how to install and use the tool Yeoman to simplify the creation of the project.
TypeScript & type declarations9:54
This lesson will cover TypeScript, a superset of JavaScript. TypeScript is the primary language Microsoft is using for the SharePoint Framework. Among other things, it is best known for adding types to JavaScript & therefore, we''ll also discuss type declarations in this lesson.
Gulp10:07
Going from your code files to an artifact that''ll be deployed to run in the context of the SharePoint Framework. This involves running multiple tasks, using a tool called Gulp that you''ll learn about in this lesson.
Webpack5:27
Just like compiled projects, JavaScript projects can consist of multiple source files that are compiled or merged into a single file that is deployed into production. In this lesson, you''ll learn about the tool that will do this for us with SharePoint Framework projects: webpack.
IDEs & editors2:39
In this lesson, we''ll look at the different tooling options when creating SharePoint Framework projects.
Introducing the SharePoint Framework
6 Lessons
6 Lessons
This chapter explains why Microsoft created the SharePoint Framework to extend and customize SharePoint sites. You'll learn what the SharePoint Framework is and what scenarios it addresses.
Chapter overview2:16
This brief lesson explains what my goal is in this chapter and what you''ll learn.
History of SharePoint development17:00
Before learning about the SharePoint Framework, take a moment to look back at this history of SharePoint development. This will help you understand what you are building when compared to what you used to build.
Introducing the SharePoint Framework9:47
In this lesson, you''ll be introduced to the SharePoint Framework. Learn what it is, what problems it solves, and under which scenarios it should be considered.
DEMO: Client-side web parts10:02
Let''s now see what the user experience is like with the client-side web parts built for the SharePoint Framework. In this demo, you''ll see how the add & edit experience is different with these new client-side web parts to the more traditional classic web parts we are used to in SharePoint.
Comparing SharePoint development options12:05
In this lesson, learn how the SharePoint Framework development differs from the traditional style of SharePoint development options in the past. This will help you understand what you are building and why in the SharePoint Framework.
SharePoint Framework documentation & resources10:22
While a fantastic resource, this course will likely just be one arrow in your quiver. In this lesson, you''ll learn what other resources are available to you for SharePoint Framework development offered by Microsoft.
Course introduction & overview
4 Lessons
4 Lessons
This chapter introduces you to the author & instructor of the course, what topics you can expect to learn and find out how to get the most out of this course.
Chapter overview5:00
In this first lesson, I welcome you to the course, explain who the target audience is for the course, and previews the other lessons in this chapter.
Course author introduction2:11
In this lesson, learn who your instructor is, and why you should trust AC (me!) with your SharePoint Framework education!
Course bundles (Starter, Fundamentals & Ultimate) & their contents11:45
This course is available in three different content bundles: Starter, Fundamentals & Ultimate. In this lesson, you''ll learn what chapters each bundle contains as well as the additional benefits between the bundles.
How to get the most out of the course6:53
Make sure that you get the most out of the course bundle that you subscribed to by watching this lesson! You''ll learn how the course is constantly updated, how to be notified of updates, and how to get the details on the versions of different apps or libraries are recorded.
Fundamentals Bundle
16 chapters & 119 lessons
SharePoint data access with SPHttpClient
9 Lessons
9 Lessons
For nearly two decades, SharePoint has been a repository for user and business data, sorting this information in lists in libraries. A common task you will be faced with in building custom SPFx solution is how to access these libraries, either reading or writing data to them. In this chapter you will learn how to leverage the SharePoint APIs to work with lists and libraries in your custom SPFx solutions.
Chapter Overview1:39
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Understanding the SharePoint REST API & SPHttpClient11:00
In this lesson, we will review the SharePoint REST API including authentication, authorization, and details on the OData 4.0 protocol.
Reading SharePoint List Items: Explore & Setup List / Project13:59
In this first of a two-part lesson, we will explore the details of working with the SPHttpClient object. Then we will explore the list and sample project used in the demonstrations for the remainder of the chapter.
Reading SharePoint List Items: Get Multiple & Single Items20:13
In this second part of the previous lesson, you will learn how to query for multiple and single items using the SPHttpClient API in SPFx.
Creating SharePoint List Items14:21
In this lesson, you will learn how to programmatically create a new item in a SharePoint list.
Updating SharePoint List Items10:30
In this lesson, you will learn how to programmatically update a new item in a SharePoint list.
Deleting SharePoint List Items9:41
In this lesson, you will learn how to programmatically delete a new item in a SharePoint list.
Batching Requests with SPHttpClient20:43
In this lesson, you will learn how to programmatically submit multiple requests in a single batch a new item in a SharePoint list.
Conclusion0:56
In this brief last lesson, we will look at what this chapter covered.
Leveraging external files & libraries
8 Lessons
8 Lessons
Modern applications are rarely built within a silo. Developers commonly leverage external libraries and frameworks within web applications. Client-side applications present interesting challenges as you must consider how it is referenced, if it is included and the impact on the page size. This chapter will address leveraging external JavaScript and CSS style libraries in SharePoint Framework projects.
Chapter Overview2:04
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Add External Libraries to SPFx Solutions7:31
In this lesson you will see how to add external libraries to a SPFx project.
Understanding Building in Client-Side Projects4:48
A key aspect of leveraging external libraries in client-side projects is understanding the process bundling resources.
JavaScript Library Formats: Modules vs. Non-Modules2:10
This lesson explains the different types of JavaScript libraries that you can leverage in SPFx projects.
Managing AngularJS Application Bundles4:11
This lesson will show you how to take the existing AngularJS application and configure it to not bundle the dependencies, but rather leverage CDN references.
Managing jQuery Application Bundles7:48
This lesson will demonstrate how to manage external references for non-modules and mixed module scenarios.
Loading Libraries, Stylesheets and Files OnDemand3:17
JavaScript libraries aren't the only external resources you may need. In this lesson learn how to deal with external CSS files.
Conclusion0:45
In this brief last lesson, we will look at what this chapter covered.
Working with React in SharePoint Framework solutions
9 Lessons
9 Lessons
Microsoft, specifically the Office division and Office 365 related products elected to adopt the popular web framework by Facebook to implement many parts of their web applications. Specifically for SharePoint, React is the primary web framework for creating reusable components. In this chapter, you will learn the basics of using React within your SPFx solutions.
Chapter Overview & Introduction to React11:14
This lesson will explain what you can expect to find in the remainder of the chapter, explain what React is from a high-level, and then explain what version of React is supported in each SharePoint Framework version as well as SharePoint deployment.
React Class Components11:30
In this lesson, you'll learn about one of two ways you can create React applications: using class components. This is considered the legacy way of building React applications today as it's been replaced by the more performant and simpler React Hooks model. However, the version of React that introduced React Hooks is not available in SharePoint Server on-premises deployments. For more information and a demo on React Hooks, refer to the other lessons in this chapter.
DEMO: Leverage React Class Components in SharePoint Framework Solutions51:38
With an understanding of React class components and how they fit into SharePoint Framework solutions, it's time for a demo! In this very walkthrough, you'll see how to create an interactive client-side web part using React class components.
React Hooks & Functional Components10:11
In this lesson, you'll learn about one of two ways you can create React applications: using React Hooks and functional components. This is considered the modern and recommended way to build React applications today, but it's only available in SPFx solutions that use SPFx v1.9 or later. For more information and a demo on React Class Components, refer to the other lessons in this chapter.
DEMO: React Hooks & Functional Components27:22
In this demo, you'll see how to create the same SPFx project we created in the previous demo on React class components, but this time we'll build it using React Hooks.
Fluent UI React4:54
Microsoft created a library, Fluent UI React (formerly called "Office UI Fabric"), for implementing consistent themes, typography, and layouts across applications. This library was used to create interactive React-based components that SharePoint and other Office products leverage. You can use these in your project as well. In this lesson, you will learn about the Fluent UI React project.
DEMO: Leverage Fluent UI React in SharePoint Framework Solutions17:19
In this lesson, you will see how to take the previously created solution from an earlier lesson and add some of the Fluent UI React components to it.
Testing React Solutions with Jest15:13
In this lesson you will learn what is involved in testing React projects with Jest
DEMO: Testing React Solutions with Jest34:18
This lesson demonstrates how to test React projects with Jest
Customize the UX with extensions
10 Lessons
10 Lessons
Microsoft''s goal is to provide parity in the things we can do with the SharePoint Framework with previous SharePoint customization models. In this chapter, you'll learn how SharePoint Framework extensions can be used to customize the user interface.
Chapter overview3:51
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Development, testing & debugging5:41
In this lesson learn how the development, testing, and debugging story differs with extensions from other SharePoint Framework component types.
Application customizers23:31
The application customizer extension allows you to inject script on the page or add HTML to placeholders on the page.
Application customizers - deployment4:33
This lesson covers the deployment story for application customizers.
Field customizers14:22
In this lesson, learn what field customizers are, and how to create them for your SharePoint lists.
Field customizers - deployment15:23
In this lesson, learn how to deploy field customizers using the Feature XML schema or using the SharePoint REST API.
ListView command sets (including deployment)23:39
In this lesson, learn what ListView command sets are, how to create them for your SharePoint lists, and how to deploy them.
List form customizers40:10
In this lesson, learn what list form customizers are and how you can use SPFx to create custom forms for your lists.
List form customizers - deployment40:10
In this lesson, learn how to deploy list form customizers using the Feature XML schema or using the SharePoint REST API.
Tenant-scoped deployment for extensions24:32
This lesson explains how you can deploy an extension one time to all sites across an entire tenant.
Your first SharePoint Framework project
7 Lessons
7 Lessons
Let's start with a quick hands-on into. In this chapter, we'll create our first project and see it run in a real SharePoint environment. Then we'll make a few changes to experience the dev story.
Chapter overview2:54
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Create your first SPFx project11:36
In this lesson, you''ll create your first SharePoint Framework project.
Run and test our project7:45
After creating the project, in this lesson, you''ll see how to run and test a SharePoint Framework project.
Exploring the code5:19
With a project created, this lesson will walk through it and get it running in our test environment.
Understanding & modifying CSS styles5:19
SharePoint Framework projects, like all other web projects, leverage CSS to control the rendering and styling of a project. This lesson will explain how CSS styles are used.
Understanding & modifying strings5:17
In this lesson, learn how to work with replaceable strings in SharePoint Framework projects.
Deploying to SharePoint sites11:36
Once a project has been created, it needs to be deployed to a SharePoint site. While another chapter will go into more depth on this subject, this lesson will explain enough so you understand what the process is like.
Leveraging the Microsoft Graph with MSGraphClient
5 Lessons
5 Lessons
In this chapter, you will learn how to work with the Microsoft Graph API in custom SPFx solutions to get access to a user's email, calendar, contacts files in OneDrive and many more services!
Chapter Overview3:18
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Microsoft Graph Overview14:52
New to the Microsoft Graph? This lesson is for you as it is the perfect primer answering the question: what is the Microsoft Graph?
Microsoft Graph & SharePoint Framework5:18
In this lesson, you will learn how the SharePoint Framework API provides objects to make working with the Microsoft Graph easier for SPFx developers.
Calling the Microsoft Graph from SharePoint Framework Solutions22:02
This lesson demonstrates using the SharePoint Framework to call the Microsoft Graph after granting SharePoint the necessary permissions.
Conclusion2:10
In this brief last lesson, we will look at what this chapter covered.
Logging & debugging SPFx projects
3 Lessons
3 Lessons
While creating custom solutions, developers need to have a firm grasp on different debugging options and techniques. This chapter will walk you through different debugging options available to client-side developers. In addition, this chapter will also cover some of the logging options provided by Microsoft in the SharePoint Framework.
Chapter Overview2:09
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Logging in SPFx Projects7:15
Let’s now see what logging options the SharePoint Framework has to offer us and what we can use in the browser.
Debugging in SPFx Projects11:41
In this lesson we will look at the debugging options available to web developers using just the browser, or more specifically, the browser’s debugging tools and console.
Property panes for client-side web parts
7 Lessons
7 Lessons
In this chapter, you''ll learn the basics of how property panes work within the SharePoint Framework. We''ll also demonstrate all the controls available to developers.
Chapter overview1:46
Just as web parts have been a part of SharePoint since the early days going back to SharePoint 2003, so have the editing experience associated with them: property panes. In this chapter, you''ll learn the basics of how property panes work within the SharePoint Framework. We''ll also demonstrate all the controls available to developers.
Understanding how property panes work4:13
In this lesson, we''ll review how client-side web parts persist data with public properties and then explore how property panes work in the SharePoint Framework.
Adding controls to property panes3:39
In this lesson, you''ll learn how to add controls to custom property panes.
Change web part values in property panes4:19
Learn how to manipulate and handle changes in the property pane within your client-side web parts.
Validate user input2:57
In this lesson, you''ll learn how to validate data entered in the property pane controls.
Adding groups and pages to property panes2:44
Property panes offer the ability to group controls on a single page, as covered in this lesson. This lesson will show you how to collect multiple groups of controls in one or more pages within a property pane.
Property pane control showcase12:24
This lesson will showcase all the controls (as well as options each one offers) provided by Microsoft for use in client-side web parts.
Upgrading & versioning SPFx solutions
5 Lessons
5 Lessons
Once a SharePoint Framework solution has been deployed into production, there will likely come a time when you need to upgrade and add new features or address issues with the existing version. In this chapter you will learn how to properly upgrade and version your custom solutions.
Chapter Overview2:09
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Semantic Versioning, NPM & SharePoint6:17
This lesson will explain what Semantic Versioning is and how version numbers work with respect to NPM and SharePoint.
NPM Package Versioning13:36
In this lesson you learn how to manage NPM packages and determine when you have outdated versions in your projects and dev environment.
Project / Code Versioning12:21
This lesson will cover what is involved in versioning the code part of your project.
Conclusion0:38
In this brief last lesson, we will look at what this chapter covered and offer some recommendations for deployment.
Branding & design: CSS, themes, and Fluent UI
8 Lessons
8 Lessons
Design is something that all projects should factor into the development process as it has significant impacts on the usability, experience and therefore adoption of all custom solutions. You can think of design from two angles: organization and branding. This chapter will first look at some design elements to consider when building custom SPFx solutions. We will then cover the branding aspect from leveraging custom CSS, leveraging SharePoint themes as well as taking advantage of different visual design languages such as Bootstrap, Material and the Office UI Fabric from Microsoft.
Chapter Overview2:13
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Designing SharePoint Customizations1:52
This brief lesson provides an overview of the SharePoint design customization decisions and aspects developers should be aware of.
Designing Web Parts3:53
This lesson covers some of the different design elements you should consider when creating custom client-side web parts.
Leveraging Dialogs16:37
Dialogs are a useful tool for prompting and notifying the user of different events in a page. This lesson covers how to leverage and implement them in your customizations.
Leveraging Custom CSS11:03
All web projects leverage CSS for branding and styling, including SharePoint Framework customizations. This lesson covers the different aspects of utilizing CSS in your SharePoint Framework customizations.
Utilizing Themes in Custom Solutions8:15
SharePoint sites provide for site owners to switch the theme of a site for easy customization. This lesson shows you how to leverage the site's theme in your custom solutions.
Office UI Fabric6:18
The visual language Office UI Fabric used by SharePoint and many other Office-related properties can be leveraged by your own customizations as covered in this lesson.
Conclusion0:52
In this brief last lesson, we will look at what this chapter covered.
Create SharePoint Assets with the Feature Framework
5 Lessons
5 Lessons
Previous SharePoint development models enabled developers to provision assets in SharePoint sites. This included things like list templates, list instances and many other types. The SharePoint Framework provides vehicle for developers to provision assets. In this chapter, you will learn how to provision SharePoint assets in SPFx projects.
Chapter Overview1:49
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Provisioning SharePoint Assets3:01
This lesson introduces the four primary options for provisioning assets in SharePoint.
Approaches & Patterns to Provisioning Assets9:50
This lesson, continuing from the previous lesson, explores each of the provisioning options in more detail.
Declaratively Provisioning SharePoint Assets28:38
This lesson, continuing from the previous lesson, explores each of the provisioning options in more detail.
Upgrading Declaratively Provisioned SharePoint Assets13:42
This lesson demonstrates how to use the Feature upgrade process in SharePoint to update provisioned assets.
Deploying to production
14 Lessons
14 Lessons
Building a SharePoint Framework solution is just the first part of a project. The goal is to get this thing into production, and that’s what this chapter will cover. You will learn how to package your solution, the different options for deploying assets including content delivery networks (CDNs) and various deployment nuances.
Chapter Overview0:58
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Deployment Artifacts & Responsibilities4:00
Let’s start out by examining the files that we need to deploy, their responsibilities and where they are supposed to go. Once you a solid understanding of these files and where they go, building, shipping and hosting them will be a lot less complex.
Building & Packaging Process6:10
In this lesson we will focus on the process of creating the files that you will need to deploy your SharePoint Framework solution. This includes the files you will deploy to SharePoint as well as the files that make up your custom components that will be deployed elsewhere.
Configuring the Packaging Process2:11
Let’s talk about this packaging process a bit more.
Tenant & Site Collection App Catalogs3:36
SharePoint provides two different types of app catalogs you can use to scope the availability of customizations.
Deploying SPFx Projects to Production7:01
The next step is deployment, so let’s look at what’s involved in this process in this lesson.
Baseline Deployment: Local Web Server5:15
This lesson will start with a baseline deployment where the project’s assets are hosted from the local development web server. This scenario is one you will not use in production, but I’m using it to demonstrate the starting point.
Setup & Deploy: Non-CDN (AWS S3)5:32
In this first demo on a real world deployment story, let's look at a manual deployment.
Setup & Deploy: Azure CDN10:59
This lesson is going to walk you through the process of setting up an Azure CDN.
Application Lifecycle Management APIs12:21
This lesson will show how you can manage the application lifecycle with APIs, PowerShell, and the Office 365 CLI.
Isolated Web Parts: Overview8:06
In this lesson, learn how you can deploy secure web parts that run in isolated domains and processes.
Isolated Web Parts: Demo13:24
After learning about isolated web parts in the previous lesson, this lesson will demonstrate creating one and how they work.
Setup & Deploy: Office 365 CDN12:36
This lesson is going to walk you through the process of setting up and deploying to the Office 365 supplied CDN.
Parting Thoughts & Chapter Conclusion1:53
In this brief last lesson, we will look at what this chapter covered and offer some recommendations for deployment.
Leveraging external APIs in SharePoint Framework solutions
11 Lessons
11 Lessons
You will inevitably need to call external services in your SPFx projects - that's what this chapter is about! Learn how to call 3rd party services both anonymous and those protected with Azure AD.
Chapter Overview3:48
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Leveraging External APIs in SPFx solutions5:06
In this lesson, you will learn about the differen types of external APIs you can call from the SharePoint Framework, as well as how the remainder of chapter is organized.
Understanding SPFx’s Approach to Calling 3rd Party APIs5:14
In this lesson, you will learn how the SharePoint Framework approaches calling external APIs.
Calling Open APIs with HttpClient3:18
Learn how to interact with open 3rd party APIs using the HttpClient API in the SharePoint Framework.
Deploying a Simple REST API as an Azure Function11:49
In this lesson, you will see how to create and deploy a simple REST API using an Azure Function App as well as securing it with Azure AD.
Calling Open APIs with HttpClient26:01
Create a SharePoint Framework client-side web part that consumes and writes to a 3rd party open REST API.
Calling AzureAD Secured APIs with AadHttpClient26:17
In this lesson, learn how the SharePoint Framework supports and implements calling Azure AD-secured APIs.
Calling Existing AzureAD Secured APIs with AadHttpClient19:31
In this demo lesson, learn how to create a SharePoint Framework client-side web part that leverages an existing Microsoft API secured with Azure AD.
Deploying & Securing a Simple REST API as an Azure Function13:35
In this lesson, you will see how to create and deploy a simple REST API using an Azure Function App as well as securing it with Azure AD.
Calling Custom Azure AD Secured APIs with AadHttpClient20:34
Create a SharePoint Framework client-side web part that consumes and writes to our custom REST API deployed as an Azure Function and secured with Azure AD.
Conclusion2:28
In this brief last lesson, we will look at what this chapter covered.
Working with jQuery in SharePoint Framework solutions
6 Lessons
6 Lessons
SharePoint Framework developers are free to use any utility library or web framework in creating custom solutions for SharePoint. One popular JavaScript library that has been around for quite a while is jQuery. In this chapter you will see how to not only leverage jQuery in custom solutions but also how to properly reference it in projects and leverage popular jQuery plugins. When styling your applications, the popular jQueryUI project is a great option for jQuery based solutions that will also be covered in this module.
Chapter Overview1:14
This brief lesson will explain what you can expect to find in the remainder of the chapter.
jQuery Overview6:47
While jQuery has been around for many years, it may not be familar to some. This lesson starts with a very brief overview into the popular areas of jQuery. Next, this lesson will look at the current state of jQuery and offer some opinions as to how you should approach and treat it when using it within SharePoint Framework solutions.
Using jQuery in SPFx Solutions11:58
In this lesson you will learn how to add jQuery to a SharePoint Framework solution and ensure it is properly referenced. This done by configuring the SharePoint Framework build toolchain to externalize the jQuery library, not include it in the generated bundle, and ensure that it is pulled in from a CDN keeping your bundle as small as possible.
Using jQuery Plugins in SPFx Solutions15:28
One of jQuery's most popular capabilities is that you can extend it with plugins. These plugins change the jQuery prototype object once loaded to provide new functionality to this very popular library. In this lesson, learn how to properly configure your project to reference and use jQuery plugins.
Using jQueryUI in SPFx Solutions13:01
The jQuery community has created a popular library of reusable controls that are distribued like jQuery plugins that you can use in custom jQuery solutions. This is the jQueryUI project and it includes things like accordions, tab controls, dialogs and autocomplete input controls. This lesson shows how to leverage these components as well as include custom themes from the jQueryUI project.
Chapter Conclusion1:27
In this brief last lesson, we will look at what this chapter covered.
Client-side web parts
5 Lessons
5 Lessons
The SharePoint Framework initially, supported a single component type: client-side web parts. In this chapter, you''ll learn how to create web parts and the files involved within an SPFx project.
Chapter overview3:17
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Creating and inspecting client-side web parts14:46
In this lesson, we''re going to create our first client-side web part and look at the initial project''s code.
Client-side web part properties8:28
In this lesson, we''ll go further with the custom properties you can set in your custom web part''s manifest.
Coding client-side web parts9:10
In this lesson, we''ll continue with our web part tour and take it to the next level - let''s build something interesting.
Add configurable properties5:01
In this lesson, you''ll learn how to let your users configure the values of properties on the web part that are saved for others to see.
Dig into the SharePoint Framework
7 Lessons
7 Lessons
SharePoint Framework projects share many concepts across all types of components developers can build in them. This chapter will explain the different files and folders in the project structure, the different display modes, page contexts, and environments, and how you can add multiple components to the same project.
Chapter overview4:19
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Tour of generic & non-SPFx project files & folders7:34
In this lesson, we''ll take a look at the generic aspects of a SharePoint Framework project as many files and folders in a new project aren''t specific to the SPFx at all.
Code: Important files and folders in a project10:19
Learn what the package.json file is, why it is important and what it contains.
Code: Important solution folders - generated folders4:45
Learn about the generated folders created by the build toolchain.
Page context and display mode8:21
Developers should be familiar with the page context and what information it contains.
Upgrade the TypeScript version in SPFx projects7:16
Starting with SPFx v1.8, you can control which version of TypeScript is used in your projects. This lesson will show you how to change the TypeScript version used.
Add additional components to existing SPFx solutions6:02
In this lesson, you''ll learn how to add multiple components to an existing SPFx solution.
Ultimate Bundle
13 chapters & 99 lessons
Automated testing of SharePoint Framework solutions
9 Lessons
9 Lessons
Implementing automated testing within your custom solutions, be they SharePoint Framework projects or any other custom code project, is widely considered a good practice. Projects that include automated tests are more robust and are of higher quality because the same tests can be easily run repeatedly to check for errors. Many developers skip this step of adding tests because it’s hard and confusing. In this chapter, you will learn the practices of not only why you should test, but the different types of tests, what you should test and how to implement automated testing in your SharePoint Framework projects.
Chapter Overview2:03
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Automated Software Testing: Why? What? How?7:18
This lesson will address the reasons why you should implement automated testing to your projects.
Tools of the JavaScript Testing Trade7:51
In this lesson we explore the different testing tools available to developers in the JavaScript world and focus on the ones we will use in this chapter to test SharePoint Framework projects.
Testing SharePoint Framework Projects7:29
In this lesson you learn what''s involved in testing SharePoint Framework projects and how to configure your project for testing.
Setup Jest for SPFx Projects10:41
In this lesson you will roll your sleeves up and implement the testing framework Jest in a SPFx project.
Creating Your First Jest Tests17:19
In this lesson you will create your first few tests including async tests and testing promise-based methods.
Testing with Jest: Tips, Tricks & Debugging14:16
After creating your first few tests, this lesson will show you some tips and tricks to SPFx testing. You will also learn how to debug your tests in Visual Studio Code.
Reporting on Jest Tests: Code Coverage13:27
This lesson will demonstrate how to setup code coverage reports to give you confidence you are adequately testing your custom code.
Conclusion1:44
In this brief last lesson, we will look at what this chapter covered.
Sharing code between SharePoint Framework solutions
7 Lessons
7 Lessons
Sharing code across multiple projects isn’t unique to SharePoint Framework projects. This is something developers have been striving to do since the very beginning. Whether it’s for performance or code maintainability reasons, it’s the right thing to do. The SharePoint Framework provides developers a unique way to share code across projects using a special type of component: a library component. In this chapter, you’ll learn how to create and utilize library components in SharePoint Framework projects. But that’s not all, you’ll learn how you can a more portable NPM package and use it in not just SharePoint Framework projects but in any web project.
Chapter Overview2:22
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Sharing Code Across SharePoint Framework Projects8:54
In this lesson, we'll discuss the challenges, goals, and options associated with sharing code across SharePoint Framework projects.
SharePoint Framework Library Components20:00
This lesson introduces you SharePoint Framework library components, one way you can share code between SharePoint Framework projects. We'll cover the advantages and disadvantages associated with library components, and you'll learn how to develop, deploy, and consume library components in your SharePoint Framework projects.
DEMO: SharePoint Framework Library Components30:55
In this lesson, you'll learn how to create and consume a SharePoint Framework library component. This demo refactors code out of an existing SharePoint Framework web part component into a library component and then updates the web part to consume the shared code from the library component. Finally, you'll learn how to prepare and deploy both components to your SharePoint environment.
NPM Packages and SharePoint Framework Projects22:15
In this lesson, you'll learn about another option that you can use to share code across SharePoint Framework projects. NPM packages can be used to create, distribute, and generate JavaScript modules as bundles that can be consumed not just by SharePoint Framework projects, but also by any JavaScript based project.
DEMO: NPM Packages and SharePoint Framework Projects31:26
In this lesson, you'll learn how to create and consume a JavaScript bundle generated using an NPM package. This demo refactors code out of an existing SharePoint Framework web part component into a NPM package, which is just a Node.js-based project, and then updates the web part to consume the shared code from the generated bundle. You'll learn how to prepare and deploy both components to your SharePoint environment and a public share. Finally, you'll see how you can leverage the same bundle in a non-SharePoint Framework JavaScript project.
Conclusion2:12
In this brief last lesson, we will look at what this chapter covered.
Extending & customizing Webpack
7 Lessons
7 Lessons
Webpack is an integral part of the build toolchain in most web projects these days, including the SharePoint Framework. This chapter will explore how it's used in SharePoint Framework projects and how you can customize it by modifying its configuration a well as how you can extend it using loaders and plugins.
Chapter Overview3:26
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Webpack: Overview and How it Works7:29
In this lesson, we take a deeper look at what webpack is and how it works from the introductory lesson that we looked at back in chapter 3 of the Starter bundle.
How Webpack is Used in SharePoint Framework Projects14:28
In this lesson, we look at how webpack is implemented and used in SharePoint Framework projects.
Customizing the Webpack Configuration9:17
In this lesson, learn how you can change how webpack works by customizing the configuration settings prior to the SharePoint Framework running it.
Extending Webpack with Loaders10:39
In this lesson, learn how you can further customize webpack by using custom loaders in your configuration.
Extending Webpack with Plugins13:48
In this lesson, learn how you can further customize webpack by using custom plugins in your configuration.
Conclusion1:19
In this brief last lesson, we will look at what this chapter covered.
Working with Angular in SharePoint Framework solutions
11 Lessons
11 Lessons
When building SharePoint Framework solutions, regardless if they are client-side web parts or UI extensions, there is a visual component to these controls. While you could implement these interfaces by hand yourself, why not take advantage of a modern web framework? Frameworks make data binding, event handling and state management so much easier! Developers can use any web framework when building SharePoint Framework components. The selection of a web framework is based on various elements, one of which is an existing experience. In this chapter, you will learn how you can leverage Angular, specifically Angular Elements (introduced in Angular 6) in SPFx solutions.
Chapter Overview2:49
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Elephant in the room: Angular or React?4:16
One question, or decision, all SPFx developers have to decide on is if they should use React or Angular. This lesson looks at the pro's and con's of each web framework in the context of SPFx development.
History of Angular and AngularJS v1.7+6:25
This lesson will briefly explain the history of Angular, back to v1 of the web framework.
Introducing Angular: Primer13:31
New to Angular? This lesson is for you as it serves as the quickest primer to the popular web framework.
DEMO: Creating the Apollo Mission Viewer with Angular32:50
In this lesson, we will build the Apollo Mission Viewer app as an Angular application.
Angular & the SharePoint Framework6:29
In this lesson, we will explore the challenges with using Angular in SharePoint Framework applications.
Web Components, Custom Elements & Angular Elements5:22
This lesson will explain the concept of web components and custom elements, native web technologies, and how they can be used to leverage Angular in SharePoint Framework projects.
DEMO: Converting Angular application to Angular Elements11:27
Now that we see how custom elements and Angular Elements can be used in SharePoint Framework solutions, the first step is to port our Apollo Mission Viewer application to a custom element with Angular Elements. This lesson will demonstrate how to do this.
Leveraging Angular Elements in SPFx Solutions8:33
In this lesson, we look at what is involved in building & hosting an Angular Elements based application in a SharePoint Framework solution.
DEMO: Hosting an Angular Elements Application in a SPFx Solution14:26
In this demo lesson, we will take the Angular Elements NASA Apollo Viewer custom element and import it into a SharePoint Framework client-side web part.
Chapter Conclusion1:20
In this brief last lesson, we will look at what this chapter covered and offer some recommendations for deployment.
Property panes for client-side web parts: create property controls
5 Lessons
5 Lessons
Developers can use the property pane to enable users to modify the settings on client-side web parts using basic controls included in the SharePoint Framework API. For more complex scenarios, you can also use open source community-based solutions. In the case of more complex scenarios, you can build custom property pane controls. In this chapter, you’ll learn how to create a custom property pane control and use it within a client-side web part.
Chapter Overview2:23
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Going beyond basic property pane controls9:28
In this lesson, we'll look at what options you have for leveraging controls in web part property panes.
Custom property pane controls15:20
In this lesson, you'll learn how to create a custom property pane control before we dive into a demo in the following lesson.
DEMO: Create a custom property pane control34:32
In this demo, learn how to create a custom property pane control by example in this lesson.
Conclusion1:21
In this brief last lesson, we will look at what this chapter covered.
Adaptive Card Extensions (ACEs)
7 Lessons
7 Lessons
Learn how to create custom Adaptive Card Extensions (ACEs) with the SPFx for use in Viva Connections dashboards to customize and extend the desktop and mobile experiences.
Chapter overview4:31
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Adaptive Cards Primer19:57
Developers must have a firm grasp of Adaptive Cards - the technology Adaptive Card Extensions are based on. This lesson serves as a primer to Adaptive Cards.
Introduction to Adaptive Card Extensions (ACEs)21:17
Before we dive into Adaptive Card Extensions (ACEs), this lesson explains what they are and how all the pieces of an ACE are related to one another.
In-depth: the Adaptive Card Extension class23:55
This lesson takes an in-depth look at the cornerstone of all ACEs and starts to create a project we''ll expand on throughout the remainder of the chapter.
In-depth: the CardView16:24
Building off the project you created in the last lesson, this lesson explores the ACE CardView component in-depth.
In-depth: the QuickView38:48
This lesson continues with our in-depth look at all parts of ACEs by exploring the QuickView. Learn what you can do with a QuickView by extending our project.
Viva Connections-specific Actions13:59
While ACEs are based on the Adaptive Card schema, Microsoft has added unique actions you can use in your ACEs for Viva Connections. In this lesson, you''ll learn how to add these specialized actions by adding them to our existing project.
DevOps: Monitoring & telemetry with Azure Application Insights
8 Lessons
8 Lessons
Development teams and organizations are always looking for ways to automate, streamline, and improve processes related to building software. SharePoint Framework development teams are no different. This process usually brings together development and operations, commonly called DevOps, to continually provide value to customers. DevOps is comprised of multiple practices and components. One aspect of DevOps is continuous monitoring. In this chapter, you’ll learn how to implement continuous monitoring into your SharePoint Framework projects using Azure Application Insights, one component in the larger Azure Monitor suite.
Chapter Overview1:54
This brief lesson will explain what you can expect to find in the remainder of the chapter.
What is DevOps? What is Continuous Monitoring?9:34
In this lesson, we'll discuss what continuous monitoring is and some of the options available to you.
Azure Application Insights13:42
In this lesson, you'll learn some of the core concepts and fundamentals of Azure Application Insights.
SharePoint Framework & Continuous Monitoring8:25
In this lesson, we'll cover the options available to implementing continuous monitoring in your SharePoint Framework projects.
Implement Azure Application Insights in SPFx Projects14:38
In this lesson, you'll learn how to implement continuous monitoring with Azure Application Insights into your SharePoint Framework projects.
DEMO: Implement Continuous Monitoring of SPO Tenants45:42
In this lesson, you'll learn how to create a global SharePoint Online tenant monitoring component using Azure Application Insights.
DEMO: Implement Continuous Monitoring of SPFx components23:36
In this lesson, you'll learn how to add Azure Application Insights to an existing SharePoint Framework component.
Conclusion0:47
In this brief last lesson, we will look at what this chapter covered.
Team-based SPFx development
5 Lessons
5 Lessons
While some of us work independently on our own, many developers work on a team on shared projects. In this chapter we look at topics related to team-based development.
Chapter Overview1:13
This brief lesson will explain what you can expect to find in the remainder of the chapter.
SharePoint Framework Development isn’t Special2:42
In this lesson we look at SharePoint Framework as a whole and how it shouldn't be approached as something special.
Development Environments5:36
In this lesson, learn how you should handle your developer's environments.
Projects & Source Code9:32
How should you manage the source code and projects as a whole? That's what this lesson is all about.
Conclusion2:17
In this brief last lesson, we will look at what this chapter covered.
Localizing SharePoint Framework projects
9 Lessons
9 Lessons
If you work for a multinational organization, or you are a consultant or ISV building SharePoint Framework solutions for customers who have users that speak different languages, why build a solution that targets just one locale? Building multi-lingual and localized SPFx solutions are easy and this chapter will show you how to do it!
Chapter Overview2:03
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Understanding Localization in SharePoint2:21
This lesson will provide an over to multilingual capabilities in SharePoint.
Understanding Localization within the SharePoint Framework2:30
This lesson will cover the multilingual and localization aspects of the SharePoint Framework from a high level.
Localizing Metadata in SPFx Components7:54
In this lesson you will learn how to localize SPFx component metadata.
Localizing Content in SPFx Components13:25
In this lesson you will learn how to localize SPFx component content.
Localizing User Content in SPFx Components11:09
This lesson will demonstrate some options for offering users translate their provided content.
Addressing Design Challenges with Pseudolocalization6:33
In this lesson, learn how you can leverage pseudolocalization to address design challenges.
Understanding how Localization within Debug and Release Builds4:45
In this lesson you will learn how the different build types can impact localization in SPFx projects.
Chapter Conclusion1:33
In this brief last lesson, we will look at what this chapter covered.
Connecting SPFx components with dynamic data
8 Lessons
8 Lessons
Connecting two web parts together was a very popular technique implemented in previous SharePoint development models. In this chapter, you will learn how to do the same thing with Dynamic Data.
Chapter Overview4:15
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Introducing Dynamic Data in SPFx7:55
In this lesson, you will learn what dynamic data is in SPFx and how you can leverage it.
Building Dynamic Data Components13:43
In this lesson, you will learn what's involved in creating dynamic data components. This includes both providers and consumers as well as how to test and debug them.
DEMO: Create Provider Web Part12:27
In this lesson, you will see how to create a web part that acts as the provider in a dynamic data scenario.
DEMO: Create Consumer Web Part & Subscribe Properties17:10
In this lesson, you will learn how to subscribe to changes in properties.
DEMO: Create Consumer Web Part & Subscribe Objects10:28
In this lesson, you will learn how to subscribe to changes in objects.
DEMO: Create Consumer Extension & Manually Subscribe to Dynamic Data21:50
In this lesson, you will learn how to not only create a SPFx extension that uses dynamic data, but also manually subscribes to changes to a data source's property.
Conclusion2:22
In this brief last lesson, we will look at what this chapter covered.
Client-side web parts - advanced: SPAs, Microsoft Teams & More
7 Lessons
7 Lessons
In this lesson, you will learn how you can leverage SharePoint Framework client-side web parts in more than just SharePoint pages.
Chapter Overview1:06
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Using SPFx for Custom Microsoft Teams Tabs16:24
In this lesson, you will learn how you can leverage SharePoint Framework web parts to create custom tabs in Microsoft Teams.
SPFx for Custom Microsoft Teams Tabs: SharePoint Online Demo13:59
Create and deploy a SharePoint Framework web part as a Microsoft Teams tab in this demonstration-based lesson.
SPFx for Custom Microsoft Teams Tabs: Microsoft Teams Demo9:52
Create and deploy a SharePoint Framework web part as a Microsoft Teams tab in this demonstration-based lesson.
Single Page App Pages with Web Parts8:23
In this lesson, you will learn how you can create full page applications, also known as single page applications (SPAs) using SharePoint Framework web parts.
Demo: Create Single Page App Pages with Web Parts13:08
Create and deploy full page applications, also known as single page applications (SPAs) using SharePoint Framework web parts in SharePoint Online.
Conclusion1:01
In this brief last lesson, we will look at what this chapter covered.
Extending & customizing Gulp tasks
8 Lessons
8 Lessons
Microsoft uses the popular task runner gulp as the tool to perform common jobs when developing SharePoint Framework projects. This chapter will explore how it's used and how you can extend it.
Chapter Overview1:55
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Gulp: Overview and How it Works4:43
In this brief lesson, we will explore the basics of how gulp works.
How Gulp is Used in SharePoint Framework Projects15:08
In this lesson, learn how gulp is implemented and leveraged in SharePoint Framework projects.
DEMO: Customizing Gulp with Custom Task Sequences6:28
In this lesson, you will learn how you can create your own custom task sequences with Gulp.
DEMO: Microsoft Gulp Logging & Hook Into Existing Tasks18:03
In this lesson, learn how to utilize existing SPFx's custom logging functions and hook into existing build tasks.
DEMO: Integrate 3rd Party Gulp Tasks9:43
In this lesson, learn how you can incorporate 3rd party gulp tasks in SharePoint Framework projects.
DEMO: Creating Custom Gulp Tasks12:46
In this lesson, you will learn how you can create your own custom gulp tasks
Conclusion1:20
In this brief last lesson, we will look at what this chapter covered.
DevOps: CI/CD with GitHub Actions & Azure Pipelines
8 Lessons
8 Lessons
Development teams and organizations are always looking for ways to automate, streamline, and improve processes related to building software. SharePoint Framework development teams are no different. This process usually brings together development and operations, commonly called DevOps, to continually provide value to customers. DevOps is comprised of multiple practices and components. One aspect of DevOps is continuous integration (CI) and continuous delivery (CD). In this chapter, you’ll learn how to incorporate CI/CD into your SharePoint Framework projects using two popular services: GitHub Actions and Azure Pipelines.
Chapter Overview4:51
This brief lesson will explain what you can expect to find in the remainder of the chapter.
What is DevOps? What is CI/CD?12:48
This lesson introduces you to the concept of DevOps and explores one of the many DevOps practice: continuous integration (CI) and continuous delivery (CD).
SharePoint Framework & CI/CD13:06
In this lesson, you''ll learn what''s involved in incorporating CI/CD practices with SharePoint Framework projects.
DevOps CI/CD Practices with GitHub Actions9:34
GitHub Actions enable developers to add workflows to GitHub repositories. In this lesson, you''ll learn the concepts of GitHub Actions before we add CI/CD practices to a SPFx project.
DEMO: Implement DevOps CI/CD Practices with GitHub Actions35:21
In this demo, you''ll learn how to implement a CI/CD process to your SPFx project using GitHub Actions. You''ll see how to automate the builds, executing tests and conditionally deploying SPFx solutions to multiple SharePoint environments.
DevOps CI/CD Practices with Azure DevOps Pipelines12:40
Azure DevOps Pipelines enable developers to add workflows to SPFx projects repositories. In this lesson, you''ll learn the concepts of Azure DevOps Pipelines before we add CI/CD practices to a SPFx project.
DEMO: Implement DevOps CI/CD Practices with Azure DevOps Pipelines37:09
In this demo, you''ll learn how to implement a CI/CD process to your SPFx project using Azure DevOps Pipelines. You''ll see how to automate the builds, executing tests and conditionally deploying SPFx solutions to multiple SharePoint environments.
Conclusion1:49
In this brief last lesson, we will look at what this chapter covered.
Set up your developer environment
11 Lessons
11 Lessons
The SharePoint Framework introduces a completely new development toolchain from traditional SharePoint development. This chapter teaches you what this is all about and gets your environment set up.
Chapter overview4:10
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Working with command prompts5:28
SharePoint Framework developers will spend a good bit of time on the command line as you''ll see throughout this chapter. In this lesson, you''ll learn about alternate options you should consider regardless if you are using Windows or macOS as your primary development machine.
SharePoint solution & add-in vs. SharePoint Framework development6:02
Before diving into the development toolchain for the SharePoint Framework, take a minute to consider what traditional SharePoint development was like. This helps in understanding why we have new tools and how they map to the tools you may have used if you did traditional SharePoint development.
SharePoint Framework development toolchain overview9:17
This lesson will provide an overview of the SharePoint Framework development toolchain. As you''ll quickly see, things are very different if you''re a traditional SharePoint developer; you know, those Visual Studio days...
Setup SharePoint Online development environment7:12
One of the first things you should do is create a development environment where you can test things against a real SharePoint environment. This lesson will show you how to configure your SharePoint Online environment for SharePoint Framework development.
Node.js & NPM33:01
The modern web development toolchain that Microsoft chose for SharePoint Framework development is rooted in Node.js. In this lesson, you''ll learn what Node.js and its associated package manager NPM are and how to install them. Regardless of your primary development platform of choice, you''ll learn how to install, configure and manage Node.js on Windows or macOS in this lesson. You''ll also see how the popular tool Node Version Manager (NVM), while not required, can be used to manage your installation.
Yeoman11:24
SharePoint Framework projects are specifically organized files and folders. In this lesson, you''ll learn how to install and use the tool Yeoman to simplify the creation of the project.
TypeScript & type declarations9:54
This lesson will cover TypeScript, a superset of JavaScript. TypeScript is the primary language Microsoft is using for the SharePoint Framework. Among other things, it is best known for adding types to JavaScript & therefore, we''ll also discuss type declarations in this lesson.
Gulp10:07
Going from your code files to an artifact that''ll be deployed to run in the context of the SharePoint Framework. This involves running multiple tasks, using a tool called Gulp that you''ll learn about in this lesson.
Webpack5:27
Just like compiled projects, JavaScript projects can consist of multiple source files that are compiled or merged into a single file that is deployed into production. In this lesson, you''ll learn about the tool that will do this for us with SharePoint Framework projects: webpack.
IDEs & editors2:39
In this lesson, we''ll look at the different tooling options when creating SharePoint Framework projects.
Introducing the SharePoint Framework
6 Lessons
6 Lessons
This chapter explains why Microsoft created the SharePoint Framework to extend and customize SharePoint sites. You'll learn what the SharePoint Framework is and what scenarios it addresses.
Chapter overview2:16
This brief lesson explains what my goal is in this chapter and what you''ll learn.
History of SharePoint development17:00
Before learning about the SharePoint Framework, take a moment to look back at this history of SharePoint development. This will help you understand what you are building when compared to what you used to build.
Introducing the SharePoint Framework9:47
In this lesson, you''ll be introduced to the SharePoint Framework. Learn what it is, what problems it solves, and under which scenarios it should be considered.
DEMO: Client-side web parts10:02
Let''s now see what the user experience is like with the client-side web parts built for the SharePoint Framework. In this demo, you''ll see how the add & edit experience is different with these new client-side web parts to the more traditional classic web parts we are used to in SharePoint.
Comparing SharePoint development options12:05
In this lesson, learn how the SharePoint Framework development differs from the traditional style of SharePoint development options in the past. This will help you understand what you are building and why in the SharePoint Framework.
SharePoint Framework documentation & resources10:22
While a fantastic resource, this course will likely just be one arrow in your quiver. In this lesson, you''ll learn what other resources are available to you for SharePoint Framework development offered by Microsoft.
Course introduction & overview
4 Lessons
4 Lessons
This chapter introduces you to the author & instructor of the course, what topics you can expect to learn and find out how to get the most out of this course.
Chapter overview5:00
In this first lesson, I welcome you to the course, explain who the target audience is for the course, and previews the other lessons in this chapter.
Course author introduction2:11
In this lesson, learn who your instructor is, and why you should trust AC (me!) with your SharePoint Framework education!
Course bundles (Starter, Fundamentals & Ultimate) & their contents11:45
This course is available in three different content bundles: Starter, Fundamentals & Ultimate. In this lesson, you''ll learn what chapters each bundle contains as well as the additional benefits between the bundles.
How to get the most out of the course6:53
Make sure that you get the most out of the course bundle that you subscribed to by watching this lesson! You''ll learn how the course is constantly updated, how to be notified of updates, and how to get the details on the versions of different apps or libraries are recorded.
SharePoint data access with SPHttpClient
9 Lessons
9 Lessons
For nearly two decades, SharePoint has been a repository for user and business data, sorting this information in lists in libraries. A common task you will be faced with in building custom SPFx solution is how to access these libraries, either reading or writing data to them. In this chapter you will learn how to leverage the SharePoint APIs to work with lists and libraries in your custom SPFx solutions.
Chapter Overview1:39
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Understanding the SharePoint REST API & SPHttpClient11:00
In this lesson, we will review the SharePoint REST API including authentication, authorization, and details on the OData 4.0 protocol.
Reading SharePoint List Items: Explore & Setup List / Project13:59
In this first of a two-part lesson, we will explore the details of working with the SPHttpClient object. Then we will explore the list and sample project used in the demonstrations for the remainder of the chapter.
Reading SharePoint List Items: Get Multiple & Single Items20:13
In this second part of the previous lesson, you will learn how to query for multiple and single items using the SPHttpClient API in SPFx.
Creating SharePoint List Items14:21
In this lesson, you will learn how to programmatically create a new item in a SharePoint list.
Updating SharePoint List Items10:30
In this lesson, you will learn how to programmatically update a new item in a SharePoint list.
Deleting SharePoint List Items9:41
In this lesson, you will learn how to programmatically delete a new item in a SharePoint list.
Batching Requests with SPHttpClient20:43
In this lesson, you will learn how to programmatically submit multiple requests in a single batch a new item in a SharePoint list.
Conclusion0:56
In this brief last lesson, we will look at what this chapter covered.
Leveraging external files & libraries
8 Lessons
8 Lessons
Modern applications are rarely built within a silo. Developers commonly leverage external libraries and frameworks within web applications. Client-side applications present interesting challenges as you must consider how it is referenced, if it is included and the impact on the page size. This chapter will address leveraging external JavaScript and CSS style libraries in SharePoint Framework projects.
Chapter Overview2:04
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Add External Libraries to SPFx Solutions7:31
In this lesson you will see how to add external libraries to a SPFx project.
Understanding Building in Client-Side Projects4:48
A key aspect of leveraging external libraries in client-side projects is understanding the process bundling resources.
JavaScript Library Formats: Modules vs. Non-Modules2:10
This lesson explains the different types of JavaScript libraries that you can leverage in SPFx projects.
Managing AngularJS Application Bundles4:11
This lesson will show you how to take the existing AngularJS application and configure it to not bundle the dependencies, but rather leverage CDN references.
Managing jQuery Application Bundles7:48
This lesson will demonstrate how to manage external references for non-modules and mixed module scenarios.
Loading Libraries, Stylesheets and Files OnDemand3:17
JavaScript libraries aren't the only external resources you may need. In this lesson learn how to deal with external CSS files.
Conclusion0:45
In this brief last lesson, we will look at what this chapter covered.
Working with React in SharePoint Framework solutions
9 Lessons
9 Lessons
Microsoft, specifically the Office division and Office 365 related products elected to adopt the popular web framework by Facebook to implement many parts of their web applications. Specifically for SharePoint, React is the primary web framework for creating reusable components. In this chapter, you will learn the basics of using React within your SPFx solutions.
Chapter Overview & Introduction to React11:14
This lesson will explain what you can expect to find in the remainder of the chapter, explain what React is from a high-level, and then explain what version of React is supported in each SharePoint Framework version as well as SharePoint deployment.
React Class Components11:30
In this lesson, you'll learn about one of two ways you can create React applications: using class components. This is considered the legacy way of building React applications today as it's been replaced by the more performant and simpler React Hooks model. However, the version of React that introduced React Hooks is not available in SharePoint Server on-premises deployments. For more information and a demo on React Hooks, refer to the other lessons in this chapter.
DEMO: Leverage React Class Components in SharePoint Framework Solutions51:38
With an understanding of React class components and how they fit into SharePoint Framework solutions, it's time for a demo! In this very walkthrough, you'll see how to create an interactive client-side web part using React class components.
React Hooks & Functional Components10:11
In this lesson, you'll learn about one of two ways you can create React applications: using React Hooks and functional components. This is considered the modern and recommended way to build React applications today, but it's only available in SPFx solutions that use SPFx v1.9 or later. For more information and a demo on React Class Components, refer to the other lessons in this chapter.
DEMO: React Hooks & Functional Components27:22
In this demo, you'll see how to create the same SPFx project we created in the previous demo on React class components, but this time we'll build it using React Hooks.
Fluent UI React4:54
Microsoft created a library, Fluent UI React (formerly called "Office UI Fabric"), for implementing consistent themes, typography, and layouts across applications. This library was used to create interactive React-based components that SharePoint and other Office products leverage. You can use these in your project as well. In this lesson, you will learn about the Fluent UI React project.
DEMO: Leverage Fluent UI React in SharePoint Framework Solutions17:19
In this lesson, you will see how to take the previously created solution from an earlier lesson and add some of the Fluent UI React components to it.
Testing React Solutions with Jest15:13
In this lesson you will learn what is involved in testing React projects with Jest
DEMO: Testing React Solutions with Jest34:18
This lesson demonstrates how to test React projects with Jest
Customize the UX with extensions
10 Lessons
10 Lessons
Microsoft''s goal is to provide parity in the things we can do with the SharePoint Framework with previous SharePoint customization models. In this chapter, you'll learn how SharePoint Framework extensions can be used to customize the user interface.
Chapter overview3:51
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Development, testing & debugging5:41
In this lesson learn how the development, testing, and debugging story differs with extensions from other SharePoint Framework component types.
Application customizers23:31
The application customizer extension allows you to inject script on the page or add HTML to placeholders on the page.
Application customizers - deployment4:33
This lesson covers the deployment story for application customizers.
Field customizers14:22
In this lesson, learn what field customizers are, and how to create them for your SharePoint lists.
Field customizers - deployment15:23
In this lesson, learn how to deploy field customizers using the Feature XML schema or using the SharePoint REST API.
ListView command sets (including deployment)23:39
In this lesson, learn what ListView command sets are, how to create them for your SharePoint lists, and how to deploy them.
List form customizers40:10
In this lesson, learn what list form customizers are and how you can use SPFx to create custom forms for your lists.
List form customizers - deployment40:10
In this lesson, learn how to deploy list form customizers using the Feature XML schema or using the SharePoint REST API.
Tenant-scoped deployment for extensions24:32
This lesson explains how you can deploy an extension one time to all sites across an entire tenant.
Your first SharePoint Framework project
7 Lessons
7 Lessons
Let's start with a quick hands-on into. In this chapter, we'll create our first project and see it run in a real SharePoint environment. Then we'll make a few changes to experience the dev story.
Chapter overview2:54
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Create your first SPFx project11:36
In this lesson, you''ll create your first SharePoint Framework project.
Run and test our project7:45
After creating the project, in this lesson, you''ll see how to run and test a SharePoint Framework project.
Exploring the code5:19
With a project created, this lesson will walk through it and get it running in our test environment.
Understanding & modifying CSS styles5:19
SharePoint Framework projects, like all other web projects, leverage CSS to control the rendering and styling of a project. This lesson will explain how CSS styles are used.
Understanding & modifying strings5:17
In this lesson, learn how to work with replaceable strings in SharePoint Framework projects.
Deploying to SharePoint sites11:36
Once a project has been created, it needs to be deployed to a SharePoint site. While another chapter will go into more depth on this subject, this lesson will explain enough so you understand what the process is like.
Leveraging the Microsoft Graph with MSGraphClient
5 Lessons
5 Lessons
In this chapter, you will learn how to work with the Microsoft Graph API in custom SPFx solutions to get access to a user's email, calendar, contacts files in OneDrive and many more services!
Chapter Overview3:18
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Microsoft Graph Overview14:52
New to the Microsoft Graph? This lesson is for you as it is the perfect primer answering the question: what is the Microsoft Graph?
Microsoft Graph & SharePoint Framework5:18
In this lesson, you will learn how the SharePoint Framework API provides objects to make working with the Microsoft Graph easier for SPFx developers.
Calling the Microsoft Graph from SharePoint Framework Solutions22:02
This lesson demonstrates using the SharePoint Framework to call the Microsoft Graph after granting SharePoint the necessary permissions.
Conclusion2:10
In this brief last lesson, we will look at what this chapter covered.
Logging & debugging SPFx projects
3 Lessons
3 Lessons
While creating custom solutions, developers need to have a firm grasp on different debugging options and techniques. This chapter will walk you through different debugging options available to client-side developers. In addition, this chapter will also cover some of the logging options provided by Microsoft in the SharePoint Framework.
Chapter Overview2:09
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Logging in SPFx Projects7:15
Let’s now see what logging options the SharePoint Framework has to offer us and what we can use in the browser.
Debugging in SPFx Projects11:41
In this lesson we will look at the debugging options available to web developers using just the browser, or more specifically, the browser’s debugging tools and console.
Property panes for client-side web parts
7 Lessons
7 Lessons
In this chapter, you''ll learn the basics of how property panes work within the SharePoint Framework. We''ll also demonstrate all the controls available to developers.
Chapter overview1:46
Just as web parts have been a part of SharePoint since the early days going back to SharePoint 2003, so have the editing experience associated with them: property panes. In this chapter, you''ll learn the basics of how property panes work within the SharePoint Framework. We''ll also demonstrate all the controls available to developers.
Understanding how property panes work4:13
In this lesson, we''ll review how client-side web parts persist data with public properties and then explore how property panes work in the SharePoint Framework.
Adding controls to property panes3:39
In this lesson, you''ll learn how to add controls to custom property panes.
Change web part values in property panes4:19
Learn how to manipulate and handle changes in the property pane within your client-side web parts.
Validate user input2:57
In this lesson, you''ll learn how to validate data entered in the property pane controls.
Adding groups and pages to property panes2:44
Property panes offer the ability to group controls on a single page, as covered in this lesson. This lesson will show you how to collect multiple groups of controls in one or more pages within a property pane.
Property pane control showcase12:24
This lesson will showcase all the controls (as well as options each one offers) provided by Microsoft for use in client-side web parts.
Upgrading & versioning SPFx solutions
5 Lessons
5 Lessons
Once a SharePoint Framework solution has been deployed into production, there will likely come a time when you need to upgrade and add new features or address issues with the existing version. In this chapter you will learn how to properly upgrade and version your custom solutions.
Chapter Overview2:09
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Semantic Versioning, NPM & SharePoint6:17
This lesson will explain what Semantic Versioning is and how version numbers work with respect to NPM and SharePoint.
NPM Package Versioning13:36
In this lesson you learn how to manage NPM packages and determine when you have outdated versions in your projects and dev environment.
Project / Code Versioning12:21
This lesson will cover what is involved in versioning the code part of your project.
Conclusion0:38
In this brief last lesson, we will look at what this chapter covered and offer some recommendations for deployment.
Branding & design: CSS, themes, and Fluent UI
8 Lessons
8 Lessons
Design is something that all projects should factor into the development process as it has significant impacts on the usability, experience and therefore adoption of all custom solutions. You can think of design from two angles: organization and branding. This chapter will first look at some design elements to consider when building custom SPFx solutions. We will then cover the branding aspect from leveraging custom CSS, leveraging SharePoint themes as well as taking advantage of different visual design languages such as Bootstrap, Material and the Office UI Fabric from Microsoft.
Chapter Overview2:13
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Designing SharePoint Customizations1:52
This brief lesson provides an overview of the SharePoint design customization decisions and aspects developers should be aware of.
Designing Web Parts3:53
This lesson covers some of the different design elements you should consider when creating custom client-side web parts.
Leveraging Dialogs16:37
Dialogs are a useful tool for prompting and notifying the user of different events in a page. This lesson covers how to leverage and implement them in your customizations.
Leveraging Custom CSS11:03
All web projects leverage CSS for branding and styling, including SharePoint Framework customizations. This lesson covers the different aspects of utilizing CSS in your SharePoint Framework customizations.
Utilizing Themes in Custom Solutions8:15
SharePoint sites provide for site owners to switch the theme of a site for easy customization. This lesson shows you how to leverage the site's theme in your custom solutions.
Office UI Fabric6:18
The visual language Office UI Fabric used by SharePoint and many other Office-related properties can be leveraged by your own customizations as covered in this lesson.
Conclusion0:52
In this brief last lesson, we will look at what this chapter covered.
Create SharePoint Assets with the Feature Framework
5 Lessons
5 Lessons
Previous SharePoint development models enabled developers to provision assets in SharePoint sites. This included things like list templates, list instances and many other types. The SharePoint Framework provides vehicle for developers to provision assets. In this chapter, you will learn how to provision SharePoint assets in SPFx projects.
Chapter Overview1:49
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Provisioning SharePoint Assets3:01
This lesson introduces the four primary options for provisioning assets in SharePoint.
Approaches & Patterns to Provisioning Assets9:50
This lesson, continuing from the previous lesson, explores each of the provisioning options in more detail.
Declaratively Provisioning SharePoint Assets28:38
This lesson, continuing from the previous lesson, explores each of the provisioning options in more detail.
Upgrading Declaratively Provisioned SharePoint Assets13:42
This lesson demonstrates how to use the Feature upgrade process in SharePoint to update provisioned assets.
Deploying to production
14 Lessons
14 Lessons
Building a SharePoint Framework solution is just the first part of a project. The goal is to get this thing into production, and that’s what this chapter will cover. You will learn how to package your solution, the different options for deploying assets including content delivery networks (CDNs) and various deployment nuances.
Chapter Overview0:58
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Deployment Artifacts & Responsibilities4:00
Let’s start out by examining the files that we need to deploy, their responsibilities and where they are supposed to go. Once you a solid understanding of these files and where they go, building, shipping and hosting them will be a lot less complex.
Building & Packaging Process6:10
In this lesson we will focus on the process of creating the files that you will need to deploy your SharePoint Framework solution. This includes the files you will deploy to SharePoint as well as the files that make up your custom components that will be deployed elsewhere.
Configuring the Packaging Process2:11
Let’s talk about this packaging process a bit more.
Tenant & Site Collection App Catalogs3:36
SharePoint provides two different types of app catalogs you can use to scope the availability of customizations.
Deploying SPFx Projects to Production7:01
The next step is deployment, so let’s look at what’s involved in this process in this lesson.
Baseline Deployment: Local Web Server5:15
This lesson will start with a baseline deployment where the project’s assets are hosted from the local development web server. This scenario is one you will not use in production, but I’m using it to demonstrate the starting point.
Setup & Deploy: Non-CDN (AWS S3)5:32
In this first demo on a real world deployment story, let's look at a manual deployment.
Setup & Deploy: Azure CDN10:59
This lesson is going to walk you through the process of setting up an Azure CDN.
Application Lifecycle Management APIs12:21
This lesson will show how you can manage the application lifecycle with APIs, PowerShell, and the Office 365 CLI.
Isolated Web Parts: Overview8:06
In this lesson, learn how you can deploy secure web parts that run in isolated domains and processes.
Isolated Web Parts: Demo13:24
After learning about isolated web parts in the previous lesson, this lesson will demonstrate creating one and how they work.
Setup & Deploy: Office 365 CDN12:36
This lesson is going to walk you through the process of setting up and deploying to the Office 365 supplied CDN.
Parting Thoughts & Chapter Conclusion1:53
In this brief last lesson, we will look at what this chapter covered and offer some recommendations for deployment.
Leveraging external APIs in SharePoint Framework solutions
11 Lessons
11 Lessons
You will inevitably need to call external services in your SPFx projects - that's what this chapter is about! Learn how to call 3rd party services both anonymous and those protected with Azure AD.
Chapter Overview3:48
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Leveraging External APIs in SPFx solutions5:06
In this lesson, you will learn about the differen types of external APIs you can call from the SharePoint Framework, as well as how the remainder of chapter is organized.
Understanding SPFx’s Approach to Calling 3rd Party APIs5:14
In this lesson, you will learn how the SharePoint Framework approaches calling external APIs.
Calling Open APIs with HttpClient3:18
Learn how to interact with open 3rd party APIs using the HttpClient API in the SharePoint Framework.
Deploying a Simple REST API as an Azure Function11:49
In this lesson, you will see how to create and deploy a simple REST API using an Azure Function App as well as securing it with Azure AD.
Calling Open APIs with HttpClient26:01
Create a SharePoint Framework client-side web part that consumes and writes to a 3rd party open REST API.
Calling AzureAD Secured APIs with AadHttpClient26:17
In this lesson, learn how the SharePoint Framework supports and implements calling Azure AD-secured APIs.
Calling Existing AzureAD Secured APIs with AadHttpClient19:31
In this demo lesson, learn how to create a SharePoint Framework client-side web part that leverages an existing Microsoft API secured with Azure AD.
Deploying & Securing a Simple REST API as an Azure Function13:35
In this lesson, you will see how to create and deploy a simple REST API using an Azure Function App as well as securing it with Azure AD.
Calling Custom Azure AD Secured APIs with AadHttpClient20:34
Create a SharePoint Framework client-side web part that consumes and writes to our custom REST API deployed as an Azure Function and secured with Azure AD.
Conclusion2:28
In this brief last lesson, we will look at what this chapter covered.
Working with jQuery in SharePoint Framework solutions
6 Lessons
6 Lessons
SharePoint Framework developers are free to use any utility library or web framework in creating custom solutions for SharePoint. One popular JavaScript library that has been around for quite a while is jQuery. In this chapter you will see how to not only leverage jQuery in custom solutions but also how to properly reference it in projects and leverage popular jQuery plugins. When styling your applications, the popular jQueryUI project is a great option for jQuery based solutions that will also be covered in this module.
Chapter Overview1:14
This brief lesson will explain what you can expect to find in the remainder of the chapter.
jQuery Overview6:47
While jQuery has been around for many years, it may not be familar to some. This lesson starts with a very brief overview into the popular areas of jQuery. Next, this lesson will look at the current state of jQuery and offer some opinions as to how you should approach and treat it when using it within SharePoint Framework solutions.
Using jQuery in SPFx Solutions11:58
In this lesson you will learn how to add jQuery to a SharePoint Framework solution and ensure it is properly referenced. This done by configuring the SharePoint Framework build toolchain to externalize the jQuery library, not include it in the generated bundle, and ensure that it is pulled in from a CDN keeping your bundle as small as possible.
Using jQuery Plugins in SPFx Solutions15:28
One of jQuery's most popular capabilities is that you can extend it with plugins. These plugins change the jQuery prototype object once loaded to provide new functionality to this very popular library. In this lesson, learn how to properly configure your project to reference and use jQuery plugins.
Using jQueryUI in SPFx Solutions13:01
The jQuery community has created a popular library of reusable controls that are distribued like jQuery plugins that you can use in custom jQuery solutions. This is the jQueryUI project and it includes things like accordions, tab controls, dialogs and autocomplete input controls. This lesson shows how to leverage these components as well as include custom themes from the jQueryUI project.
Chapter Conclusion1:27
In this brief last lesson, we will look at what this chapter covered.
Client-side web parts
5 Lessons
5 Lessons
The SharePoint Framework initially, supported a single component type: client-side web parts. In this chapter, you''ll learn how to create web parts and the files involved within an SPFx project.
Chapter overview3:17
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Creating and inspecting client-side web parts14:46
In this lesson, we''re going to create our first client-side web part and look at the initial project''s code.
Client-side web part properties8:28
In this lesson, we''ll go further with the custom properties you can set in your custom web part''s manifest.
Coding client-side web parts9:10
In this lesson, we''ll continue with our web part tour and take it to the next level - let''s build something interesting.
Add configurable properties5:01
In this lesson, you''ll learn how to let your users configure the values of properties on the web part that are saved for others to see.
Dig into the SharePoint Framework
7 Lessons
7 Lessons
SharePoint Framework projects share many concepts across all types of components developers can build in them. This chapter will explain the different files and folders in the project structure, the different display modes, page contexts, and environments, and how you can add multiple components to the same project.
Chapter overview4:19
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Tour of generic & non-SPFx project files & folders7:34
In this lesson, we''ll take a look at the generic aspects of a SharePoint Framework project as many files and folders in a new project aren''t specific to the SPFx at all.
Code: Important files and folders in a project10:19
Learn what the package.json file is, why it is important and what it contains.
Code: Important solution folders - generated folders4:45
Learn about the generated folders created by the build toolchain.
Page context and display mode8:21
Developers should be familiar with the page context and what information it contains.
Upgrade the TypeScript version in SPFx projects7:16
Starting with SPFx v1.8, you can control which version of TypeScript is used in your projects. This lesson will show you how to change the TypeScript version used.
Add additional components to existing SPFx solutions6:02
In this lesson, you''ll learn how to add multiple components to an existing SPFx solution.
Automated testing of SharePoint Framework solutions
9 Lessons
9 Lessons
Implementing automated testing within your custom solutions, be they SharePoint Framework projects or any other custom code project, is widely considered a good practice. Projects that include automated tests are more robust and are of higher quality because the same tests can be easily run repeatedly to check for errors. Many developers skip this step of adding tests because it’s hard and confusing. In this chapter, you will learn the practices of not only why you should test, but the different types of tests, what you should test and how to implement automated testing in your SharePoint Framework projects.
Chapter Overview2:03
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Automated Software Testing: Why? What? How?7:18
This lesson will address the reasons why you should implement automated testing to your projects.
Tools of the JavaScript Testing Trade7:51
In this lesson we explore the different testing tools available to developers in the JavaScript world and focus on the ones we will use in this chapter to test SharePoint Framework projects.
Testing SharePoint Framework Projects7:29
In this lesson you learn what''s involved in testing SharePoint Framework projects and how to configure your project for testing.
Setup Jest for SPFx Projects10:41
In this lesson you will roll your sleeves up and implement the testing framework Jest in a SPFx project.
Creating Your First Jest Tests17:19
In this lesson you will create your first few tests including async tests and testing promise-based methods.
Testing with Jest: Tips, Tricks & Debugging14:16
After creating your first few tests, this lesson will show you some tips and tricks to SPFx testing. You will also learn how to debug your tests in Visual Studio Code.
Reporting on Jest Tests: Code Coverage13:27
This lesson will demonstrate how to setup code coverage reports to give you confidence you are adequately testing your custom code.
Conclusion1:44
In this brief last lesson, we will look at what this chapter covered.
Sharing code between SharePoint Framework solutions
7 Lessons
7 Lessons
Sharing code across multiple projects isn’t unique to SharePoint Framework projects. This is something developers have been striving to do since the very beginning. Whether it’s for performance or code maintainability reasons, it’s the right thing to do. The SharePoint Framework provides developers a unique way to share code across projects using a special type of component: a library component. In this chapter, you’ll learn how to create and utilize library components in SharePoint Framework projects. But that’s not all, you’ll learn how you can a more portable NPM package and use it in not just SharePoint Framework projects but in any web project.
Chapter Overview2:22
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Sharing Code Across SharePoint Framework Projects8:54
In this lesson, we'll discuss the challenges, goals, and options associated with sharing code across SharePoint Framework projects.
SharePoint Framework Library Components20:00
This lesson introduces you SharePoint Framework library components, one way you can share code between SharePoint Framework projects. We'll cover the advantages and disadvantages associated with library components, and you'll learn how to develop, deploy, and consume library components in your SharePoint Framework projects.
DEMO: SharePoint Framework Library Components30:55
In this lesson, you'll learn how to create and consume a SharePoint Framework library component. This demo refactors code out of an existing SharePoint Framework web part component into a library component and then updates the web part to consume the shared code from the library component. Finally, you'll learn how to prepare and deploy both components to your SharePoint environment.
NPM Packages and SharePoint Framework Projects22:15
In this lesson, you'll learn about another option that you can use to share code across SharePoint Framework projects. NPM packages can be used to create, distribute, and generate JavaScript modules as bundles that can be consumed not just by SharePoint Framework projects, but also by any JavaScript based project.
DEMO: NPM Packages and SharePoint Framework Projects31:26
In this lesson, you'll learn how to create and consume a JavaScript bundle generated using an NPM package. This demo refactors code out of an existing SharePoint Framework web part component into a NPM package, which is just a Node.js-based project, and then updates the web part to consume the shared code from the generated bundle. You'll learn how to prepare and deploy both components to your SharePoint environment and a public share. Finally, you'll see how you can leverage the same bundle in a non-SharePoint Framework JavaScript project.
Conclusion2:12
In this brief last lesson, we will look at what this chapter covered.
Extending & customizing Webpack
7 Lessons
7 Lessons
Webpack is an integral part of the build toolchain in most web projects these days, including the SharePoint Framework. This chapter will explore how it's used in SharePoint Framework projects and how you can customize it by modifying its configuration a well as how you can extend it using loaders and plugins.
Chapter Overview3:26
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Webpack: Overview and How it Works7:29
In this lesson, we take a deeper look at what webpack is and how it works from the introductory lesson that we looked at back in chapter 3 of the Starter bundle.
How Webpack is Used in SharePoint Framework Projects14:28
In this lesson, we look at how webpack is implemented and used in SharePoint Framework projects.
Customizing the Webpack Configuration9:17
In this lesson, learn how you can change how webpack works by customizing the configuration settings prior to the SharePoint Framework running it.
Extending Webpack with Loaders10:39
In this lesson, learn how you can further customize webpack by using custom loaders in your configuration.
Extending Webpack with Plugins13:48
In this lesson, learn how you can further customize webpack by using custom plugins in your configuration.
Conclusion1:19
In this brief last lesson, we will look at what this chapter covered.
Working with Angular in SharePoint Framework solutions
11 Lessons
11 Lessons
When building SharePoint Framework solutions, regardless if they are client-side web parts or UI extensions, there is a visual component to these controls. While you could implement these interfaces by hand yourself, why not take advantage of a modern web framework? Frameworks make data binding, event handling and state management so much easier! Developers can use any web framework when building SharePoint Framework components. The selection of a web framework is based on various elements, one of which is an existing experience. In this chapter, you will learn how you can leverage Angular, specifically Angular Elements (introduced in Angular 6) in SPFx solutions.
Chapter Overview2:49
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Elephant in the room: Angular or React?4:16
One question, or decision, all SPFx developers have to decide on is if they should use React or Angular. This lesson looks at the pro's and con's of each web framework in the context of SPFx development.
History of Angular and AngularJS v1.7+6:25
This lesson will briefly explain the history of Angular, back to v1 of the web framework.
Introducing Angular: Primer13:31
New to Angular? This lesson is for you as it serves as the quickest primer to the popular web framework.
DEMO: Creating the Apollo Mission Viewer with Angular32:50
In this lesson, we will build the Apollo Mission Viewer app as an Angular application.
Angular & the SharePoint Framework6:29
In this lesson, we will explore the challenges with using Angular in SharePoint Framework applications.
Web Components, Custom Elements & Angular Elements5:22
This lesson will explain the concept of web components and custom elements, native web technologies, and how they can be used to leverage Angular in SharePoint Framework projects.
DEMO: Converting Angular application to Angular Elements11:27
Now that we see how custom elements and Angular Elements can be used in SharePoint Framework solutions, the first step is to port our Apollo Mission Viewer application to a custom element with Angular Elements. This lesson will demonstrate how to do this.
Leveraging Angular Elements in SPFx Solutions8:33
In this lesson, we look at what is involved in building & hosting an Angular Elements based application in a SharePoint Framework solution.
DEMO: Hosting an Angular Elements Application in a SPFx Solution14:26
In this demo lesson, we will take the Angular Elements NASA Apollo Viewer custom element and import it into a SharePoint Framework client-side web part.
Chapter Conclusion1:20
In this brief last lesson, we will look at what this chapter covered and offer some recommendations for deployment.
Property panes for client-side web parts: create property controls
5 Lessons
5 Lessons
Developers can use the property pane to enable users to modify the settings on client-side web parts using basic controls included in the SharePoint Framework API. For more complex scenarios, you can also use open source community-based solutions. In the case of more complex scenarios, you can build custom property pane controls. In this chapter, you’ll learn how to create a custom property pane control and use it within a client-side web part.
Chapter Overview2:23
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Going beyond basic property pane controls9:28
In this lesson, we'll look at what options you have for leveraging controls in web part property panes.
Custom property pane controls15:20
In this lesson, you'll learn how to create a custom property pane control before we dive into a demo in the following lesson.
DEMO: Create a custom property pane control34:32
In this demo, learn how to create a custom property pane control by example in this lesson.
Conclusion1:21
In this brief last lesson, we will look at what this chapter covered.
Adaptive Card Extensions (ACEs)
7 Lessons
7 Lessons
Learn how to create custom Adaptive Card Extensions (ACEs) with the SPFx for use in Viva Connections dashboards to customize and extend the desktop and mobile experiences.
Chapter overview4:31
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Adaptive Cards Primer19:57
Developers must have a firm grasp of Adaptive Cards - the technology Adaptive Card Extensions are based on. This lesson serves as a primer to Adaptive Cards.
Introduction to Adaptive Card Extensions (ACEs)21:17
Before we dive into Adaptive Card Extensions (ACEs), this lesson explains what they are and how all the pieces of an ACE are related to one another.
In-depth: the Adaptive Card Extension class23:55
This lesson takes an in-depth look at the cornerstone of all ACEs and starts to create a project we''ll expand on throughout the remainder of the chapter.
In-depth: the CardView16:24
Building off the project you created in the last lesson, this lesson explores the ACE CardView component in-depth.
In-depth: the QuickView38:48
This lesson continues with our in-depth look at all parts of ACEs by exploring the QuickView. Learn what you can do with a QuickView by extending our project.
Viva Connections-specific Actions13:59
While ACEs are based on the Adaptive Card schema, Microsoft has added unique actions you can use in your ACEs for Viva Connections. In this lesson, you''ll learn how to add these specialized actions by adding them to our existing project.
DevOps: Monitoring & telemetry with Azure Application Insights
8 Lessons
8 Lessons
Development teams and organizations are always looking for ways to automate, streamline, and improve processes related to building software. SharePoint Framework development teams are no different. This process usually brings together development and operations, commonly called DevOps, to continually provide value to customers. DevOps is comprised of multiple practices and components. One aspect of DevOps is continuous monitoring. In this chapter, you’ll learn how to implement continuous monitoring into your SharePoint Framework projects using Azure Application Insights, one component in the larger Azure Monitor suite.
Chapter Overview1:54
This brief lesson will explain what you can expect to find in the remainder of the chapter.
What is DevOps? What is Continuous Monitoring?9:34
In this lesson, we'll discuss what continuous monitoring is and some of the options available to you.
Azure Application Insights13:42
In this lesson, you'll learn some of the core concepts and fundamentals of Azure Application Insights.
SharePoint Framework & Continuous Monitoring8:25
In this lesson, we'll cover the options available to implementing continuous monitoring in your SharePoint Framework projects.
Implement Azure Application Insights in SPFx Projects14:38
In this lesson, you'll learn how to implement continuous monitoring with Azure Application Insights into your SharePoint Framework projects.
DEMO: Implement Continuous Monitoring of SPO Tenants45:42
In this lesson, you'll learn how to create a global SharePoint Online tenant monitoring component using Azure Application Insights.
DEMO: Implement Continuous Monitoring of SPFx components23:36
In this lesson, you'll learn how to add Azure Application Insights to an existing SharePoint Framework component.
Conclusion0:47
In this brief last lesson, we will look at what this chapter covered.
Team-based SPFx development
5 Lessons
5 Lessons
While some of us work independently on our own, many developers work on a team on shared projects. In this chapter we look at topics related to team-based development.
Chapter Overview1:13
This brief lesson will explain what you can expect to find in the remainder of the chapter.
SharePoint Framework Development isn’t Special2:42
In this lesson we look at SharePoint Framework as a whole and how it shouldn't be approached as something special.
Development Environments5:36
In this lesson, learn how you should handle your developer's environments.
Projects & Source Code9:32
How should you manage the source code and projects as a whole? That's what this lesson is all about.
Conclusion2:17
In this brief last lesson, we will look at what this chapter covered.
Localizing SharePoint Framework projects
9 Lessons
9 Lessons
If you work for a multinational organization, or you are a consultant or ISV building SharePoint Framework solutions for customers who have users that speak different languages, why build a solution that targets just one locale? Building multi-lingual and localized SPFx solutions are easy and this chapter will show you how to do it!
Chapter Overview2:03
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Understanding Localization in SharePoint2:21
This lesson will provide an over to multilingual capabilities in SharePoint.
Understanding Localization within the SharePoint Framework2:30
This lesson will cover the multilingual and localization aspects of the SharePoint Framework from a high level.
Localizing Metadata in SPFx Components7:54
In this lesson you will learn how to localize SPFx component metadata.
Localizing Content in SPFx Components13:25
In this lesson you will learn how to localize SPFx component content.
Localizing User Content in SPFx Components11:09
This lesson will demonstrate some options for offering users translate their provided content.
Addressing Design Challenges with Pseudolocalization6:33
In this lesson, learn how you can leverage pseudolocalization to address design challenges.
Understanding how Localization within Debug and Release Builds4:45
In this lesson you will learn how the different build types can impact localization in SPFx projects.
Chapter Conclusion1:33
In this brief last lesson, we will look at what this chapter covered.
Connecting SPFx components with dynamic data
8 Lessons
8 Lessons
Connecting two web parts together was a very popular technique implemented in previous SharePoint development models. In this chapter, you will learn how to do the same thing with Dynamic Data.
Chapter Overview4:15
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Introducing Dynamic Data in SPFx7:55
In this lesson, you will learn what dynamic data is in SPFx and how you can leverage it.
Building Dynamic Data Components13:43
In this lesson, you will learn what's involved in creating dynamic data components. This includes both providers and consumers as well as how to test and debug them.
DEMO: Create Provider Web Part12:27
In this lesson, you will see how to create a web part that acts as the provider in a dynamic data scenario.
DEMO: Create Consumer Web Part & Subscribe Properties17:10
In this lesson, you will learn how to subscribe to changes in properties.
DEMO: Create Consumer Web Part & Subscribe Objects10:28
In this lesson, you will learn how to subscribe to changes in objects.
DEMO: Create Consumer Extension & Manually Subscribe to Dynamic Data21:50
In this lesson, you will learn how to not only create a SPFx extension that uses dynamic data, but also manually subscribes to changes to a data source's property.
Conclusion2:22
In this brief last lesson, we will look at what this chapter covered.
Client-side web parts - advanced: SPAs, Microsoft Teams & More
7 Lessons
7 Lessons
In this lesson, you will learn how you can leverage SharePoint Framework client-side web parts in more than just SharePoint pages.
Chapter Overview1:06
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Using SPFx for Custom Microsoft Teams Tabs16:24
In this lesson, you will learn how you can leverage SharePoint Framework web parts to create custom tabs in Microsoft Teams.
SPFx for Custom Microsoft Teams Tabs: SharePoint Online Demo13:59
Create and deploy a SharePoint Framework web part as a Microsoft Teams tab in this demonstration-based lesson.
SPFx for Custom Microsoft Teams Tabs: Microsoft Teams Demo9:52
Create and deploy a SharePoint Framework web part as a Microsoft Teams tab in this demonstration-based lesson.
Single Page App Pages with Web Parts8:23
In this lesson, you will learn how you can create full page applications, also known as single page applications (SPAs) using SharePoint Framework web parts.
Demo: Create Single Page App Pages with Web Parts13:08
Create and deploy full page applications, also known as single page applications (SPAs) using SharePoint Framework web parts in SharePoint Online.
Conclusion1:01
In this brief last lesson, we will look at what this chapter covered.
Extending & customizing Gulp tasks
8 Lessons
8 Lessons
Microsoft uses the popular task runner gulp as the tool to perform common jobs when developing SharePoint Framework projects. This chapter will explore how it's used and how you can extend it.
Chapter Overview1:55
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Gulp: Overview and How it Works4:43
In this brief lesson, we will explore the basics of how gulp works.
How Gulp is Used in SharePoint Framework Projects15:08
In this lesson, learn how gulp is implemented and leveraged in SharePoint Framework projects.
DEMO: Customizing Gulp with Custom Task Sequences6:28
In this lesson, you will learn how you can create your own custom task sequences with Gulp.
DEMO: Microsoft Gulp Logging & Hook Into Existing Tasks18:03
In this lesson, learn how to utilize existing SPFx's custom logging functions and hook into existing build tasks.
DEMO: Integrate 3rd Party Gulp Tasks9:43
In this lesson, learn how you can incorporate 3rd party gulp tasks in SharePoint Framework projects.
DEMO: Creating Custom Gulp Tasks12:46
In this lesson, you will learn how you can create your own custom gulp tasks
Conclusion1:20
In this brief last lesson, we will look at what this chapter covered.
DevOps: CI/CD with GitHub Actions & Azure Pipelines
8 Lessons
8 Lessons
Development teams and organizations are always looking for ways to automate, streamline, and improve processes related to building software. SharePoint Framework development teams are no different. This process usually brings together development and operations, commonly called DevOps, to continually provide value to customers. DevOps is comprised of multiple practices and components. One aspect of DevOps is continuous integration (CI) and continuous delivery (CD). In this chapter, you’ll learn how to incorporate CI/CD into your SharePoint Framework projects using two popular services: GitHub Actions and Azure Pipelines.
Chapter Overview4:51
This brief lesson will explain what you can expect to find in the remainder of the chapter.
What is DevOps? What is CI/CD?12:48
This lesson introduces you to the concept of DevOps and explores one of the many DevOps practice: continuous integration (CI) and continuous delivery (CD).
SharePoint Framework & CI/CD13:06
In this lesson, you''ll learn what''s involved in incorporating CI/CD practices with SharePoint Framework projects.
DevOps CI/CD Practices with GitHub Actions9:34
GitHub Actions enable developers to add workflows to GitHub repositories. In this lesson, you''ll learn the concepts of GitHub Actions before we add CI/CD practices to a SPFx project.
DEMO: Implement DevOps CI/CD Practices with GitHub Actions35:21
In this demo, you''ll learn how to implement a CI/CD process to your SPFx project using GitHub Actions. You''ll see how to automate the builds, executing tests and conditionally deploying SPFx solutions to multiple SharePoint environments.
DevOps CI/CD Practices with Azure DevOps Pipelines12:40
Azure DevOps Pipelines enable developers to add workflows to SPFx projects repositories. In this lesson, you''ll learn the concepts of Azure DevOps Pipelines before we add CI/CD practices to a SPFx project.
DEMO: Implement DevOps CI/CD Practices with Azure DevOps Pipelines37:09
In this demo, you''ll learn how to implement a CI/CD process to your SPFx project using Azure DevOps Pipelines. You''ll see how to automate the builds, executing tests and conditionally deploying SPFx solutions to multiple SharePoint environments.
Conclusion1:49
In this brief last lesson, we will look at what this chapter covered.
Join 6,000+ full-stack developers
who've taken this course!
Tomasz Szulczewski
Developer
I have followed Andrew for years, and I believe it was around SharePoint 2007 that I found his blog for the first time. Since then I have learned so many things from his blog posts and courses. So, when I heard that he was going to release his own SPFx course I have no doubt. I just got it when It became available. And I never regretted it. The course provides you with so much useful information and it only to us how to use it. I think right now, this is the best SPFx training on the market!
read full testimonial collapse
Sundarapandian Balasubramani
Full-Stack Developer
TrianzThe Office Hours session was awesome. Thanks, for the course on Mastering the SharePoint Framework. I have 10 years of experience in SharePoint development. Most of my experience is with server-side code. Your course narrows down the learning path in new SPFx development. Thanks again for enlightening me about SPFx development. Cheers!
read full testimonial collapse
Nello D'Andrea
SharePoint Developer
La Mobilière"Mastering the SharePoint Framework" was instrumental in quickly getting me on track to deliver outstanding and engaging SharePoint Portals. The course not only provided comprehensive lectures, videos, and examples but also served as a valuable reference whenever I needed specific information. The well-structured content covers every aspect of developing with SPFx. For instance, I recently found excellent material on how to call AAD Secured APIs from SPFx. This course is a must-have, and access to the supportive community ensures you always receive kind and helpful assistance.
read full testimonial collapse
Mike Zimmerman
SharePoint Developer
My experience with coding prior to your course was all on-the-job Excel VBA and a little HTML/Javascript - no formal training or courses. Because of my lack of professional training, I really liked the way your course walked me through a project from setting up the toolchain to creating my first web part, to the more advanced topics like analytics. I also like that you spend time talking about the "why" as well because it shows that there is a thought behind it… good or bad. Thanks again for your course! This course is worth every penny, especially the Ultimate bundle. The Discord community has helped me grow my skills in ways I never would have thought possible.
read full testimonial collapse
Michael Feng Wan
Development Professional
I took Andrew's Mastering the SPFx training in 2024. When I started, I was nervous because I knew so little about everything in the toolchain. The training materials are well structured, so I understand better and more as I advance. After the training, I am able to build a web part that was delivered to the business area. It is very helpful that the source code for the course is available for downloading, trying out, and further study. One thing I like most is that learning doesn't stop when I finish my training. When I have questions, I post them in Voitanos' student forum and get answered very quickly. I receive updates about the latest developments in Microsoft 365 development, so I don't feel alone in the study path.
read full testimonial collapseBrian Check
Andrew's course and Discord server have been phenomenal in helping not only skyrocket my SPFx development learnings and speed but also to deobfuscate the SPFx toolsets, core files, and MS caching behaviors and cause/effects of changes to the involved tech stack internals. I have yet to find a single source that goes through things this thoroughly. Thank you Andrew - your training has been invaluable to me!
read full testimonial collapse
Don Kirkham
MCT, MCPD, Microsoft 365 Certified: Teams Application Developer Associate, Microsoft Certified: Azure, Microsoft Certified: Power Platform, Solutions Architect & Owner
This course elevated my SPFx development from “just trying to figure it out” to “a level where I could teach others.” Andrew is a master instructor, not just in the content, but also in the media of video training. The videos are sequenced to build on previous lessons, which keeps the learner from being overwhelmed with too much information. The lifetime model allows me to return to lessons as needed to learn a piece that I haven't needed before or to return over and over until I finally understand. If you are interested in becoming a professional SharePoint developer, this will be the best money you ever spend in your professional journey. Andrew has always been accessible to help developers, but the extra access that Ultimate Course customers receive, including the Mastermind group access and monthly Office Hours with Andrew, puts one of the best SharePoint developers in the world only a quick post away from helping you with an issue. Thanks AC for providing this service to the developer community!
read full testimonial collapse
Nik Patel
Solution Principal
SlalomVoitanos delivered another version of the course with few minor fixes of the previous chapters. The way Andrew Connell is making sure of the quality & content, this is going to be a must for all SharePoint devs in future for structured learning!
read full testimonial collapse
Kathleen Boilek
SharePoint Developer
Overall, it is worth my money and time. Thank you so much for putting this together and can't wait until I get to the Ultimate package!
read full testimonial collapse
Wesley Brown
Computer Systems Architect, Mission Technologies Division
Newport News ShipbuildingThank you very much for the in-depth SPFx training. I learned a TON and look forward to applying it to some real world solutions.
read full testimonial collapseRenate Zillger
Microsoft SME: SharePoint, Teams, M365, Dynamics, Ecommerce
I have purchased and used your SPFx course for a few years, which has been incredibly helpful. Your style, knowledge, and delivery are excellent. You break down topics and present difficult concepts clearly and concisely. I would recommend your courses to anyone.
read full testimonial collapseSolomon
This was how I got introduced to SharePoint Framework. And the course by Andrew was the best I ever got for an introduction to basics.
read full testimonial collapse
Dale Lee
Cloud Solutions Architect
The SPFx course is just what I need and is far and away the best dev training course I have participated in. The best online course as well! ...the way you articulate the big picture then step back to a blank canvas and step-thru how to paint that picture layer-by-layer is very effective.
read full testimonial collapse
Steve Farrall
Senior SharePoint Developer
J. Murphy & Sons LimitedI just wanted to say cheers for your persistence at delivering quality learning material, which is helping me retain my position of lead SharePoint Developer. I love the self-paced learning model, I love the enthusiasm and speed of your updates, and your session on leveraging external resources (such as Azure Functions) was an absolute delight for me, as a C# developer of 19 long years! One of my colleagues is a JS wizard, and she churns out every SPFx web part that I design. Now we can start doing real value-add projects for our business where I create APIs an Azure Functions so that we can create web parts with live integration into many of our specialist industry systems, as well as more mainstream platforms such as Dynamics 365. Finally, … I simply want to say thank you. You're doing great work and it is appreciated.
read full testimonial collapse
Jon Aron
Senior Business Systems Developer
Foley & Lardner LLPThe course is amazingly in-depth and has tons of terrific content. Andrew does a great job of communicating complicated subject matter in a way that is easy to understand. I highly recommend it to learn and master the latest SharePoint Framework.
read full testimonial collapse
Szabolcs Tefner
SharePoint & Microsoft 365 Expert
The technical aspect is well planned, so it goes from the overall picture to the detailed explanation. This is where I see your perfection in teaching and explaining things. Andrew usually answers spontaneous professional questions on a wide range of topics. Thank you.
read full testimonial collapse
Adrian Thompson
Microsoft 365 Specialist
Bell GullyAs someone who doesn't work as a full-time developer, I've found the 'Mastering the SharePoint Framework' course to be essential. Microsoft's documentation covers the basics, but this course provides the additional context and practical insights I need when working with SPFx. The course has become a reliable reference that I return to when facing specific challenges. It explains the idiosyncrasies of the SharePoint Framework in a way that's accessible and saves considerable time compared to figuring things out through trial and error. For occasional developers like myself, or even regular SharePoint developers, this course offers valuable third-party perspective that bridges the gap between Microsoft's functional documentation and practical implementation.
read full testimonial collapse
James Brennan
FastTrack Manager
TrustmarqueIt's taken 3 days but I've written my first #SPFx web part in TypeScript and I even think I understand some of it. Couldn't have done it without the awesome Mastering the SharePoint Framework course by Andrew and Voitanos though. Feeling pretty chuffed right now. It's a great course and I truly believe it was well worth funding this out of my own pocket. Keep up the great work!
read full testimonial collapse
Evans E
Principal Developer, SharePoint Architect
SAICI was looking for a way to get up to speed and stay relevant in the latest SharePoint industry trends and came across Andrew's training. I had tried other online courses/resources but I always felt they were lacking and I enjoy reading and following examples in books, but nothing beats seeing a person doing examples! I have to say this course absolutely delivers what it promises and then some! With Andrew's sterling reputation in the industry with myself and colleagues I have worked with, this was simply a no-brainer. I only wish I had a resource such as this when I was a junior developer! I would recommend this course to anyone with a passion for development, an experienced professional, or a novice developer with a strong interest in SharePoint development.
read full testimonial collapse
Nathan Riles
IT Software Engineer
Huntington Ingalls IndustriesAndrew is by far THE BEST COMMUNICATOR for learning the SPFx . I learned of his courses first hand at a Microsoft tech conference and was impressed by his knowledge, yes, but how he took a very complex topic, that is hard for traditional on-premises SharePoint developers to approach, and made it feel easy. From that point on I knew I had to get him to teach my team. He came to our site and blew us away with more than just SPFX knowledge, but so much experience with how to integrate Office 365 solutions with on-premises and other cloud services. His video series is top notch and well geared to practical solution development. I took a lot of notes while he taught us on-site, though I have found that his video series has been just as useful. My whole team and organization has had our IT Transformation into the cloud and AI accelerated all thanks to Andrew. His training was worth every penny!
read full testimonial collapse
Sam Collins
Senior Consultant
Coupled TechnologyYour videos really helped me, and knowing there are office hours so I can get help is awesome! I love this course! It explains not only how to do things but why they're done that way, so you actually learn it. My code has improved in function and readability!
read full testimonial collapse
Akshay Koul
Front End React, Microsoft 365, SharePoint developer
Amazed how "in-depth" the @voitanos Mastering SPFx course is. Great job @andrewconnell #musthave!
read full testimonial collapse
Joseph Ackerman
Sr. Software Consultant
When I started working with SharePoint in 2007, Andrew Connell was one of my most trusted sources for custom development information, as well as honest opinions on the state of the software tooling and community. With the advent of the SharePoint Framework (SPFx), I very quickly came up to speed on what was then (to me) a lot of new information with the help of his Ultimate Bundle of SPFx courses at Voitanos.io. These were so effective that I was quickly the "go-to guy" for SPFx within the large team of consultants where I work.
read full testimonial collapse
Imran Abbas
Developer
Andrew's "Mastering the SharePoint Framework" course is nothing less than outstanding! Delivered with clarity, expertise, and a sincere love of teaching, it offers a masterclass on SharePoint Framework development from beginning to end. Andrew's welcoming style and thorough explanations make even the most difficult subjects interesting and approachable, regardless of your level of expertise as a developer.
read full testimonial collapse
Dan White
Manager, Technology Consulting
ProtivitiThank you for you work in educating the SharePoint community. You have been a go-to resource for me for many years. Finally looking at a real client project to build some SPFx web parts and then show the client how to build more on their own. My first step was to point them to your free resources to get them started, and then your full Mastering video course if they want to really learn this stuff. I've found nothing better than your content to explain what matters to a developer in a clear and concise manner.
read full testimonial collapse
Melissa Burton
Web Technologist
Harvard Business SchoolAndrew helps you focus on the aspects that are going to be important moving forward. The videos are short, which allows for dividing the process into smaller tasks. No goofy quizzes, thankfully. I also have learned a ton about command line coding and troubleshooting errors. The code samples are super helpful for comparing your code with a completed example. As a citizen developer with mostly CSS experience, I was intimidated by the idea of doing SharePoint development, but I am starting to feel that it could be in reach thanks to this course.
read full testimonial collapse
Joe Botelho
Microsoft 365 Developer, Web Services Manager
If you are a web developer considering diving into the Microsoft SharePoint Framework development space, then I highly recommend taking Andrew Connell’s Voitanos SharePoint Framework Development online courses. They cover all aspects of SharePoint Framework Development, progressing logically from beginner to expert levels. Andrew speaks to you clearly and directly, breaking down complex concepts into understandable chunks, such as introducing TypeScript and NodeJS, and evolving into more advanced topics like React vs Angular as a framework for SharePoint Online. As an experienced developer coming from the SharePoint Server development space, Andrew was excellent at explaining the differences and similarities between the SharePoint Server versus SharePoint Online, such as the developer sandbox environments and development toolset. Andrew speaks to you like you're a Full Stack Developer and tells you like it is, as he has not drunk the Microsoft Cool Aid, so start with Mastering the SPFx – Starter course and you will be hooked.
read full testimonial collapse
Mohammed Rehmatullah
I signed up for the SharePoint Framework course with Andrew about five years ago. This course continues to help me build scalable solutions to this day! Andrew does an amazing job explaining the nuances of SPFx very well and keeps the material fresh and updated with the new SPFx version releases. I am thankful to Andrew for how thoughtfully this course is structured and for the details he includes to carry the message across!
read full testimonial collapse
Reverend Milton Eugene Futch
Senior Consultant/Trainer
M&M ConsultantsThe detailed content from an authority who understands the nuances of self-paced learning truly stands out. The course is designed to adapt to your speed, allowing you to absorb the material thoroughly. Additionally, the availability to repeat sections ensures that you can revisit complex topics as needed, reinforcing your understanding. Even older lessons are useful because the core principles and techniques remain relevant and can be effectively applied to current practices.
read full testimonial collapse
Dimitrie Agafitei
I have followed Andrew's insights since the early days of SharePoint development. He's been an MVP for probably two decades now, and he is one of the OG voices with deep knowledge and original insights that he has shared with the community over the years. But this is something that we all know. When the SPFx came out, I needed a quick crash course to get up to speed and Andrew's "Mastering the SharePoint Framework" just delivered it. He is an outstanding presenter who easily breaks down complex concepts into understandable "bite size" pieces, with an engaging and informative style. His course samples are clear, spot-on the concept and very well organized. Andrew has answered all my questions on advanced topics. He is a great communicator, and I am looking forward to the next lightbulb moment from. Thank you, Andrew!
read full testimonial collapseDeirdre l Thompson
SharePoint Developer
The SharePoint Framework (SPFx) to Customize and Extend Microsoft 365 Apps presentation was exceptionally thorough and informative. I truly enjoyed the session and plan to review the material again to reinforce what I've learned. The class provided a deeper understanding of the SPFx framework and equipped me with practical knowledge that I can apply to my environment. Overall, this was a valuable learning experience, and I highly recommend it to anyone looking to expand their SharePoint development skills.
read full testimonial collapseEvans E
SharePoint Architect/PowerApps Developer
Andrew's course has been instrumental in deepening my understanding of the SharePoint Framework, providing clear explanations, practical insights, and real-world applications that have significantly improved my skills and confidence. I have successfully applied my knowledge to both work and personal projects, enhancing problem-solving efficiency, improving decision-making, and delivering better overall results. I'm eager to take future courses in SharePoint, Office 365, and hopefully AI, to continue expanding my expertise and staying up to date with emerging technologies.
read full testimonial collapseYour instructor
Andrew Connell
Learn the SPFx from a Microsoft MVP & SharePoint Expert
Andrew Connell is a 20+ year Microsoft MVP with unmatched experience in SharePoint development. From farm solutions to add-ins and the SPFx, if it can be done in SharePoint, Andrew's done it. He's been involved with the SharePoint Framework since its early days—even before its public release in 2017—making him one of the most trusted voices in the field.
With over 41 hours of content and 250+ lessons, Andrew brings all his hands-on experience, practical guidance, and industry insights into his SPFx courses. You'll learn the SPFx directly from a recognized leader who's been at the forefront of Microsoft 365 development for years.
Pricing
Invest in your developer career
Choose the perfect package to Master the SPFx.
Flexible options to match your learning needs.
Fundamentals Bundle
Ideal for developers looking to gain mastery over the fundamentals and level up their SPFx skills
$495 (one-time) - multiple payment plans available
- Everything in the Starter bundle
- 19+ hours of video lessons
22+ total hours - 16 chapters & 119 lessons
19 total chapters & 140 total lessons - Instructor-led demonstrations
- Lifetime access to all course material & updates
- Download code demos (refreshed to the latest SPFx release)
- Access to student-only channels in the Voitanos community on Discord
- Monthly office hours with Andrew Connell
- Upgrade to the Ultimate Bundle at any time
Ultimate Bundle
Perfect for enterprise developers who want to become the go-to SPFx expert in their organization
$995 (one-time) - multiple payment plans available
- Everything in Starter & Fundamentals
- 18+ hours of video lessons
40+ total hours - 13 chapters & 99 lessons
32 total chapters & 239 total lessons - Instructor-led demonstrations
- Lifetime access to all course material & updates
- Download code demos (refreshed to the latest SPFx release)
- Access to student-only channels in the Voitanos community on Discord
- Priority access to monthly office hours with Andrew Connell
- Access to student-only mastermind channel for Q/A & discussions with the Andrew Connell
Not Ready to Commit? Start for FREE
Starter Bundle - Free
- 3+ hours of video lessons
- 3 chapters & 21 lessons
- Setup your developer environment
- Instructor-led demonstrations
- Lifetime access to all course updates
- Access to student-only channels in the Voitanos community on Discord
- Monthly office hours with Andrew Connell
14-Day Money-Back Guarantee
All sales are final after 14 days from purchase, or once you've watched 25% or more of the course content. If you're not fully satisfied within those first 14 days and have watched less than 25%, we're happy to offer a refund—no questions asked. We're confident this course will give you the skills to master the SPFx and become a developer in demand.
FAQs
How's this course, "Mastering the SharePoint Framework", related to the course "Build Web Parts with the SharePoint Framework"?
The course, Build Web Parts with the SharePoint Framework, includes the exact same content in this course’s chapters on Web Parts & property panes found in the Fundamentals bundle.
In other words, if you’re enrolled in Mastering the SharePoint Framework’s Fundamentals or Ultimate bundle, you don’t need to enroll in Build Web Parts with the SharePoint Framework course.
How's this course, "Mastering the SharePoint Framework", related to the course "Extend the SharePoint UX with the SharePoint Framework Extensions"?
The course, Extend the SharePoint UX with the SharePoint Framework Extensions, includes the exact same content in the chapter on Extensions found in the Fundamentals bundle.
In other words, if you’re enrolled in Mastering the SharePoint Framework’s Fundamentals or Ultimate bundle, you don’t need to enroll in Extend the SharePoint UX with the SharePoint Framework Extensions course.
How's this course, "Mastering the SharePoint Framework", related to the course "Extend Viva Connections with the SharePoint Framework Adaptive Card Extensions"?
The course, Extend Viva Connections with the SharePoint Framework Adaptive Card Extensions, includes the exact same content in the chapter on Adaptive Card Extensions found in the Ultimate bundle.
In other words, if you’re enrolled in Mastering the SharePoint Framework’s Fundamentals or Ultimate bundle, you don’t need to enroll in Extend Viva Connections with the SharePoint Framework Adaptive Card Extensions course.
Can I upgrade from the Mastering the SharePoint Framework Fundamentals Bundle to Ultimate Bundle in the future?
Sure! We’re happy to upgrade your enrollment in this course to the Mastering the SharePoint Framework Ultimate bundle.
To arrange an upgrade, please contact us.
