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

@@ -1,10 +1,9 @@
 # Change these variables to enable the extension
-$customCSSUrl = "/Style%20Library/custom.css"
+$customCSSUrl = "/SiteAssets/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)     |
+| [email protected] | 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
 
@@ -57,7 +59,7 @@ Version|Date|Comments
  }
 ```
 
-2. Upload the CSS file as `custom.css` to your `Styles Library` of the root site collection (i.e.: `https://<yourtenant>.sharepoint.com/Style%20Library/Forms/AllItems.aspx`).
+2. Upload the CSS file as `custom.css` to your `Site Assets` of the root site collection (i.e.: `https://<yourtenant>.sharepoint.com/SiteAssets/Forms/AllItems.aspx`).
 3. Navigate to your site. Your custom CSS should be applied.
 
 For example, the CSS provided above will make the feedback button appear as follows:
@@ -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.
@@ -85,7 +89,7 @@ For example, the CSS provided above will make the feedback button appear as foll
 
 ## Changing the CSS location
 
-To simplify deployment, the extension looks for a `custom.css` in your tenant's root `Style Library`. If you wish to use a different CSS name and location, use one of the following approaches:
+To simplify deployment, the extension looks for a `custom.css` in your tenant's root `Site Assets`. If you wish to use a different CSS name and location, use one of the following approaches:
 
 ### In the solution
 

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/build.cmd

@@ -0,0 +1,11 @@
+call cls
+
+call gulp clean
+
+call gulp build
+
+call gulp bundle --ship
+
+call gulp package-solution --ship
+
+call explorer .\sharepoint\solution

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'));