Added nvmrc, devcontainer

samples/react-environment-settings/.devcontainer/devcontainer.json

@@ -0,0 +1,29 @@
+{
+    "name": "SPFx 1.18.1",
+    "image": "docker.io/m365pnp/spfx:1.18.1",
+    "settings": {},
+    "extensions": [
+        "editorconfig.editorconfig",
+        "dbaeumer.vscode-eslint"
+    ],
+    "forwardPorts": [
+        4321,
+        35729
+    ],
+    "portsAttributes": {
+        "4321": {
+            "protocol": "https",
+            "label": "Manifest",
+            "onAutoForward": "silent",
+            "requireLocalPort": true
+        },
+        "35729": {
+            "protocol": "https",
+            "label": "LiveReload",
+            "onAutoForward": "silent",
+            "requireLocalPort": true
+        }
+    },
+    "postCreateCommand": "bash .devcontainer/spfx-startup.sh",
+    "remoteUser": "node"
+}

samples/react-environment-settings/.devcontainer/spfx-startup.sh

@@ -0,0 +1,33 @@
+echo
+echo -e "\e[1;94mInstalling Node dependencies\e[0m"
+npm install
+
+## commands to create dev certificate and copy it to the root folder of the project
+echo
+echo -e "\e[1;94mGenerating dev certificate\e[0m"
+gulp trust-dev-cert
+
+# Convert the generated PEM certificate to a  CER certificate
+openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer
+
+# Copy the PEM ecrtificate for non-Windows hosts
+cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem
+
+## add *.cer to .gitignore to prevent certificates from being saved in repo
+if ! grep -Fxq '*.cer' ./.gitignore
+  then
+    echo "# .CER Certificates" >> .gitignore
+    echo "*.cer" >> .gitignore
+fi
+
+## add *.pem to .gitignore to prevent certificates from being saved in repo
+if ! grep -Fxq '*.pem' ./.gitignore
+  then
+    echo "# .PEM Certificates" >> .gitignore
+    echo "*.pem" >> .gitignore
+fi
+
+echo
+echo -e "\e[1;92mReady!\e[0m"
+
+echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********"

samples/react-environment-settings/.nvmrc

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

samples/react-environment-settings/README.md

@@ -32,7 +32,7 @@ This sample is optimally compatible with the following environment configuration
 ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg)
 ![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Not%20Tested-yellow.svg)
 
-For more information about SPFx compatibility, please refer to https://aka.ms/spfx-matrix
+For more information about SPFx compatibility, please refer to <https://aka.ms/spfx-matrix>
 
 ## Applies to
 
@@ -51,7 +51,6 @@ For more information about SPFx compatibility, please refer to https://aka.ms/sp
 | ------- | ----------------- | --------------- |
 | 1.0     | November 14, 2023 | Initial release |
 
-
 ## Prerequisites
 
 Experience with SPFx web parts
@@ -68,9 +67,9 @@ Experience with SPFx web parts
 
 ## Features
 
-- Manage your tenant wide extensions
-- Easily enable/disable extensions
-- Easily update the extension properties
+* Manage your tenant wide extensions
+* Easily enable/disable extensions
+* Easily update the extension properties
 
 ## Help
 
@@ -92,4 +91,4 @@ Finally, if you have an idea for improvement, [make a suggestion](https://github
 
 **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
 
-<img src="https://m365-visitor-stats.azurewebsites.net/sp-dev-fx-webparts/samples/react-environment-settings" />
+<img src="https://m365-visitor-stats.azurewebsites.net/sp-dev-fx-webparts/samples/react-environment-settings" />