Upgrade react-application-breadcrumb to SPFx v1.20.0

samples/react-application-breadcrumb/.gitignore

@@ -0,0 +1,34 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Dependency directories
+node_modules
+
+# Build generated files
+dist
+lib
+release
+solution
+temp
+*.sppkg
+.heft
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# OSX
+.DS_Store
+
+# Visual Studio files
+.ntvs_analysis.dat
+.vs
+bin
+obj
+
+# Resx Generated Code
+*.resx.ts
+
+# Styles Generated Code
+*.scss.ts

samples/react-application-breadcrumb/.npmignore

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

samples/react-application-breadcrumb/.nvmrc

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

samples/react-application-breadcrumb/README.md

@@ -19,11 +19,11 @@ extensions:
 
 This sample shows how to create a breadcrumb element and append it to your site via the SharePoint Framework Application Customizer extension.
 
-![Breadcrumb sample](./assets/breadcrumb-sample.png)
+![1727992607183](image/README/1727992607183.png)
 
 ## Used SharePoint Framework Version
 
-![SPFx 1.11](https://img.shields.io/badge/version-1.11.0-green.svg)
+![SPFx 1.20.0](https://img.shields.io/badge/version-1.20.0-green.svg)
 
 ## Applies to
 
@@ -32,18 +32,20 @@ This sample shows how to create a breadcrumb element and append it to your site
 
 ## Solution
 
-Solution|Author(s)
---------|---------
-React-application-breadcrumb | Elio Struyf (MVP, U2U, [@eliostruyf](https://twitter.com/eliostruyf))
-React-application-breadcrumb | Swaminathan Sriram ([@SwaminathanSri3](https://twitter.com/SwaminathanSri3)) -- Upgrade to SPFx 1.11
+| Solution                            | Author(s)                                                                                         |
+| ----------------------------------- | ------------------------------------------------------------------------------------------------- |
+| React-application-breadcrumb        | Elio Struyf (MVP, U2U,[@eliostruyf](https://twitter.com/eliostruyf))                                 |
+| React-application-breadcrumb        | Swaminathan Sriram ([@SwaminathanSri3](https://twitter.com/SwaminathanSri3)) -- Upgrade to SPFx 1.11 |
+| [email protected] | Thomas Daly (MVP, [@\_tomdaly\_](https://twitter.com/_tomdaly_))                                    |
 
 ## Version history
 
-Version|Date|Comments
--------|----|--------
-2.0|October 3, 2020|Updated to SPFx v1.11
-1.1|August 31, 2017|Updates for v1.2.0
-1.0|August 9, 2017|Initial release
+| Version | Date             | Comments                                                    |
+| ------- | ---------------- | ----------------------------------------------------------- |
+| 2.1     | October 10, 2024 | Upgrade SPFx from v1.11 to v1.20.0, update to use Fluent UI |
+| 2.0     | October 3, 2020  | Updated to SPFx v1.11                                       |
+| 1.1     | August 31, 2017  | Updates for v1.2.0                                          |
+| 1.0     | August 9, 2017   | Initial release                                             |
 
 ## Disclaimer
 
@@ -57,7 +59,7 @@ Version|Date|Comments
 - Move to folder where this readme exists
 - In the command window run:
   - `npm install`
-  - `gulp serve --nobrowser` 
+  - `gulp serve --nobrowser`
 - Open your SharePoint developer site and append the provided query string parameters from the command output
 
 > If you want, you can also test bundle and package it. The necessary feature configuration has already been done.
@@ -73,8 +75,9 @@ Here's a debug URL for testing around this sample.
 ## Features
 
 This project contains SharePoint Framework extensions that illustrates next features:
+
 * Calling the SharePoint REST APIs
 * Using React components in SharePoint Framework application customizer extensions
-* Using an Office UI Fabric component to built the site breadcrumb component
+* Using Fluent UI React library to build the site breadcrumb component
 
 <img src="https://m365-visitor-stats.azurewebsites.net/sp-dev-fx-extensions/samples/react-application-breadcrumb" />

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

@@ -9,7 +9,7 @@
       "This sample shows how to create a breadcrumb element and append it to your site via the SharePoint Framework Application Customizer extension."
     ],
     "creationDateTime": "2020-10-03",
-    "updateDateTime": "2020-10-03",
+    "updateDateTime": "2024-10-05",
     "products": [
       "SharePoint"
     ],
@@ -20,7 +20,7 @@
       },
       {
         "key": "SPFX-VERSION",
-        "value": "1.11.0"
+        "value": "1.20.0"
       }
     ],
 "tags": [],
@@ -64,4 +64,4 @@
       }
     ]
   }
-]
+]

samples/react-application-breadcrumb/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": "site-breadcrumb-extension",
   "accessKey": "<!-- ACCESS KEY -->"

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

@@ -3,27 +3,39 @@
   "solution": {
     "name": "site-breadcrumb-extension-client-side-solution",
     "id": "4d6b2847-ccab-4778-9b3a-0e9ea58d88a9",
-    "version": "2.0.0.0",
+    "version": "2.1.0.0",
     "isDomainIsolated": false,
     "includeClientSideAssets": true,
+    "skipFeatureDeployment": true,
+    "developer": {
+      "name": "",
+      "websiteUrl": "",
+      "privacyUrl": "",
+      "termsOfUseUrl": "",
+      "mpnId": "Undefined-1.20.0"
+    },
+    "metadata": {
+      "shortDescription": {
+        "default": "site-breadcrumb-extension description"
+      },
+      "longDescription": {
+        "default": "site-breadcrumb-extension description"
+      },
+      "screenshotPaths": [],
+      "videoUrl": "",
+      "categories": []
+    },
     "features": [{
       "title": "SharePoint Framework Breadcrumb Extension",
       "description": "Deploys the Breadcrumb custom action to the site",
       "id": "52d8511d-f447-4b3b-b087-d82b861861a1",
-      "version": "2.0.0.0",
+      "version": "2.1.0.0",
       "assets": {
         "elementManifests": [
           "elements.xml"
         ]
       }
-    }],
-    "developer": {
-      "name": "",
-      "privacyUrl": "",
-      "termsOfUseUrl": "",
-      "websiteUrl": "",
-      "mpnId": ""
-    }
+    }]
   },
   "paths": {
     "zippedPackage": "solution/site-breadcrumb-extension.sppkg"

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

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

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

@@ -1,10 +1,26 @@
 {
-  "$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,
   "initialPage": "https://localhost:5432/workbench",
   "https": true,
-  "api": {
-    "port": 5432,
-    "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
+  "serveConfigurations": {
+    "default": {
+      "pageUrl": "https://{tenantDomain}/SitePages/myPage.aspx",
+      "customActions": {
+        "57fa430d-8154-4b00-b285-679314f4f390": {
+          "location": "ClientSideExtension.ApplicationCustomizer",
+          "properties": {}
+        }
+      }
+    },
+    "siteBreadcrumb": {
+      "pageUrl": "https://{tenantDomain}/SitePages/myPage.aspx",
+      "customActions": {
+        "57fa430d-8154-4b00-b285-679314f4f390": {
+          "location": "ClientSideExtension.ApplicationCustomizer",
+          "properties": {}
+        }
+      }
+    }
   }
 }

samples/react-application-breadcrumb/gulpfile.js

@@ -1,10 +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.`);
-require('./gulpfile-serve-info');
 
-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;
+};
 
-gulp.tasks['serve-info'].dep.push('serve');
+build.initialize(require('gulp'));