2: Steps to Create a Spfx extension application Customizer

1: Basics of Spfx Extensions

This tutorial for those who knows basics of Spfx but no worries basics will not take to too much time to understand the structure of spfx. Basics of Spfx Extensions

1: Create folder in your local drive and open Node.js command prompt run as administrator. In this tutorial Node version, I am using 10.x

2: Yeoman SharePoint Generator Command to create the solution: yo @microsoft/sharepoint

The Highlighted line I am inserting “N” because we will deploy manually just after sometime. For Api access also set “N” because currently we don’t want any 3^rd party Api access.

3: Now select Extension

4: As I described Extensions have 3 types but we are going to create Application Customizer

5: Enter name of your extension


6: Now it will take some time to create basic solution for you

7: Once project created successfully: run this command: gulp serve and copy this highlighted url.

8: Open note pad and paste the URL:

Replace highlighted url with your SharePoint online site collection URL like this: I am replacing with Root site

9: Paste this URL in browser you should get following alert message:

Hurry! finally your extension is running 

We will discuss further URL with Query string. It contains your properties like text needs to be shown on alert as a message. Because it’s an application customizer so wherever you will go or visit any page your will get this alert.

Advantage: Application Customizer will be available to all your pages just like your master page.

3: Modify Application Customizer Apply Social Media links in Modern UI Footer

Thanks Best Of Luck. If you stuck somewhere please feel free to ask in Comment. #SharingIsCaring