Upgrade InjectCSS sample from SPFx v1.8.0 to v1.20.0

samples/react-application-injectcss/.gitignore

@@ -9,9 +9,11 @@ node_modules
 # Build generated files
 dist
 lib
+release
 solution
 temp
 *.sppkg
+.heft
 
 # Coverage directory used by tools like istanbul
 coverage

samples/react-application-injectcss/.npmignore

@@ -0,0 +1,16 @@
+!dist
+config
+
+gulpfile.js
+
+release
+src
+temp
+
+tsconfig.json
+tslint.json
+
+*.log
+
+.yo-rc.json
+.vscode

samples/react-application-injectcss/.nvmrc

@@ -0,0 +1 @@
+v18.20.4

samples/react-application-injectcss/.yo-rc.json

@@ -1,8 +1,13 @@
 {
  "@microsoft/generator-sharepoint": {
  "isCreatingSolution": true,
+ "nodeVersion": "18.20.4",
+ "sdksVersions": {
+ "@microsoft/microsoft-graph-client": "3.0.2",
+ "@microsoft/teams-js": "2.24.0"
+ }, 
  "environment": "spo",
- "version": "1.8.0",
+ "version": "1.20.0",
  "libraryName": "react-application-injectcss",
  "libraryId": "1a07c460-c268-4569-beff-579c18de692b",
  "packageManager": "npm",

samples/react-application-injectcss/DeployApplicationCustomizer.ps1

@@ -1,8 +1,7 @@
 # Use this file to deploy the extension to your application catalog
 $tenantUrl = "https://<your-tenant>.sharepoint.com"
 
-# Get credentials
-$credentials = Get-Credential
-Connect-PnPOnline $tenantUrl -Credentials $credentials
+# Connect to the Site
+Connect-PnPOnline $tenantUrl -Interactive -ClientId "<your-new-registered-entra-id-application-id>"
 
 Add-PnPApp -path .\sharepoint\solution\react-application-injectcss.sppkg -Publish -SkipFeatureDeployment -Overwrite

samples/react-application-injectcss/DisableApplicationCustomizer.ps1

@@ -1,8 +1,7 @@
 $tenantUrl = "https://<your-tenant>.sharepoint.com/sites/<your-site>"
 
-# Get credentials
-$credentials = Get-Credential
-Connect-PnPOnline $tenantUrl -Credentials $credentials
+# Connect to the Site
+Connect-PnPOnline $tenantUrl -Interactive -ClientId "<your-new-registered-entra-id-application-id>"
 
 # Connect to tenant
 Get-PnPCustomAction | ? Name -eq "InjectCssApplicationCustomizer" | Remove-PnPCustomAction

samples/react-application-injectcss/EnableApplicationCustomizer.ps1

@@ -2,9 +2,8 @@
 $customCSSUrl = "/Style%20Library/custom.css"
 $tenantUrl = "https://<your-tenant>.sharepoint.com/sites/<your-site>"
 
-# Get credentials
-$credentials = Get-Credential
-Connect-PnPOnline $tenantUrl -Credentials $credentials
+# Connect to the Site
+Connect-PnPOnline $tenantUrl -Interactive -ClientId "<your-new-registered-entra-id-application-id>"
 
 # Connect to tenant
 $context = Get-PnPContext

samples/react-application-injectcss/README.md

@@ -18,7 +18,7 @@ Please refrain from making drastic changes that may negatively impact your users
 
 ## Used SharePoint Framework Version
 
-![SPFx v1.8](https://img.shields.io/badge/SPFx-1.8-green.svg)
+![SPFx v1.20.0](https://img.shields.io/badge/SPFx-1.8-green.svg)
 
 ## Applies to
 
@@ -27,17 +27,19 @@ Please refrain from making drastic changes that may negatively impact your users
 
 ## Solution
 
-Solution|Author(s)
---------|---------
-react-application-injectcss|Hugo Bernier ([Tahoe Ninjas](http://tahoeninjas.blog), @bernierh)
+| Solution | Author(s) |
+| ---------------------------------- | ------------------------------------------------------------------ |
+| react-application-injectcss | Hugo Bernier ([Tahoe Ninjas](http://tahoeninjas.blog), @bernierh) |
+| react-application-injectcss@v1.3.0 | Thomas Daly (MVP, [@\_tomdaly\_](https://www.twitter.com/_tomdaly_)) |
 
 ## Version history
 
-Version|Date|Comments
--------|----|--------
-1.0.0|07 May, 2018|Initial release
-1.1.0|18 October, 2018|Updated to SPFx 1.6
-1.2.0|28 March, 2018|Updated to SPFx 1.8
+| Version | Date | Comments |
+| ------- | ---------------- | -------------------- |
+| 1.0.0 | 07 May, 2018 | Initial release |
+| 1.1.0 | 18 October, 2018 | Updated to SPFx 1.6 |
+| 1.2.0 | 28 March, 2018 | Updated to SPFx 1.8 |
+| 1.3.0 | 01 October, 2024 | Updated to SPFx 1.20 |
 
 ## Disclaimer
 
@@ -77,6 +79,8 @@ For example, the CSS provided above will make the feedback button appear as foll
 
 ### Automated deployment
 
+**NOTE** as of Sept 9th, 2024 to run the PnP PowerShell Cmdlets you must [register an Entra ID Application](https://pnp.github.io/powershell/articles/registerapplication.html) to use to run the cmdlets
+
 1. If you have not done so already, install the [PnP PowerShell Cmdlets](https://aka.ms/sppnp-powershell)
 2. Edit the `DeployApplicationCustomizer.ps1` file and change the `$tenantUrl` variable to point to your tenant.
 3. From a PowerShell console, run the `DeployApplicationCustomizer.ps1` script to automatically deploy to all sites.

samples/react-application-injectcss/assets/sample.json

@@ -9,7 +9,7 @@
  "This sample shows how to inject a custom Cascading Style Sheet (CSS) on modern pages."
  ],
  "creationDateTime": "2018-03-28",
- "updateDateTime": "2018-03-28",
+ "updateDateTime": "2024-10-05",
  "products": [
  "SharePoint"
  ],
@@ -20,7 +20,7 @@
  },
  {
  "key": "SPFX-VERSION",
- "value": "1.8"
+ "value": "1.20.0"
  }
  ],
 "tags": [],

samples/react-application-injectcss/config/deploy-azure-storage.json

@@ -1,6 +1,6 @@
 {
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
- "workingDir": "./temp/deploy/",
+ "workingDir": "./release/assets/",
  "account": "<!-- STORAGE ACCOUNT NAME -->",
  "container": "react-application-injectcss",
  "accessKey": "<!-- ACCESS KEY -->"

samples/react-application-injectcss/config/package-solution.json

@@ -3,10 +3,28 @@
  "solution": {
  "name": "react-application-injectcss-client-side-solution",
  "id": "1a07c460-c268-4569-beff-579c18de692b",
- "version": "1.2.0.0",
+ "version": "1.3.0.0",
  "includeClientSideAssets": true,
  "skipFeatureDeployment": true,
  "isDomainIsolated": false,
+ "developer": {
+ "name": "",
+ "privacyUrl": "",
+ "termsOfUseUrl": "",
+ "websiteUrl": "",
+ "mpnId": "Undefined-1.20.0"
+ },
+ "metadata": {
+ "shortDescription": {
+ "default": "react-application-injectcss description"
+ },
+ "longDescription": {
+ "default": "react-application-injectcss description"
+ },
+ "screenshotPaths": [],
+ "videoUrl": "",
+ "categories": []
+ }, 
  "features": [
  {
  "title": "Inject CSS Application Extension",

samples/react-application-injectcss/config/sass.json

@@ -0,0 +1,3 @@
+{
+ "$schema": "https://developer.microsoft.com/json-schemas/core-build/sass.schema.json"
+}

samples/react-application-injectcss/config/serve.json

@@ -1,10 +1,11 @@
 {
- "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
+ "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
  "port": 4321,
  "https": true,
+ "initialPage": "https://{tenantDomain}/_layouts/workbench.aspx",
  "serveConfigurations": {
  "default": {
- "pageUrl": "https://contoso.sharepoint.com/sites/mySite/SitePages/myPage.aspx",
+ "pageUrl": "https://{tenantDomain}/SitePages/myPage.aspx",
  "customActions": {
  "5a1fcffd-dfeb-4844-b478-1feb4325a5a7": {
  "location": "ClientSideExtension.ApplicationCustomizer",
@@ -15,7 +16,7 @@
  }
  },
  "injectCss": {
- "pageUrl": "https://contoso.sharepoint.com/sites/mySite/SitePages/myPage.aspx",
+ "pageUrl": "https://{tenantDomain}/SitePages/myPage.aspx",
  "customActions": {
  "5a1fcffd-dfeb-4844-b478-1feb4325a5a7": {
  "location": "ClientSideExtension.ApplicationCustomizer",

samples/react-application-injectcss/gulpfile.js

@@ -1,7 +1,16 @@
 'use strict';
 
-const gulp = require('gulp');
 const build = require('@microsoft/sp-build-web');
+
 build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
 
-build.initialize(gulp);
+var getTasks = build.rig.getTasks;
+build.rig.getTasks = function () {
+ var result = getTasks.call(build.rig);
+
+ result.set('serve', result.get('serve-deprecated'));
+
+ return result;
+};
+
+build.initialize(require('gulp'));