diff --git a/samples/js-msgraph-thumbnail/.devcontainer/devcontainer.json b/samples/js-msgraph-thumbnail/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/js-msgraph-thumbnail/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/js-msgraph-thumbnail/.devcontainer/spfx-startup.sh b/samples/js-msgraph-thumbnail/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/js-msgraph-thumbnail/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/js-msgraph-thumbnail/README.md b/samples/js-msgraph-thumbnail/README.md index cfc2cda54..bc3b4da85 100644 --- a/samples/js-msgraph-thumbnail/README.md +++ b/samples/js-msgraph-thumbnail/README.md @@ -33,6 +33,7 @@ The goal of the sample is to illustrate a single call calling pattern for the th ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "The solution requires access to Microsoft Graph") ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to diff --git a/samples/js-theme-manager/.devcontainer/devcontainer.json b/samples/js-theme-manager/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/js-theme-manager/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/js-theme-manager/.devcontainer/spfx-startup.sh b/samples/js-theme-manager/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/js-theme-manager/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/js-theme-manager/README.md b/samples/js-theme-manager/README.md index f5ecde471..55ccbed1a 100644 --- a/samples/js-theme-manager/README.md +++ b/samples/js-theme-manager/README.md @@ -35,6 +35,7 @@ NOTE: This is a great option to provide theme management of a Site Collection wi ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "The solution requires access to SharePoint themes") ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -64,6 +65,8 @@ Version|Date|Comments - `npm install` - `gulp serve` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Features diff --git a/samples/js-workbench-customizer/.devcontainer/devcontainer.json b/samples/js-workbench-customizer/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/js-workbench-customizer/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/js-workbench-customizer/.devcontainer/spfx-startup.sh b/samples/js-workbench-customizer/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/js-workbench-customizer/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/js-workbench-customizer/README.md b/samples/js-workbench-customizer/README.md index 0fd959058..f0ff0d526 100644 --- a/samples/js-workbench-customizer/README.md +++ b/samples/js-workbench-customizer/README.md @@ -33,6 +33,7 @@ Alternatively, you can add the output files for the web part to a custom SPFx pr ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%202016%20(Feature%20Pack%202)-Not%20compatible-red.svg) ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -67,6 +68,8 @@ Version|Date|Comments * `npm install` * `gulp serve` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Video [![Workbench customizer for improved debugging experience](./assets/video-thumbnail.jpg)](https://www.youtube.com/watch?v=u1Bnb7yn3_w "Workbench customizer for improved debugging experience") diff --git a/samples/react-accordion-dynamic-section/.devcontainer/devcontainer.json b/samples/react-accordion-dynamic-section/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-accordion-dynamic-section/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-accordion-dynamic-section/.devcontainer/spfx-startup.sh b/samples/react-accordion-dynamic-section/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-accordion-dynamic-section/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-accordion-dynamic-section/README.md b/samples/react-accordion-dynamic-section/README.md index aa8380e61..3789d2a41 100644 --- a/samples/react-accordion-dynamic-section/README.md +++ b/samples/react-accordion-dynamic-section/README.md @@ -40,6 +40,7 @@ ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "The solution requires access to a hosted SharePoint list") ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -80,6 +81,8 @@ Please create the list as described above - Use `gulp bundle --ship` & `gulp package-solution --ship` - Add the `.sppkg` to your SharePoint App Catalog +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Help We do not support samples, but we this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues. diff --git a/samples/react-accordion-section/.devcontainer/devcontainer.json b/samples/react-accordion-section/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-accordion-section/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-accordion-section/.devcontainer/spfx-startup.sh b/samples/react-accordion-section/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-accordion-section/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-accordion-section/README.md b/samples/react-accordion-section/README.md index b9a9dacdc..1321615b5 100644 --- a/samples/react-accordion-section/README.md +++ b/samples/react-accordion-section/README.md @@ -34,6 +34,7 @@ ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "The solution requires access to SharePoint content") ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -77,6 +78,8 @@ Version|Date|Comments - Use `gulp bundle --ship` & `gulp package-solution --ship` - Add the `.sppkg` to your SharePoint App Catalog +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Video [![Building an accessible Accordion web part](./assets/video-thumbnail.jpg)](https://www.youtube.com/watch?v=-oKhmh-g3z8 "Building an accessible Accordion web part") diff --git a/samples/react-accordion/.devcontainer/devcontainer.json b/samples/react-accordion/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-accordion/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-accordion/.devcontainer/spfx-startup.sh b/samples/react-accordion/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-accordion/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-accordion/.gitignore b/samples/react-accordion/.gitignore index b19bbe123..a17f3f582 100644 --- a/samples/react-accordion/.gitignore +++ b/samples/react-accordion/.gitignore @@ -30,3 +30,7 @@ obj # Styles Generated Code *.scss.ts +# .CER Certificates +*.cer +# .PEM Certificates +*.pem diff --git a/samples/react-accordion/README.md b/samples/react-accordion/README.md index 2ee515957..fb4d964be 100644 --- a/samples/react-accordion/README.md +++ b/samples/react-accordion/README.md @@ -31,6 +31,7 @@ This is a sample web Part that illustrates the use of React Accessible Accordion ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -58,6 +59,8 @@ Version|Date|Comments ### Build and Test +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + 1. Clone this repo 2. In the command line run - `npm i` diff --git a/samples/react-adaptive-cards-image-gallery/.devcontainer/devcontainer.json b/samples/react-adaptive-cards-image-gallery/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-adaptive-cards-image-gallery/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-adaptive-cards-image-gallery/.devcontainer/spfx-startup.sh b/samples/react-adaptive-cards-image-gallery/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-adaptive-cards-image-gallery/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-adaptive-cards-image-gallery/README.md b/samples/react-adaptive-cards-image-gallery/README.md index 09fde1799..104131d07 100644 --- a/samples/react-adaptive-cards-image-gallery/README.md +++ b/samples/react-adaptive-cards-image-gallery/README.md @@ -52,6 +52,7 @@ Below NPM packages are used to develop this sample. ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -89,6 +90,8 @@ Version|Date|Comments - [Install the client-side solution](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page#install-the-client-side-solution-on-your-site) to your SharePoint site. - [Add web part to your SharePoint page](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page#add-the-helloworld-web-part-to-modern-page) named "Adaptive Cards Image Gallery". +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Features This sample web part shows how adaptive cards can be used effectively with SharePoint Framework to render an image gallery with data stored in a SharePoint list. diff --git a/samples/react-appinsights-dashboard/.devcontainer/devcontainer.json b/samples/react-appinsights-dashboard/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-appinsights-dashboard/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-appinsights-dashboard/.devcontainer/spfx-startup.sh b/samples/react-appinsights-dashboard/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-appinsights-dashboard/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-appinsights-dashboard/README.md b/samples/react-appinsights-dashboard/README.md index 483c684fe..4165f25b4 100644 --- a/samples/react-appinsights-dashboard/README.md +++ b/samples/react-appinsights-dashboard/README.md @@ -29,6 +29,7 @@ This web part displays different statistics data captured in the **Azure Applica ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "Requires API access") ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Pre-requisites @@ -92,6 +93,8 @@ Version|Date|Comments - `npm install` - `gulp bundle --ship && gulp package-solution --ship` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + #### Local Mode This solution doesn't work on local mode. diff --git a/samples/react-async-await-sp-pnp-js/.devcontainer/devcontainer.json b/samples/react-async-await-sp-pnp-js/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-async-await-sp-pnp-js/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-async-await-sp-pnp-js/.devcontainer/spfx-startup.sh b/samples/react-async-await-sp-pnp-js/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-async-await-sp-pnp-js/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-async-await-sp-pnp-js/README.md b/samples/react-async-await-sp-pnp-js/README.md index 49d4a0ef9..9dc82380d 100644 --- a/samples/react-async-await-sp-pnp-js/README.md +++ b/samples/react-async-await-sp-pnp-js/README.md @@ -31,6 +31,7 @@ This web part demonstrates how to use [PnPJS](https://pnp.github.io/pnpjs/) with ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -61,6 +62,8 @@ Version|Date|Comments - `$ gulp trust-dev-cert` - `$ gulp serve ` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ### Local Mode A browser in local mode (localhost) will be opened. diff --git a/samples/react-bot-framework/.devcontainer/devcontainer.json b/samples/react-bot-framework/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-bot-framework/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-bot-framework/.devcontainer/spfx-startup.sh b/samples/react-bot-framework/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-bot-framework/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-bot-framework/README.md b/samples/react-bot-framework/README.md index a8b7b0687..b4e664655 100644 --- a/samples/react-bot-framework/README.md +++ b/samples/react-bot-framework/README.md @@ -36,6 +36,7 @@ where sample was demonstrated. ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "The solution requires access to the Microsoft Bot Framework Directline API") ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -86,6 +87,8 @@ Version|Date|Comments - `npm install` - `gulp serve` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + - Register your bot in the Microsoft Bot Framework Portal, configure the DirectLine channel on the bot and obtain your DirectLine secret. ## Features diff --git a/samples/react-calendar-feed/.devcontainer/devcontainer.json b/samples/react-calendar-feed/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-calendar-feed/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-calendar-feed/.devcontainer/spfx-startup.sh b/samples/react-calendar-feed/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-calendar-feed/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-calendar-feed/README.md b/samples/react-calendar-feed/README.md index 1dbe5f9de..589debfc0 100644 --- a/samples/react-calendar-feed/README.md +++ b/samples/react-calendar-feed/README.md @@ -32,6 +32,7 @@ For more information about how this solution was built, including some design de ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Partially](https://img.shields.io/badge/Local%20Workbench-Partially-yellow.svg "Some functionality may not work on local workbech") ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -86,6 +87,8 @@ Version|Date|Comments - If desired, specify how long (in minutes) you want to expire your users' local storage and refresh the events. - Exclude IE11 support with gulp parameter ```--NoIE11``` this is in-case-sensitive +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Features This Web Part illustrates the following concepts on top of the SharePoint Framework: diff --git a/samples/react-check-user-group/.devcontainer/devcontainer.json b/samples/react-check-user-group/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-check-user-group/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-check-user-group/.devcontainer/spfx-startup.sh b/samples/react-check-user-group/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-check-user-group/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-check-user-group/README.md b/samples/react-check-user-group/README.md index 4f1a92b03..2aae367b2 100644 --- a/samples/react-check-user-group/README.md +++ b/samples/react-check-user-group/README.md @@ -15,6 +15,7 @@ This web part finds all the Office 365 or AAD Security groups a user is a member ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "The solution requires access to Microsoft Graph") ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Features @@ -43,6 +44,8 @@ react-check-user-group | [Aakash Bhardwaj](https://twitter.com/aakash_316) * Go to the API Management section in the new SharePoint Admin Center (*https://{tenantname}-admin.sharepoint.com/_layouts/15/online/AdminHome.aspx#/webApiPermissionManagement*) * Approve the permission request for Directory.Read.All to Microsoft Graph +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Help diff --git a/samples/react-covid19-info/.devcontainer/devcontainer.json b/samples/react-covid19-info/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-covid19-info/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-covid19-info/.devcontainer/spfx-startup.sh b/samples/react-covid19-info/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-covid19-info/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-covid19-info/README.md b/samples/react-covid19-info/README.md index 443260912..c714a3ead 100644 --- a/samples/react-covid19-info/README.md +++ b/samples/react-covid19-info/README.md @@ -20,6 +20,7 @@ The following info is displayed: ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -60,6 +61,8 @@ Version|Date|Comments * `npm install` * `gulp serve` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Features diff --git a/samples/react-css-in-js-typestyle/.devcontainer/devcontainer.json b/samples/react-css-in-js-typestyle/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-css-in-js-typestyle/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-css-in-js-typestyle/.devcontainer/spfx-startup.sh b/samples/react-css-in-js-typestyle/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-css-in-js-typestyle/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-css-in-js-typestyle/README.md b/samples/react-css-in-js-typestyle/README.md index 7c27d4a49..f390b7865 100644 --- a/samples/react-css-in-js-typestyle/README.md +++ b/samples/react-css-in-js-typestyle/README.md @@ -15,6 +15,7 @@ The web part demonstrates the usage of "CSS in JS" pattern with SharePoint Frame ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -45,6 +46,8 @@ Version|Date|Comments * add the web part to your tenant app store * add the app to a SharePoint site and then add the web part to the page +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Features diff --git a/samples/react-daterangepicker/.devcontainer/devcontainer.json b/samples/react-daterangepicker/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-daterangepicker/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-daterangepicker/.devcontainer/spfx-startup.sh b/samples/react-daterangepicker/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-daterangepicker/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-daterangepicker/README.md b/samples/react-daterangepicker/README.md index 6b1504373..b0a0b031e 100644 --- a/samples/react-daterangepicker/README.md +++ b/samples/react-daterangepicker/README.md @@ -16,6 +16,7 @@ This web part used the date range picker in the SharePoint Framework (SPFx) web ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -42,6 +43,8 @@ Version|Date|Comments * `npm install` * `gulp serve` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + #### Local Mode This solution can work on local mode. diff --git a/samples/react-dev-radar/.devcontainer/devcontainer.json b/samples/react-dev-radar/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-dev-radar/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-dev-radar/.devcontainer/spfx-startup.sh b/samples/react-dev-radar/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-dev-radar/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-dev-radar/README.md b/samples/react-dev-radar/README.md index 2bcfd828c..897ad01a1 100644 --- a/samples/react-dev-radar/README.md +++ b/samples/react-dev-radar/README.md @@ -17,6 +17,7 @@ One way to find devs from the same stack near you. ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -59,6 +60,8 @@ Version|Date|Comments - `gulp package-solution --ship` - Add to AppCatalog and deploy +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Help diff --git a/samples/react-doccard-faq/.devcontainer/devcontainer.json b/samples/react-doccard-faq/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-doccard-faq/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-doccard-faq/.devcontainer/spfx-startup.sh b/samples/react-doccard-faq/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-doccard-faq/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-doccard-faq/README.md b/samples/react-doccard-faq/README.md index 71fcf2375..c0b856c0f 100644 --- a/samples/react-doccard-faq/README.md +++ b/samples/react-doccard-faq/README.md @@ -18,6 +18,7 @@ For detailed instructions on how to build this web part and the needed list plea ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "Requires access to Microsoft Graph") ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -55,6 +56,8 @@ Version|Date|Comments * `npm install` * `gulp serve` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Features DefaultButton, diff --git a/samples/react-documents-detailslist/.devcontainer/devcontainer.json b/samples/react-documents-detailslist/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-documents-detailslist/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-documents-detailslist/.devcontainer/spfx-startup.sh b/samples/react-documents-detailslist/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-documents-detailslist/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-documents-detailslist/README.md b/samples/react-documents-detailslist/README.md index ebc5b6b99..dc2f4a278 100644 --- a/samples/react-documents-detailslist/README.md +++ b/samples/react-documents-detailslist/README.md @@ -29,6 +29,7 @@ This sample shows how to build web parts that display documents in accordance wi ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -61,6 +62,8 @@ Version|Date|Comments - `npm install` - `gulp serve` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Features This Web Part illustrates the following concepts on top of the SharePoint Framework: diff --git a/samples/react-dynamics-crm-api/.devcontainer/devcontainer.json b/samples/react-dynamics-crm-api/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-dynamics-crm-api/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-dynamics-crm-api/.devcontainer/spfx-startup.sh b/samples/react-dynamics-crm-api/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-dynamics-crm-api/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-dynamics-crm-api/README.md b/samples/react-dynamics-crm-api/README.md index db1cbae09..9f17635b6 100644 --- a/samples/react-dynamics-crm-api/README.md +++ b/samples/react-dynamics-crm-api/README.md @@ -14,6 +14,7 @@ This sample shows how to consume Dynamics CRM API using AadTokenProvider class. ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "Requires access to Dynamics 365") ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -39,6 +40,8 @@ Version|Date|Comments * `npm install` * `gulp serve` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ### Configuration * Login to Azure Portal. diff --git a/samples/react-enhanced-list-formatting/.devcontainer/devcontainer.json b/samples/react-enhanced-list-formatting/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-enhanced-list-formatting/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-enhanced-list-formatting/.devcontainer/spfx-startup.sh b/samples/react-enhanced-list-formatting/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-enhanced-list-formatting/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-enhanced-list-formatting/README.md b/samples/react-enhanced-list-formatting/README.md index 0ff9760a7..d328c0080 100644 --- a/samples/react-enhanced-list-formatting/README.md +++ b/samples/react-enhanced-list-formatting/README.md @@ -30,6 +30,7 @@ This web part allows you to add custom CSS on a page to enhance list formatting. ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Partially](https://img.shields.io/badge/Local%20Workbench-Partially-yellow.svg "Functionality may be limited") ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -61,6 +62,8 @@ Version|Date|Comments * `npm install` * `gulp serve` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Features This web part demonstrates how to use a custom property pane control to allow users to inject custom CSS into the page at runtime. diff --git a/samples/react-events-dynamicdata/.devcontainer/devcontainer.json b/samples/react-events-dynamicdata/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-events-dynamicdata/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-events-dynamicdata/.devcontainer/spfx-startup.sh b/samples/react-events-dynamicdata/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-events-dynamicdata/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-events-dynamicdata/README.md b/samples/react-events-dynamicdata/README.md index 363aca787..f24b68df7 100644 --- a/samples/react-events-dynamicdata/README.md +++ b/samples/react-events-dynamicdata/README.md @@ -13,6 +13,7 @@ Sample web parts illustrating using the SharePoint Framework Dynamic data capabi ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "Requires access to Dynamics 365") ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -57,6 +58,8 @@ Version|Date|Comments * as _Address_, choose the _address_ option * as _City_, choose the _city_ option +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Features This sample contains a set of SharePoint Framework client-side web parts that illustrate the Dynamic data capability. diff --git a/samples/react-functional-servicescope-hooks/.devcontainer/devcontainer.json b/samples/react-functional-servicescope-hooks/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-functional-servicescope-hooks/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-functional-servicescope-hooks/.devcontainer/spfx-startup.sh b/samples/react-functional-servicescope-hooks/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-functional-servicescope-hooks/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-functional-servicescope-hooks/README.md b/samples/react-functional-servicescope-hooks/README.md index d162e3ff3..40e43a1fe 100644 --- a/samples/react-functional-servicescope-hooks/README.md +++ b/samples/react-functional-servicescope-hooks/README.md @@ -15,6 +15,7 @@ This web part is designed to help developers understand how to use the Context A ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "Requires access to the context API") ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -49,6 +50,8 @@ Version|Date|Comments * Navigate to remote workbench `https://tenant.sharepoint.com/_layouts/15/workbench.aspx` * Add `HelloWorld` web part to the workbench +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Features This sample demonstrates how diff --git a/samples/react-global-news/.devcontainer/devcontainer.json b/samples/react-global-news/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-global-news/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-global-news/.devcontainer/spfx-startup.sh b/samples/react-global-news/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-global-news/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-global-news/README.md b/samples/react-global-news/README.md index 576e546dc..85dda9451 100644 --- a/samples/react-global-news/README.md +++ b/samples/react-global-news/README.md @@ -40,6 +40,7 @@ Please go to https://newsapi.org to get more information. ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg ) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -72,6 +73,8 @@ Version|Date|Comments * `npm install` * `gulp serve` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + > Include any additional steps as needed. ## Features diff --git a/samples/react-graph-calendar/.devcontainer/devcontainer.json b/samples/react-graph-calendar/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-graph-calendar/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-graph-calendar/.devcontainer/spfx-startup.sh b/samples/react-graph-calendar/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-graph-calendar/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-graph-calendar/README.md b/samples/react-graph-calendar/README.md index 357b50945..229eeb017 100644 --- a/samples/react-graph-calendar/README.md +++ b/samples/react-graph-calendar/README.md @@ -25,6 +25,7 @@ Web part is developed using below technologies ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "Requires access to Microsoft Graph") ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -66,6 +67,8 @@ Version|Date|Comments - Add to AppCatalog and deploy - Sync to Teams +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Video diff --git a/samples/react-graph-feedback-form/.devcontainer/devcontainer.json b/samples/react-graph-feedback-form/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-graph-feedback-form/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-graph-feedback-form/.devcontainer/spfx-startup.sh b/samples/react-graph-feedback-form/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-graph-feedback-form/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-graph-feedback-form/README.md b/samples/react-graph-feedback-form/README.md index 298ba3dca..508ab13a6 100644 --- a/samples/react-graph-feedback-form/README.md +++ b/samples/react-graph-feedback-form/README.md @@ -15,6 +15,7 @@ Sample SPFx React web part which allows sending emails using Microsoft Graph. ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "Requires access to Microsoft Graph") ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -46,6 +47,8 @@ Version|Date|Comments * approve the API permission request to access e-mails using Microsoft Graph * add the web part to a page +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Features This sample illustrates the following concepts: diff --git a/samples/react-ioc-tests/.devcontainer/devcontainer.json b/samples/react-ioc-tests/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-ioc-tests/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-ioc-tests/.devcontainer/spfx-startup.sh b/samples/react-ioc-tests/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-ioc-tests/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-ioc-tests/README.md b/samples/react-ioc-tests/README.md index f53c85ade..70334a584 100644 --- a/samples/react-ioc-tests/README.md +++ b/samples/react-ioc-tests/README.md @@ -25,6 +25,7 @@ The example also includes a pipeline definition .yaml file for Azure DevOps CI b ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -53,6 +54,8 @@ Version|Date|Comments - *`npm test`* - `gulp serve` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Features This web part is provided as an example of implementing an IoC (Inversion of Control) pattern in the context of a SharePoint Framework web part for maximising testability. This Web Part illustrates the following concepts on top of the SharePoint Framework: diff --git a/samples/react-list-form/.devcontainer/devcontainer.json b/samples/react-list-form/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-list-form/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-list-form/.devcontainer/spfx-startup.sh b/samples/react-list-form/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-list-form/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-list-form/README.md b/samples/react-list-form/README.md index dbbea54a3..36e341900 100755 --- a/samples/react-list-form/README.md +++ b/samples/react-list-form/README.md @@ -33,6 +33,7 @@ The web part allows configuring which list to use and if a form for adding a new ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "Requires access to SharePoint content") ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -78,6 +79,8 @@ You'll need to connect to a list before you can use this sample. - `npm install` - `gulp serve` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Features This Web Part illustrates the following concepts on top of the SharePoint Framework: diff --git a/samples/react-manage-profile-card-properties/.devcontainer/devcontainer.json b/samples/react-manage-profile-card-properties/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-manage-profile-card-properties/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-manage-profile-card-properties/.devcontainer/spfx-startup.sh b/samples/react-manage-profile-card-properties/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-manage-profile-card-properties/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-manage-profile-card-properties/README.md b/samples/react-manage-profile-card-properties/README.md index eef45b3c9..cf0246f4d 100644 --- a/samples/react-manage-profile-card-properties/README.md +++ b/samples/react-manage-profile-card-properties/README.md @@ -30,6 +30,7 @@ Only users with Tenant Admin Role are allowed to managed profile card properties ![Teams Incompatible](https://img.shields.io/badge/Teams-Incompatible-lightgrey.svg) ![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "This solution requires access to Microsoft Graph API") ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -70,6 +71,8 @@ Version|Date|Comments - Add to AppCatalog and deploy - Approve the required permissions (`User.ReadWrite`, `Directory.AccessAsUser.All`) on SharePoint Admin in App permissions +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + > **NOTE:** This web part does not work in the local workbench diff --git a/samples/react-manage-spfx-solutions-alm/.devcontainer/devcontainer.json b/samples/react-manage-spfx-solutions-alm/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-manage-spfx-solutions-alm/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-manage-spfx-solutions-alm/.devcontainer/spfx-startup.sh b/samples/react-manage-spfx-solutions-alm/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-manage-spfx-solutions-alm/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-manage-spfx-solutions-alm/README.md b/samples/react-manage-spfx-solutions-alm/README.md index 329a5489a..e27322331 100644 --- a/samples/react-manage-spfx-solutions-alm/README.md +++ b/samples/react-manage-spfx-solutions-alm/README.md @@ -25,6 +25,7 @@ This web part is mainly build for tenant and SharePoint admins, since most of th ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Minimal Path to Awesome @@ -35,6 +36,8 @@ This web part is mainly build for tenant and SharePoint admins, since most of th - Add to Site Collection App Catalog or Tenant AppCatalog and Install the App - Add the web part to any page in the Site Collection +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Solution Solution|Author(s) diff --git a/samples/react-minesweeper/.devcontainer/devcontainer.json b/samples/react-minesweeper/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-minesweeper/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-minesweeper/.devcontainer/spfx-startup.sh b/samples/react-minesweeper/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-minesweeper/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-minesweeper/README.md b/samples/react-minesweeper/README.md index 9dda5bb7d..759f8d864 100644 --- a/samples/react-minesweeper/README.md +++ b/samples/react-minesweeper/README.md @@ -16,6 +16,7 @@ This web part is the classic game Minesweeper, put in a Fluent UI powered SPFx w ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -46,6 +47,8 @@ Version|Date|Comments * `npm install` * `gulp serve` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Features * Difficulties: Beginner, Intermediate, Expert diff --git a/samples/react-modern-charts/.devcontainer/devcontainer.json b/samples/react-modern-charts/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-modern-charts/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-modern-charts/.devcontainer/spfx-startup.sh b/samples/react-modern-charts/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-modern-charts/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-modern-charts/README.md b/samples/react-modern-charts/README.md index 7f8b205be..a2282712f 100644 --- a/samples/react-modern-charts/README.md +++ b/samples/react-modern-charts/README.md @@ -52,6 +52,7 @@ Current Data Functions: ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -87,6 +88,8 @@ Version|Date|Comments - `gulp serve` - if deploying to Office 365, update the CDN path in write-manifests.json +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Features Sample Web Parts in this solution illustrate the following concepts on top of the SharePoint Framework: diff --git a/samples/react-modern-organization-chart/.devcontainer/devcontainer.json b/samples/react-modern-organization-chart/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-modern-organization-chart/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-modern-organization-chart/.devcontainer/spfx-startup.sh b/samples/react-modern-organization-chart/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-modern-organization-chart/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-modern-organization-chart/README.md b/samples/react-modern-organization-chart/README.md index 2194298e4..c4ba302a6 100644 --- a/samples/react-modern-organization-chart/README.md +++ b/samples/react-modern-organization-chart/README.md @@ -44,6 +44,7 @@ Refresh Status Interval in minutes | number| no | default value 5 min ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "Requires access to the current user's context") ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -79,6 +80,8 @@ This web part use Microsoft Graph API to get presence of users, and need to have - Add Package to AppCatalog - On the API Management Approve Permission `presence.read.all` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Help diff --git a/samples/react-multimedia-gallery/.devcontainer/devcontainer.json b/samples/react-multimedia-gallery/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-multimedia-gallery/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-multimedia-gallery/.devcontainer/spfx-startup.sh b/samples/react-multimedia-gallery/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-multimedia-gallery/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-multimedia-gallery/README.md b/samples/react-multimedia-gallery/README.md index ad1f14f45..2c5e3c09f 100644 --- a/samples/react-multimedia-gallery/README.md +++ b/samples/react-multimedia-gallery/README.md @@ -35,6 +35,7 @@ It uses Microsoft Graph API to get thumbnails and image/video url and use PnPjs ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "Requires access to the Microsoft Graph") ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -77,6 +78,8 @@ The web part Use PnPjs library, Microsoft Graph API, Office-ui-fabric-react comp - `gulp package-solution --ship` - Add to AppCatalog and deploy +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Help diff --git a/samples/react-my-groups/.devcontainer/devcontainer.json b/samples/react-my-groups/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-my-groups/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-my-groups/.devcontainer/spfx-startup.sh b/samples/react-my-groups/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-my-groups/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-my-groups/README.md b/samples/react-my-groups/README.md index 7e6c2b66d..b5c986a9c 100644 --- a/samples/react-my-groups/README.md +++ b/samples/react-my-groups/README.md @@ -38,6 +38,7 @@ You can change between the grid and compact layout through the settings in the p ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "Requires access to the Microsoft Graph") ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -70,6 +71,8 @@ Version|Date|Comments * Approve the Graph API permissions in the SharePoint admin center * Add the web part to your page +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Features diff --git a/samples/react-my-personal-apps/.devcontainer/devcontainer.json b/samples/react-my-personal-apps/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-my-personal-apps/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-my-personal-apps/.devcontainer/spfx-startup.sh b/samples/react-my-personal-apps/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-my-personal-apps/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-my-personal-apps/README.md b/samples/react-my-personal-apps/README.md index eb43c2ef3..10de4b90c 100644 --- a/samples/react-my-personal-apps/README.md +++ b/samples/react-my-personal-apps/README.md @@ -58,6 +58,7 @@ This Web Part uses MSgraph Open Extension to save the personal information on us ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "Requires access to the Microsoft Graph") ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -82,6 +83,8 @@ Version|Date|Comments Please follow all the steps: +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + - Clone this repository - in the command line run: - `npm install` diff --git a/samples/react-outlook-add-todo-task/.devcontainer/devcontainer.json b/samples/react-outlook-add-todo-task/.devcontainer/devcontainer.json new file mode 100644 index 000000000..1cd7cc0a3 --- /dev/null +++ b/samples/react-outlook-add-todo-task/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0-plusbeta", + "image": "docker.io/m365pnp/spfx:1.10.0-plusbeta", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-outlook-add-todo-task/.devcontainer/spfx-startup.sh b/samples/react-outlook-add-todo-task/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-outlook-add-todo-task/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-outlook-add-todo-task/README.md b/samples/react-outlook-add-todo-task/README.md index c1154133f..311398bc2 100644 --- a/samples/react-outlook-add-todo-task/README.md +++ b/samples/react-outlook-add-todo-task/README.md @@ -18,12 +18,16 @@ GET https://graph.microsoft.com/beta/me/todo/lists POST https://graph.microsoft.com/beta/me/todo/lists -```json +``` + +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions.json { displayName: "My new List" } ``` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ### Get tasks in list GET https://graph.microsoft.com/beta/me/todo/lists/{listId}/tasks @@ -32,7 +36,9 @@ GET https://graph.microsoft.com/beta/me/todo/lists/{listId}/tasks POST https://graph.microsoft.com/beta/me/todo/lists/{listId}/tasks -```json +``` + +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions.json { "importance": "high", "status": "notStarted", @@ -44,6 +50,8 @@ POST https://graph.microsoft.com/beta/me/todo/lists/{listId}/tasks } ``` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Compatibility ![SPFx 1.10](https://img.shields.io/badge/SPFx-1.10.0-green.svg) @@ -53,6 +61,7 @@ POST https://graph.microsoft.com/beta/me/todo/lists/{listId}/tasks ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "Requires access to the Microsoft Graph") ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Solution @@ -78,10 +87,14 @@ Version|Date|Comments * `gulp package-solution --ship` * deploy package to SharePoint App Catalog (check tenant deploy) * Using [M365 CLI](https://pnp.github.io/cli-microsoft365/) to configure MS Graph permissions to allow creating ToDo tasks -```ps +``` + +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions.ps m365 spo serviceprincipal grant add --resource "Microsoft Graph" --scope "Tasks.ReadWrite" ``` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + * deploy spfx solution as Outlook add-in following instructions here: [https://docs.microsoft.com/en-us/sharepoint/dev/spfx/office-addins-create#deployment-of-your-add-in](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/office-addins-create#deployment-of-your-add-in) ## Features diff --git a/samples/react-outlook-copy2teams/.devcontainer/devcontainer.json b/samples/react-outlook-copy2teams/.devcontainer/devcontainer.json new file mode 100644 index 000000000..1cd7cc0a3 --- /dev/null +++ b/samples/react-outlook-copy2teams/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0-plusbeta", + "image": "docker.io/m365pnp/spfx:1.10.0-plusbeta", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-outlook-copy2teams/.devcontainer/spfx-startup.sh b/samples/react-outlook-copy2teams/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-outlook-copy2teams/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-outlook-copy2teams/README.md b/samples/react-outlook-copy2teams/README.md index 6955d7828..b6f410a64 100644 --- a/samples/react-outlook-copy2teams/README.md +++ b/samples/react-outlook-copy2teams/README.md @@ -23,6 +23,7 @@ A detailed functionality and technical description can be found in the [author's ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -61,6 +62,8 @@ Version|Date|Comments * Close the add-in window by clicking **X** on the top-right corner * Activate again the context menu from **...** and choose **Copy to SharePoint** to activate the add-in in your inbox +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Features This Outlook Add-In shows the following capabilities on top of the SharePoint Framework: diff --git a/samples/react-pages-hierarchy/.devcontainer/devcontainer.json b/samples/react-pages-hierarchy/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-pages-hierarchy/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-pages-hierarchy/.devcontainer/spfx-startup.sh b/samples/react-pages-hierarchy/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-pages-hierarchy/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-pages-hierarchy/README.md b/samples/react-pages-hierarchy/README.md index 36267337d..802853484 100644 --- a/samples/react-pages-hierarchy/README.md +++ b/samples/react-pages-hierarchy/README.md @@ -31,6 +31,7 @@ This web part allows users to create a faux page hierarchy in their pages librar ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "Requires access to the page structure") ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -62,6 +63,8 @@ Version|Date|Comments * `npm install` * `gulp serve` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Features This web part isn't anything fancy but it's useful for some scenarios. diff --git a/samples/react-pnp-controls-list-view-fields/.devcontainer/devcontainer.json b/samples/react-pnp-controls-list-view-fields/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-pnp-controls-list-view-fields/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-pnp-controls-list-view-fields/.devcontainer/spfx-startup.sh b/samples/react-pnp-controls-list-view-fields/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-pnp-controls-list-view-fields/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-pnp-controls-list-view-fields/README.md b/samples/react-pnp-controls-list-view-fields/README.md index 5691c2347..4cc84110d 100644 --- a/samples/react-pnp-controls-list-view-fields/README.md +++ b/samples/react-pnp-controls-list-view-fields/README.md @@ -13,6 +13,7 @@ Sample web part to display PnP [`ListView`](https://sharepoint.github.io/sp-dev- ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "Requires access to SharePoint lists") ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -56,6 +57,8 @@ Version|Date|Comments * edit a page * add _PnP ListView_ web part to the page +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Features This sample demonstrates how to combine different parts of PnP Reusable React controls to create rich solutions. It also partially answers the question from [Issue 493](https://github.com/pnp/sp-dev-fx-controls-react/issues/493) in PnP Reusable Controls repo. diff --git a/samples/react-private-libraries/.devcontainer/devcontainer.json b/samples/react-private-libraries/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-private-libraries/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-private-libraries/.devcontainer/spfx-startup.sh b/samples/react-private-libraries/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-private-libraries/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-private-libraries/README.md b/samples/react-private-libraries/README.md index 057a63cfd..7fe593baf 100644 --- a/samples/react-private-libraries/README.md +++ b/samples/react-private-libraries/README.md @@ -27,6 +27,7 @@ The application manages all the security groups set up for the various libraries ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "Requires access to Microsoft Graph") ![Hosted Workbench Compatible (with API permissions)](https://img.shields.io/badge/Hosted%20Workbench-Compatible%20(with%20API%20permissions)-yellow.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -53,6 +54,8 @@ Version|Date|Comments Build this solution and add it to your app catalog (tenant or site). +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + Create a new Team Site (Without and Office 365 Group) or Communications site. The site must be configured to allow sharing with any external parties you want to invite to the site. Install this solution on the site diff --git a/samples/react-project-online/.devcontainer/devcontainer.json b/samples/react-project-online/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-project-online/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-project-online/.devcontainer/spfx-startup.sh b/samples/react-project-online/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-project-online/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-project-online/README.md b/samples/react-project-online/README.md index 8efa8b8f1..e0f98f1ca 100644 --- a/samples/react-project-online/README.md +++ b/samples/react-project-online/README.md @@ -33,6 +33,7 @@ The web part is currently returning project tasks as a simple proof of concept. ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "Requires access to Project Web Access") ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -70,6 +71,8 @@ Version|Date|Comments - `npm install` - `gulp serve` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Features This Web Part illustrates the following concepts on top of the SharePoint Framework: diff --git a/samples/react-script-editor/.devcontainer/devcontainer.json b/samples/react-script-editor/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-script-editor/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-script-editor/.devcontainer/spfx-startup.sh b/samples/react-script-editor/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-script-editor/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-script-editor/README.md b/samples/react-script-editor/README.md index 261b0a1b1..c209d6252 100644 --- a/samples/react-script-editor/README.md +++ b/samples/react-script-editor/README.md @@ -156,6 +156,7 @@ In order to make it available to absolutely all sites you need apply the _Deploy ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to diff --git a/samples/react-spupsproperty-sync/.devcontainer/devcontainer.json b/samples/react-spupsproperty-sync/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-spupsproperty-sync/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-spupsproperty-sync/.devcontainer/spfx-startup.sh b/samples/react-spupsproperty-sync/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-spupsproperty-sync/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-spupsproperty-sync/README.md b/samples/react-spupsproperty-sync/README.md index d80fc697a..59ad955f3 100644 --- a/samples/react-spupsproperty-sync/README.md +++ b/samples/react-spupsproperty-sync/README.md @@ -62,6 +62,7 @@ This component will help the administrators who are currently maintaining the us ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "Requires access to user properties") ![Hosted Workbench Compatible (with API permissions)](https://img.shields.io/badge/Hosted%20Workbench-Compatible%20(with%20API%20permissions)-yellow.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -91,6 +92,8 @@ Version|Date|Comments - Add the .sppkg file to the app catalog and add the **Page Comments** web part to the page. - **Azure Function** has to be setup for property update. **The actual powershell is uploaded in the assets folder**. Follow the steps explained in the below video by [Paolo Pialorsi](https://www.youtube.com/watch?v=plS_1BsQAto&list=PL-KKED6SsFo8TxDgQmvMO308p51AO1zln&index=2&t=0s). +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + #### Local Mode This solution doesn't work on local mode. diff --git a/samples/react-teams-message/.devcontainer/devcontainer.json b/samples/react-teams-message/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-teams-message/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-teams-message/.devcontainer/spfx-startup.sh b/samples/react-teams-message/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-teams-message/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-teams-message/README.md b/samples/react-teams-message/README.md index 8e4f1122e..d43b00c7f 100644 --- a/samples/react-teams-message/README.md +++ b/samples/react-teams-message/README.md @@ -53,6 +53,7 @@ Configurable Web part Properties ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "Requires access to Microsoft Graph") ![Hosted Workbench Compatible (with API permissions)](https://img.shields.io/badge/Hosted%20Workbench-Compatible%20(with%20API%20permissions)-yellow.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -115,6 +116,8 @@ Version|Date|Comments * `npm install` * `gulp serve` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Video [![Sending a Teams Message using Microsoft Graph from a SPFx web part](./assets/video-thumbnail.jpg)](https://www.youtube.com/watch?v=lzOcAL_6A7c "Sending a Teams Message using Microsoft Graph from a SPFx web part") diff --git a/samples/react-teams-personal-app-settings/.devcontainer/devcontainer.json b/samples/react-teams-personal-app-settings/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-teams-personal-app-settings/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-teams-personal-app-settings/.devcontainer/spfx-startup.sh b/samples/react-teams-personal-app-settings/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-teams-personal-app-settings/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-teams-personal-app-settings/README.md b/samples/react-teams-personal-app-settings/README.md index 5fd11b88f..216eccd9b 100644 --- a/samples/react-teams-personal-app-settings/README.md +++ b/samples/react-teams-personal-app-settings/README.md @@ -43,6 +43,7 @@ Downside of this approach is we need to additionally implement "app uninstalled" ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "Requires access to the user's OneDrive") ![Hosted Workbench Compatible (with API permissions)](https://img.shields.io/badge/Hosted%20Workbench-Compatible%20(with%20API%20permissions)-yellow.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -74,6 +75,8 @@ Version|Date|Comments * select deployed package in the App Catalog and click **Sync to Teams** in the Ribbon * Go to Teams and add **Personal App Settings** personal app +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Features * Using MS Graph to work with SharePoint lists and list items (create list, create and read list items) diff --git a/samples/react-timeline/.devcontainer/devcontainer.json b/samples/react-timeline/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-timeline/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-timeline/.devcontainer/spfx-startup.sh b/samples/react-timeline/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-timeline/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-timeline/README.md b/samples/react-timeline/README.md index 4f5872bb5..935b1a2bd 100644 --- a/samples/react-timeline/README.md +++ b/samples/react-timeline/README.md @@ -78,6 +78,7 @@ Below NPM package is used to develop this sample. ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -114,6 +115,8 @@ Version|Date|Comments - [Install the client-side solution](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page#install-the-client-side-solution-on-your-site) to your SharePoint site. - [Add web part to your SharePoint page](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page#add-the-helloworld-web-part-to-modern-page) named "Timeline". +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Features diff --git a/samples/react-tree-orgchart/.devcontainer/devcontainer.json b/samples/react-tree-orgchart/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-tree-orgchart/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-tree-orgchart/.devcontainer/spfx-startup.sh b/samples/react-tree-orgchart/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-tree-orgchart/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-tree-orgchart/README.md b/samples/react-tree-orgchart/README.md index 4d0fb48b7..a96a4c2aa 100644 --- a/samples/react-tree-orgchart/README.md +++ b/samples/react-tree-orgchart/README.md @@ -25,6 +25,7 @@ You can configure in the web part properties: ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "The solution requires access to the user's properties") ![Hosted Workbench Compatible (with API permissions)](https://img.shields.io/badge/Hosted%20Workbench-Compatible%20(with%20API%20permissions)-yellow.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -80,6 +81,8 @@ Version|Date|Comments - `gulp bundle --ship` - `gulp package-solution --ship` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Help diff --git a/samples/react-twitter/.devcontainer/devcontainer.json b/samples/react-twitter/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-twitter/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-twitter/.devcontainer/spfx-startup.sh b/samples/react-twitter/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-twitter/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-twitter/README.md b/samples/react-twitter/README.md index e7bfa5a53..76d01a6c5 100644 --- a/samples/react-twitter/README.md +++ b/samples/react-twitter/README.md @@ -13,6 +13,7 @@ Sample web part to display Twitter timeline ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -47,6 +48,8 @@ Version|Date|Comments * add _Twitter Feed_ web part * configure web part +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Features This sample illustrates how to use [react-twitter-embed](https://www.npmjs.com/package/react-twitter-embed) module to display Twitter timeline of specific profile, likes, list, collection or url. diff --git a/samples/react-webpartdetails/.devcontainer/devcontainer.json b/samples/react-webpartdetails/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-webpartdetails/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-webpartdetails/.devcontainer/spfx-startup.sh b/samples/react-webpartdetails/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-webpartdetails/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-webpartdetails/README.md b/samples/react-webpartdetails/README.md index 08d4af31b..ad2e56352 100644 --- a/samples/react-webpartdetails/README.md +++ b/samples/react-webpartdetails/README.md @@ -18,6 +18,7 @@ Note: This sample will not work in workbench as it loads the web part from curre ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -43,6 +44,8 @@ Version|Date|Comments - `npm install` - `gulp serve` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Help diff --git a/samples/react-yammer-praise/.devcontainer/devcontainer.json b/samples/react-yammer-praise/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/react-yammer-praise/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-yammer-praise/.devcontainer/spfx-startup.sh b/samples/react-yammer-praise/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-yammer-praise/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/react-yammer-praise/README.md b/samples/react-yammer-praise/README.md index bd9294622..9d70cf1d3 100644 --- a/samples/react-yammer-praise/README.md +++ b/samples/react-yammer-praise/README.md @@ -19,6 +19,7 @@ It also can be added to Microsoft Teams as Personal or Team Tabs. ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "Requires access to the user's context") ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to diff --git a/samples/vuejs-todo-single-file-component/.devcontainer/devcontainer.json b/samples/vuejs-todo-single-file-component/.devcontainer/devcontainer.json new file mode 100644 index 000000000..edbc0aded --- /dev/null +++ b/samples/vuejs-todo-single-file-component/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.10.0", + "image": "docker.io/m365pnp/spfx:1.10.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/vuejs-todo-single-file-component/.devcontainer/spfx-startup.sh b/samples/vuejs-todo-single-file-component/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/vuejs-todo-single-file-component/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +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 + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./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**********" \ No newline at end of file diff --git a/samples/vuejs-todo-single-file-component/README.md b/samples/vuejs-todo-single-file-component/README.md index acd921725..2fedf5bd5 100644 --- a/samples/vuejs-todo-single-file-component/README.md +++ b/samples/vuejs-todo-single-file-component/README.md @@ -27,6 +27,7 @@ Sample Todo web part demonstrating how you can utilize [Vue](https://vuejs.org/v ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -58,6 +59,8 @@ Version|Date|Comments - `npm i` - `gulp serve` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Features Demonstrates\uses below features: