From 86013372c027755bd599474479252aa10cdfc46c Mon Sep 17 00:00:00 2001 From: Hugo Bernier Date: Mon, 14 Feb 2022 02:52:18 -0500 Subject: [PATCH] Added all 1.12.1 and 1.13 containers --- .../.devcontainer/devcontainer.json | 39 + .../.devcontainer/spfx-startup.sh | 33 + samples/angular-greeting/README.md | 3 + samples/js-myflows/README.md | 2 +- .../.devcontainer/devcontainer.json | 39 + .../.devcontainer/spfx-startup.sh | 33 + samples/js-propertycontrols-svg/README.md | 5 +- samples/js-public-unjoined-teams/README.md | 2 +- .../.devcontainer/devcontainer.json | 39 + .../.devcontainer/spfx-startup.sh | 33 + samples/js-teams-meeting-app/README.md | 3 + samples/js-theme-manager-2019/README.md | 2 +- .../.devcontainer/devcontainer.json | 39 + .../.devcontainer/spfx-startup.sh | 33 + samples/react-adaptivecards/.gitignore | 4 + samples/react-adaptivecards/README.md | 3 + samples/react-app-settings/README.md | 2 +- samples/react-async-await-sp-pnp-js/README.md | 2 +- .../.devcontainer/devcontainer.json | 39 + .../.devcontainer/spfx-startup.sh | 33 + samples/react-at-a-glance/README.md | 3 + samples/react-avatar/README.md | 2 +- samples/react-bot-framework-secure/README.md | 2 +- .../.devcontainer/devcontainer.json | 39 + .../.devcontainer/spfx-startup.sh | 33 + samples/react-calendar/README.md | 3 + .../.devcontainer/devcontainer.json | 39 + .../.devcontainer/spfx-startup.sh | 33 + samples/react-carousel/README.md | 3 + samples/react-check-flows/README.md | 2 +- samples/react-company-stories/README.md | 2 +- samples/react-comparer/README.md | 2 +- .../react-components-dynamicloading/README.md | 2 +- .../.devcontainer/devcontainer.json | 39 + .../.devcontainer/spfx-startup.sh | 33 + samples/react-cross-device-data/README.md | 3 + samples/react-custom-links/README.md | 2 +- .../README.md | 2 + .../.devcontainer/devcontainer.json | 39 + .../.devcontainer/spfx-startup.sh | 33 + samples/react-datatable/README.md | 3 + .../.devcontainer/devcontainer.json | 39 + .../.devcontainer/spfx-startup.sh | 33 + .../react-document-links-accordion/README.md | 705 ++++++++++++++++-- .../.devcontainer/devcontainer.json | 39 + .../.devcontainer/spfx-startup.sh | 33 + samples/react-emoji-ratings/README.md | 3 + samples/react-events-aggregator/README.md | 2 +- .../.devcontainer/devcontainer.json | 39 + .../.devcontainer/spfx-startup.sh | 33 + samples/react-facebook-plugin/README.md | 3 + samples/react-faqapp/README.md | 2 +- samples/react-find-parker/README.md | 1 + .../.devcontainer/devcontainer.json | 39 + .../.devcontainer/spfx-startup.sh | 33 + .../react-fluentui-theme-variant/README.md | 3 + .../.devcontainer/devcontainer.json | 39 + .../.devcontainer/spfx-startup.sh | 33 + samples/react-follow-document/README.md | 3 + .../README.md | 1 + samples/react-functional-component/README.md | 2 +- .../README.md | 2 +- samples/react-github-badge/README.md | 2 +- samples/react-global-news-sp2019/README.md | 2 +- samples/react-google-fit/README.md | 2 +- .../.devcontainer/devcontainer.json | 39 + .../.devcontainer/spfx-startup.sh | 33 + .../README.md | 3 + samples/react-graph-auto-batching/README.md | 2 + .../.devcontainer/devcontainer.json | 39 + .../.devcontainer/spfx-startup.sh | 33 + samples/react-graph-groupviewer/README.md | 3 + samples/react-graph-personalemail/README.md | 2 +- samples/react-graph-pnpjs/README.md | 2 +- samples/react-graph-reports/README.md | 2 +- .../react-graph-schema-extensions/README.md | 2 +- .../.devcontainer/devcontainer.json | 39 + .../.devcontainer/spfx-startup.sh | 33 + samples/react-groups-teams/README.md | 3 + .../.devcontainer/devcontainer.json | 39 + .../.devcontainer/spfx-startup.sh | 33 + samples/react-hero-webpart/README.md | 3 + samples/react-hooks/README.md | 2 +- .../.devcontainer/devcontainer.json | 39 + .../.devcontainer/spfx-startup.sh | 33 + samples/react-htm-templating/README.md | 3 + samples/react-image-gallery/README.md | 2 +- .../README.md | 2 +- samples/react-invitation-manager/README.md | 2 +- samples/react-kanban-board/README.md | 1 + samples/react-list-items-menu/README.md | 1 + .../.devcontainer/devcontainer.json | 39 + .../.devcontainer/spfx-startup.sh | 33 + samples/react-list-search/README.md | 3 + samples/react-manage-sitedesigns/README.md | 2 +- .../react-manage-spfx-solutions-alm/README.md | 2 +- samples/react-material-ui/README.md | 2 +- samples/react-members-with-presence/README.md | 2 +- samples/react-mobx-multiple-stores/README.md | 2 +- .../react-modern-organization-chart/README.md | 2 +- samples/react-msgraph-extension/README.md | 2 +- samples/react-multimedia-gallery/README.md | 2 +- .../.devcontainer/devcontainer.json | 39 + .../.devcontainer/spfx-startup.sh | 33 + samples/react-multiscreen-webpart/README.md | 3 + samples/react-my-approvals/README.md | 1 + .../.devcontainer/devcontainer.json | 39 + .../.devcontainer/spfx-startup.sh | 33 + samples/react-my-events/README.md | 3 + samples/react-my-groups/README.md | 2 +- samples/react-my-personal-apps/README.md | 2 +- samples/react-my-teams/README.md | 3 +- .../.devcontainer/devcontainer.json | 39 + .../.devcontainer/spfx-startup.sh | 33 + samples/react-myonedrive/README.md | 2 + .../.devcontainer/devcontainer.json | 39 + .../react-news/.devcontainer/spfx-startup.sh | 33 + samples/react-news/README.md | 1 + samples/react-outlook-add-todo-task/README.md | 2 +- samples/react-outlook-copy2teams/README.md | 2 +- .../.devcontainer/devcontainer.json | 39 + .../.devcontainer/spfx-startup.sh | 33 + samples/react-page-navigator/README.md | 3 + .../react-page-sections-navigation/README.md | 2 +- .../.devcontainer/devcontainer.json | 39 + .../.devcontainer/spfx-startup.sh | 33 + samples/react-pagecontributors/README.md | 3 + samples/react-pages-hierarchy/README.md | 2 +- .../README.md | 2 +- samples/react-private-libraries/README.md | 2 +- samples/react-project-online/README.md | 2 +- samples/react-quotes/README.md | 2 +- samples/react-recaptcha/README.md | 2 +- samples/react-reduxform/README.md | 2 +- samples/react-save-attachments/README.md | 1 + samples/react-script-editor-onprem/README.md | 2 +- samples/react-script-editor/README.md | 2 +- samples/react-securitygrid/README.md | 2 +- .../react-site-provisioning-manager/README.md | 2 +- samples/react-spupsproperty-sync/README.md | 2 +- .../.devcontainer/devcontainer.json | 39 + .../.devcontainer/spfx-startup.sh | 33 + samples/react-star-ratings/README.md | 1 + .../react-taxonomy-file-explorer/README.md | 1 + samples/react-teams-configure-tab/README.md | 2 +- .../react-teams-graph-upload-as-pdf/README.md | 1 + .../.devcontainer/devcontainer.json | 39 + .../.devcontainer/spfx-startup.sh | 33 + samples/react-teams-lead-dashboard/README.md | 5 +- .../.devcontainer/devcontainer.json | 39 + .../.devcontainer/spfx-startup.sh | 33 + .../README.md | 4 + .../.devcontainer/devcontainer.json | 39 + .../.devcontainer/spfx-startup.sh | 33 + .../react-teams-membership-updater/README.md | 3 + samples/react-teams-message/README.md | 2 +- .../README.md | 2 +- .../README.md | 2 +- samples/react-teams-tagging/README.md | 2 +- samples/react-themes/README.md | 2 +- samples/react-timeline/README.md | 2 +- samples/react-tinymce/README.md | 2 +- samples/react-tour-pnpjs/README.md | 2 +- samples/react-word-game/README.md | 2 +- samples/react-youtube/README.md | 2 +- samples/react-zpl-viewer/README.md | 2 +- .../.devcontainer/devcontainer.json | 39 + .../.devcontainer/spfx-startup.sh | 33 + samples/sharepoint-crud/README.md | 3 + samples/vue-js-org-chart/README.md | 2 +- .../tutorial-migrate-datatables/README.md | 2 +- 171 files changed, 3064 insertions(+), 114 deletions(-) create mode 100644 samples/angular-greeting/.devcontainer/devcontainer.json create mode 100644 samples/angular-greeting/.devcontainer/spfx-startup.sh create mode 100644 samples/js-propertycontrols-svg/.devcontainer/devcontainer.json create mode 100644 samples/js-propertycontrols-svg/.devcontainer/spfx-startup.sh create mode 100644 samples/js-teams-meeting-app/.devcontainer/devcontainer.json create mode 100644 samples/js-teams-meeting-app/.devcontainer/spfx-startup.sh create mode 100644 samples/react-adaptivecards/.devcontainer/devcontainer.json create mode 100644 samples/react-adaptivecards/.devcontainer/spfx-startup.sh create mode 100644 samples/react-at-a-glance/.devcontainer/devcontainer.json create mode 100644 samples/react-at-a-glance/.devcontainer/spfx-startup.sh create mode 100644 samples/react-calendar/.devcontainer/devcontainer.json create mode 100644 samples/react-calendar/.devcontainer/spfx-startup.sh create mode 100644 samples/react-carousel/.devcontainer/devcontainer.json create mode 100644 samples/react-carousel/.devcontainer/spfx-startup.sh create mode 100644 samples/react-cross-device-data/.devcontainer/devcontainer.json create mode 100644 samples/react-cross-device-data/.devcontainer/spfx-startup.sh create mode 100644 samples/react-datatable/.devcontainer/devcontainer.json create mode 100644 samples/react-datatable/.devcontainer/spfx-startup.sh create mode 100644 samples/react-document-links-accordion/.devcontainer/devcontainer.json create mode 100644 samples/react-document-links-accordion/.devcontainer/spfx-startup.sh create mode 100644 samples/react-emoji-ratings/.devcontainer/devcontainer.json create mode 100644 samples/react-emoji-ratings/.devcontainer/spfx-startup.sh create mode 100644 samples/react-facebook-plugin/.devcontainer/devcontainer.json create mode 100644 samples/react-facebook-plugin/.devcontainer/spfx-startup.sh create mode 100644 samples/react-fluentui-theme-variant/.devcontainer/devcontainer.json create mode 100644 samples/react-fluentui-theme-variant/.devcontainer/spfx-startup.sh create mode 100644 samples/react-follow-document/.devcontainer/devcontainer.json create mode 100644 samples/react-follow-document/.devcontainer/spfx-startup.sh create mode 100644 samples/react-graph-app-secret-expiration/.devcontainer/devcontainer.json create mode 100644 samples/react-graph-app-secret-expiration/.devcontainer/spfx-startup.sh create mode 100644 samples/react-graph-groupviewer/.devcontainer/devcontainer.json create mode 100644 samples/react-graph-groupviewer/.devcontainer/spfx-startup.sh create mode 100644 samples/react-groups-teams/.devcontainer/devcontainer.json create mode 100644 samples/react-groups-teams/.devcontainer/spfx-startup.sh create mode 100644 samples/react-hero-webpart/.devcontainer/devcontainer.json create mode 100644 samples/react-hero-webpart/.devcontainer/spfx-startup.sh create mode 100644 samples/react-htm-templating/.devcontainer/devcontainer.json create mode 100644 samples/react-htm-templating/.devcontainer/spfx-startup.sh create mode 100644 samples/react-list-search/.devcontainer/devcontainer.json create mode 100644 samples/react-list-search/.devcontainer/spfx-startup.sh create mode 100644 samples/react-multiscreen-webpart/.devcontainer/devcontainer.json create mode 100644 samples/react-multiscreen-webpart/.devcontainer/spfx-startup.sh create mode 100644 samples/react-my-events/.devcontainer/devcontainer.json create mode 100644 samples/react-my-events/.devcontainer/spfx-startup.sh create mode 100644 samples/react-myonedrive/.devcontainer/devcontainer.json create mode 100644 samples/react-myonedrive/.devcontainer/spfx-startup.sh create mode 100644 samples/react-news/.devcontainer/devcontainer.json create mode 100644 samples/react-news/.devcontainer/spfx-startup.sh create mode 100644 samples/react-page-navigator/.devcontainer/devcontainer.json create mode 100644 samples/react-page-navigator/.devcontainer/spfx-startup.sh create mode 100644 samples/react-pagecontributors/.devcontainer/devcontainer.json create mode 100644 samples/react-pagecontributors/.devcontainer/spfx-startup.sh create mode 100644 samples/react-star-ratings/.devcontainer/devcontainer.json create mode 100644 samples/react-star-ratings/.devcontainer/spfx-startup.sh create mode 100644 samples/react-teams-lead-dashboard/.devcontainer/devcontainer.json create mode 100644 samples/react-teams-lead-dashboard/.devcontainer/spfx-startup.sh create mode 100644 samples/react-teams-meeting-app-questionnaire/.devcontainer/devcontainer.json create mode 100644 samples/react-teams-meeting-app-questionnaire/.devcontainer/spfx-startup.sh create mode 100644 samples/react-teams-membership-updater/.devcontainer/devcontainer.json create mode 100644 samples/react-teams-membership-updater/.devcontainer/spfx-startup.sh create mode 100644 samples/sharepoint-crud/.devcontainer/devcontainer.json create mode 100644 samples/sharepoint-crud/.devcontainer/spfx-startup.sh diff --git a/samples/angular-greeting/.devcontainer/devcontainer.json b/samples/angular-greeting/.devcontainer/devcontainer.json new file mode 100644 index 000000000..325cc1797 --- /dev/null +++ b/samples/angular-greeting/.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.12.1", + "image": "docker.io/m365pnp/spfx:1.12.1", + // 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 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + // Not needed for SPFx>= 1.12.1 + // "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/angular-greeting/.devcontainer/spfx-startup.sh b/samples/angular-greeting/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/angular-greeting/.devcontainer/spfx-startup.sh @@ -0,0 +1,33 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer + +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/angular-greeting/README.md b/samples/angular-greeting/README.md index 9895826c2..264273759 100644 --- a/samples/angular-greeting/README.md +++ b/samples/angular-greeting/README.md @@ -16,6 +16,7 @@ Final outcome: ![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg) ![Teams N/A: Untested with Microsoft Teams](https://img.shields.io/badge/Teams-N%2FA-lightgrey.svg "Untested with Microsoft Teams") ![Workbench Local | Hosted](https://img.shields.io/badge/Workbench-Local%20%7C%20Hosted-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -57,6 +58,8 @@ No pre-requisites * `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-myflows/README.md b/samples/js-myflows/README.md index 60ac2f3ea..e067155d3 100755 --- a/samples/js-myflows/README.md +++ b/samples/js-myflows/README.md @@ -21,7 +21,7 @@ ![directory](/samples/js-myflows/assets/Screenshot4.png) -# Compatibility +## Compatibility ![SPFx 1.8.2](https://img.shields.io/badge/SPFx-1.8.2-green.svg) ![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) diff --git a/samples/js-propertycontrols-svg/.devcontainer/devcontainer.json b/samples/js-propertycontrols-svg/.devcontainer/devcontainer.json new file mode 100644 index 000000000..4b1bdea04 --- /dev/null +++ b/samples/js-propertycontrols-svg/.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.13.0", + "image": "docker.io/m365pnp/spfx:1.13.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 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + // Not needed for SPFx>= 1.12.1 + // "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-propertycontrols-svg/.devcontainer/spfx-startup.sh b/samples/js-propertycontrols-svg/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/js-propertycontrols-svg/.devcontainer/spfx-startup.sh @@ -0,0 +1,33 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer + +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/js-propertycontrols-svg/README.md b/samples/js-propertycontrols-svg/README.md index 00ec11ea0..3ae91b1e6 100644 --- a/samples/js-propertycontrols-svg/README.md +++ b/samples/js-propertycontrols-svg/README.md @@ -7,7 +7,7 @@ An SPFx web part that displays a Scalable Vector Graphics (SVG) image using prop ![picture of the web part in action](./assets/js-propertycontrols-svg.gif) -# Compatibility +## Compatibility ![SPFx 1.13.0](https://img.shields.io/badge/SPFx-1.13.0-green.svg) ![Node.js v6](https://img.shields.io/badge/Node.js-v14-green.svg) @@ -16,6 +16,7 @@ An SPFx web part that displays a Scalable Vector Graphics (SVG) image using prop ![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) ## Which PnP SPFx controls are being used in this sample? @@ -51,6 +52,8 @@ Version|Date|Comments - `gulp serve` - Customize your PnP Hero! +> 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 Displays a Scalable Vector Graphics (SVG) image of the SharePoint Patterns and Practices Super Hero and allows users to customize the colors used and the size of the image through the use of PnP SPFx Property Controls (SpinButton & ColorPicker). diff --git a/samples/js-public-unjoined-teams/README.md b/samples/js-public-unjoined-teams/README.md index f48762d26..87ca96dc1 100644 --- a/samples/js-public-unjoined-teams/README.md +++ b/samples/js-public-unjoined-teams/README.md @@ -6,7 +6,7 @@ This web part lists all the public teams the current user is not yet a member of ![picture of the web part in action](./assets/js-public-unjoined-teams.gif) -# Compatibility +## Compatibility ![SPFx 1.7.1](https://img.shields.io/badge/SPFx-1.7.1-green.svg) ![Node.js v8](https://img.shields.io/badge/Node.js-v8-green.svg) diff --git a/samples/js-teams-meeting-app/.devcontainer/devcontainer.json b/samples/js-teams-meeting-app/.devcontainer/devcontainer.json new file mode 100644 index 000000000..55bda0962 --- /dev/null +++ b/samples/js-teams-meeting-app/.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.12.1-rc.3", + "image": "docker.io/m365pnp/spfx:1.12.1-rc.3", + // 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 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + // Not needed for SPFx>= 1.12.1 + // "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-teams-meeting-app/.devcontainer/spfx-startup.sh b/samples/js-teams-meeting-app/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/js-teams-meeting-app/.devcontainer/spfx-startup.sh @@ -0,0 +1,33 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer + +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/js-teams-meeting-app/README.md b/samples/js-teams-meeting-app/README.md index d1923e90a..b5721cd5a 100644 --- a/samples/js-teams-meeting-app/README.md +++ b/samples/js-teams-meeting-app/README.md @@ -15,6 +15,7 @@ This project demonstrates a SPFx web part used as a Microsoft Teams meetings app ![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg) ![Teams Yes: Designed for Microsoft Teams](https://img.shields.io/badge/Teams-Yes-green.svg "Designed for Microsoft Teams") ![Workbench Hosted: Does not work with local workbench](https://img.shields.io/badge/Workbench-Hosted-yellow.svg "Does not work with local workbench") +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -43,6 +44,8 @@ Version | Date | Comments Refer to the above mentioned SPFx tutorial for full repro instructions. +> 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 - ZIP the contents of the `./teams` folder, *but not the folder itself* - rename the ZIP to `TeamsSPFxApp.zip` diff --git a/samples/js-theme-manager-2019/README.md b/samples/js-theme-manager-2019/README.md index cdcc8f020..4a82223f9 100644 --- a/samples/js-theme-manager-2019/README.md +++ b/samples/js-theme-manager-2019/README.md @@ -14,7 +14,7 @@ NOTE: This is a great option to provide theme management of a Site Collection wi -# Compatibility +## Compatibility ![SPFx 1.8.2](https://img.shields.io/badge/SPFx-1.8.2-green.svg) ![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) diff --git a/samples/react-adaptivecards/.devcontainer/devcontainer.json b/samples/react-adaptivecards/.devcontainer/devcontainer.json new file mode 100644 index 000000000..325cc1797 --- /dev/null +++ b/samples/react-adaptivecards/.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.12.1", + "image": "docker.io/m365pnp/spfx:1.12.1", + // 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 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + // Not needed for SPFx>= 1.12.1 + // "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-adaptivecards/.devcontainer/spfx-startup.sh b/samples/react-adaptivecards/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-adaptivecards/.devcontainer/spfx-startup.sh @@ -0,0 +1,33 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer + +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-adaptivecards/.gitignore b/samples/react-adaptivecards/.gitignore index d5ab57b0f..636a3337f 100644 --- a/samples/react-adaptivecards/.gitignore +++ b/samples/react-adaptivecards/.gitignore @@ -31,3 +31,7 @@ obj # Styles Generated Code *.scss.ts +# .CER Certificates +*.cer +# .PEM Certificates +*.pem diff --git a/samples/react-adaptivecards/README.md b/samples/react-adaptivecards/README.md index a55b74ec5..c90092e4a 100644 --- a/samples/react-adaptivecards/README.md +++ b/samples/react-adaptivecards/README.md @@ -20,6 +20,7 @@ This sample creates an Adaptive Cards Host web part that you can use to display ![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 of the functionality may not work.") ![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 * `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. + > Don't want to clone the entire repository? Try downloading this folder [as a Zip file](https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-adaptivecards). Unzip the file, and continue with the command-line instructions. ## Features diff --git a/samples/react-app-settings/README.md b/samples/react-app-settings/README.md index 2a738428b..7e0ffc76c 100644 --- a/samples/react-app-settings/README.md +++ b/samples/react-app-settings/README.md @@ -27,7 +27,7 @@ That allows better DevOps and continuous integration (CI/CD) automation. The App Azure DevOps pipelines configurations are included to demonstrate how the AppSettings.ts values can be changed per different environments. Please refer to the `devops/configurations` folder to see how this can be setup for your pipeline. -# Compatibility +## Compatibility ![SPFx 1.7.1](https://img.shields.io/badge/SPFx-1.7.1-green.svg) ![Node.js v8](https://img.shields.io/badge/Node.js-v8-green.svg) diff --git a/samples/react-async-await-sp-pnp-js/README.md b/samples/react-async-await-sp-pnp-js/README.md index 4054ffd76..49d4a0ef9 100644 --- a/samples/react-async-await-sp-pnp-js/README.md +++ b/samples/react-async-await-sp-pnp-js/README.md @@ -22,7 +22,7 @@ This web part demonstrates how to use [PnPJS](https://pnp.github.io/pnpjs/) with ![React-sp-pnp-js-async-await](./assets/async-await-sp-pnp-js.png) -# Compatibility +## Compatibility ![SPFx 1.4.1](https://img.shields.io/badge/SPFx-1.4.1-green.svg) ![Node.js v8 | v6](https://img.shields.io/badge/Node.js-v8%20%7C%20v6-green.svg) diff --git a/samples/react-at-a-glance/.devcontainer/devcontainer.json b/samples/react-at-a-glance/.devcontainer/devcontainer.json new file mode 100644 index 000000000..325cc1797 --- /dev/null +++ b/samples/react-at-a-glance/.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.12.1", + "image": "docker.io/m365pnp/spfx:1.12.1", + // 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 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + // Not needed for SPFx>= 1.12.1 + // "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-at-a-glance/.devcontainer/spfx-startup.sh b/samples/react-at-a-glance/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-at-a-glance/.devcontainer/spfx-startup.sh @@ -0,0 +1,33 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer + +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-at-a-glance/README.md b/samples/react-at-a-glance/README.md index 46bbe282f..439233add 100644 --- a/samples/react-at-a-glance/README.md +++ b/samples/react-at-a-glance/README.md @@ -41,6 +41,7 @@ The idea is based of the *At a glance* section of a news in the BBC news app (be ![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 news page to work") ![Hosted Workbench Partially](https://img.shields.io/badge/Hosted%20Workbench-Partially-yellow.svg "The solution needs to run on a news page to work") +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -77,6 +78,8 @@ Version|Date|Comments - Add `?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js` to the URL - Add the **At a glance** 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 The web part also has properties to show custom text instead of article text. Upto 3 custom sentences can be added in the properties. diff --git a/samples/react-avatar/README.md b/samples/react-avatar/README.md index f42e6d7f9..159800ca0 100644 --- a/samples/react-avatar/README.md +++ b/samples/react-avatar/README.md @@ -15,7 +15,7 @@ This is a sample web part that helps user create their avatar and save as profil -# Compatibility +## Compatibility ![SPFx 1.11.1](https://img.shields.io/badge/SPFx-1.11.1-green.svg) ![Node.js v10](https://img.shields.io/badge/Node.js-v10-green.svg) diff --git a/samples/react-bot-framework-secure/README.md b/samples/react-bot-framework-secure/README.md index d76274659..882b36be7 100644 --- a/samples/react-bot-framework-secure/README.md +++ b/samples/react-bot-framework-secure/README.md @@ -19,7 +19,7 @@ This demo does not include any threat models and is designed for educational pur ![react-bot-framework-secure](./assets/sp-wp-secure.gif) -# Compatibility +## Compatibility ![SPFx 1.0.0](https://img.shields.io/badge/SPFx-1.0.0-green.svg) ![Node.js v6](https://img.shields.io/badge/Node.js-v6-green.svg) diff --git a/samples/react-calendar/.devcontainer/devcontainer.json b/samples/react-calendar/.devcontainer/devcontainer.json new file mode 100644 index 000000000..325cc1797 --- /dev/null +++ b/samples/react-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.12.1", + "image": "docker.io/m365pnp/spfx:1.12.1", + // 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 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + // Not needed for SPFx>= 1.12.1 + // "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/.devcontainer/spfx-startup.sh b/samples/react-calendar/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-calendar/.devcontainer/spfx-startup.sh @@ -0,0 +1,33 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer + +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-calendar/README.md b/samples/react-calendar/README.md index 98a2f0247..a1b95b7ea 100644 --- a/samples/react-calendar/README.md +++ b/samples/react-calendar/README.md @@ -93,6 +93,7 @@ The Web Part checks the user's permissions for the View, Add, Edit, and Delete e ![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 @@ -155,6 +156,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-carousel/.devcontainer/devcontainer.json b/samples/react-carousel/.devcontainer/devcontainer.json new file mode 100644 index 000000000..325cc1797 --- /dev/null +++ b/samples/react-carousel/.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.12.1", + "image": "docker.io/m365pnp/spfx:1.12.1", + // 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 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + // Not needed for SPFx>= 1.12.1 + // "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-carousel/.devcontainer/spfx-startup.sh b/samples/react-carousel/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-carousel/.devcontainer/spfx-startup.sh @@ -0,0 +1,33 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer + +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-carousel/README.md b/samples/react-carousel/README.md index d98ae5dc5..d1d0f3af2 100644 --- a/samples/react-carousel/README.md +++ b/samples/react-carousel/README.md @@ -34,6 +34,7 @@ It uses Microsoft Graph API to get image/video url and use PnPjs to load files f ![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 "Needs 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 @@ -93,6 +94,8 @@ Version|Date|Comments - Add the web part to a page - In the web part's property pane, enter the **Site Url** (if library is on a different site collect) and select a **Picture Library** from the **Library** drop-down. +> 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-check-flows/README.md b/samples/react-check-flows/README.md index f25bfed26..9d8357075 100644 --- a/samples/react-check-flows/README.md +++ b/samples/react-check-flows/README.md @@ -10,7 +10,7 @@ This web part lists all the automated Flows associated with a SharePoint List/ L The web part only displays the flows which are shared with the current user and reside in the default environment. -# Compatibility +## Compatibility ![SPFx 1.9.1](https://img.shields.io/badge/SPFx-1.9.1-green.svg) ![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) diff --git a/samples/react-company-stories/README.md b/samples/react-company-stories/README.md index a257339dd..68a998c73 100644 --- a/samples/react-company-stories/README.md +++ b/samples/react-company-stories/README.md @@ -7,7 +7,7 @@ This web part allows you to add images to a SharePoint List, and renders them wi ![react-company-stories](./assets/react-company-stories.gif) -# Compatibility +## Compatibility ![SPFx 1.11](https://img.shields.io/badge/SPFx-1.11-green.svg) ![Node.js v10](https://img.shields.io/badge/Node.js-v10-green.svg) diff --git a/samples/react-comparer/README.md b/samples/react-comparer/README.md index 3cd91520f..83c427c67 100644 --- a/samples/react-comparer/README.md +++ b/samples/react-comparer/README.md @@ -55,7 +55,7 @@ The file picker includes the following tabs: -# Compatibility +## Compatibility ![SPFx 1.7.1](https://img.shields.io/badge/SPFx-1.7.1-green.svg) ![Node.js v8](https://img.shields.io/badge/Node.js-v8-green.svg) diff --git a/samples/react-components-dynamicloading/README.md b/samples/react-components-dynamicloading/README.md index f78fcefbf..931b56405 100644 --- a/samples/react-components-dynamicloading/README.md +++ b/samples/react-components-dynamicloading/README.md @@ -6,7 +6,7 @@ Load React components and third-party packages on demand in SPFx ![Dynamic Loading of React components](./assets/cs3.gif) -# Compatibility +## Compatibility ![SPFx 1.6](https://img.shields.io/badge/SPFx-1.6.0-green.svg) ![Node.js v8 | v6](https://img.shields.io/badge/Node.js-v8%20%7C%20v6-green.svg) diff --git a/samples/react-cross-device-data/.devcontainer/devcontainer.json b/samples/react-cross-device-data/.devcontainer/devcontainer.json new file mode 100644 index 000000000..325cc1797 --- /dev/null +++ b/samples/react-cross-device-data/.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.12.1", + "image": "docker.io/m365pnp/spfx:1.12.1", + // 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 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + // Not needed for SPFx>= 1.12.1 + // "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-cross-device-data/.devcontainer/spfx-startup.sh b/samples/react-cross-device-data/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-cross-device-data/.devcontainer/spfx-startup.sh @@ -0,0 +1,33 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer + +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-cross-device-data/README.md b/samples/react-cross-device-data/README.md index a21ae886f..057bbd1a5 100644 --- a/samples/react-cross-device-data/README.md +++ b/samples/react-cross-device-data/README.md @@ -13,6 +13,7 @@ This solution demonstrates how to use the OneDrive special folder **Apps** in or ![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg) ![Teams N/A: Untested with Microsoft Teams](https://img.shields.io/badge/Teams-N%2FA-lightgrey.svg "Untested with Microsoft Teams") ![Workbench Local | Hosted](https://img.shields.io/badge/Workbench-Local%20%7C%20Hosted-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 - `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: diff --git a/samples/react-custom-links/README.md b/samples/react-custom-links/README.md index 656f0e4eb..4261ae759 100644 --- a/samples/react-custom-links/README.md +++ b/samples/react-custom-links/README.md @@ -34,7 +34,7 @@ In this web part you can full customize the background and foreground color, fon ![CustomLinks](./assets/customLinks03.PNG) -# Compatibility +## Compatibility ![SPFx 1.11](https://img.shields.io/badge/SPFx-1.11.0-green.svg) ![Node.js v10](https://img.shields.io/badge/Node.js-v10-green.svg) diff --git a/samples/react-datatable-using-mui-tables/README.md b/samples/react-datatable-using-mui-tables/README.md index 6c553f85c..52a0a832f 100644 --- a/samples/react-datatable-using-mui-tables/README.md +++ b/samples/react-datatable-using-mui-tables/README.md @@ -56,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. + > Don't want to clone the entire repository? Try downloading this folder [as a Zip file](https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-datatable-using-mui-tables). Unzip the file, and continue with the command-line instructions. diff --git a/samples/react-datatable/.devcontainer/devcontainer.json b/samples/react-datatable/.devcontainer/devcontainer.json new file mode 100644 index 000000000..325cc1797 --- /dev/null +++ b/samples/react-datatable/.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.12.1", + "image": "docker.io/m365pnp/spfx:1.12.1", + // 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 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + // Not needed for SPFx>= 1.12.1 + // "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-datatable/.devcontainer/spfx-startup.sh b/samples/react-datatable/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-datatable/.devcontainer/spfx-startup.sh @@ -0,0 +1,33 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer + +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-datatable/README.md b/samples/react-datatable/README.md index ad3107ad1..bb03c297d 100644 --- a/samples/react-datatable/README.md +++ b/samples/react-datatable/README.md @@ -25,6 +25,7 @@ This web part provides easy way to render SharePoint custom list in datatable vi ![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 data") ![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 @@ -54,6 +55,8 @@ Version|Date|Comments ### Local testing +> 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 the repository * `cd` to web part's project folder * In the command line run: diff --git a/samples/react-document-links-accordion/.devcontainer/devcontainer.json b/samples/react-document-links-accordion/.devcontainer/devcontainer.json new file mode 100644 index 000000000..325cc1797 --- /dev/null +++ b/samples/react-document-links-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.12.1", + "image": "docker.io/m365pnp/spfx:1.12.1", + // 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 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + // Not needed for SPFx>= 1.12.1 + // "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-document-links-accordion/.devcontainer/spfx-startup.sh b/samples/react-document-links-accordion/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-document-links-accordion/.devcontainer/spfx-startup.sh @@ -0,0 +1,33 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer + +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-document-links-accordion/README.md b/samples/react-document-links-accordion/README.md index 0288c1254..68dd9628b 100644 --- a/samples/react-document-links-accordion/README.md +++ b/samples/react-document-links-accordion/README.md @@ -1,89 +1,704 @@ -# Documents Links Accordion +# -## Summary +> 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.Documents -This web part allows user create a accordion with documents links grouped by any column of document library. -When the user clicks on the header it dynamically load documents. +> 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.Links + +> 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.Accordion + +## + +> 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.Summary + +This + +> 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.web + +> 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.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.allows + +> 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.user + +> 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 + +> 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.a + +> 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.accordion + +> 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.with + +> 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.documents + +> 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.links + +> 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.grouped + +> 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.by + +> 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.any + +> 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.column + +> 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.of + +> 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.document + +> 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.library. +When + +> 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.the + +> 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.user + +> 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.clicks + +> 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.on + +> 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.the + +> 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.header + +> 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.it + +> 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.dynamically + +> 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.load + +> 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.documents. ![documentsLinksAccordion](./assets/documentsLinksAccordion.gif) -## Screenshots +## + +> 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.Screenshots ![documentsLinksAccordion](./assets/documentsLinksAccordion1.png) -## Compatibility +## -![SPFx 1.12.1](https://img.shields.io/badge/SPFx-1.12.1-green.svg) -![Node.js v14 | v12 | v10](https://img.shields.io/badge/Node.js-v14%20%7C%20v12%20%7C%20v10-green.svg) -![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg) -![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg "SharePoint Server 2019 requires SPFx 1.4.1 or lower") -![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) +> 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 + +> 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.12.1](https://img.shields.io/badge/SPFx-1.12.1-green.svg) +![Node.js + +> 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.v14 + +> 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.| + +> 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.v12 + +> 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.| + +> 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.v10](https://img.shields.io/badge/Node.js-v14%20%7C%20v12%20%7C%20v10-green.svg) + +> 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. +![Compatible + +> 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.with + +> 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.SharePoint + +> 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.Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg) +![Does + +> 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.not + +> 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.work + +> 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.with + +> 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.SharePoint + +> 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.2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg + +> 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."SharePoint + +> 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.Server + +> 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.2019 + +> 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.requires + +> 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.SPFx + +> 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.4.1 + +> 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.or + +> 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.lower") +![Does + +> 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.not + +> 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.work + +> 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.with + +> 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.SharePoint + +> 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.2016 + +> 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.(Feature + +> 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.Pack + +> 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.2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg + +> 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."SharePoint + +> 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.Server + +> 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.2016 + +> 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.Feature + +> 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.Pack + +> 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.2 + +> 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.requires + +> 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.SPFx + +> 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.1") +![Local + +> 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.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.Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg) +![Hosted + +> 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.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.Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible + +> 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.with + +> 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.Remote + +> 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.Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) -## Applies to +## -* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview) -* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment) +> 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.Applies -## Web Part Properties +> 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.to + +* + +> 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.[SharePoint + +> 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.Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview) +* + +> 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.[Office + +> 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.365 + +> 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.tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment) + +## + +> 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.Web + +> 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.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.Properties -Property |Type|Required| comments + +> 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. +Property + +> 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.|Type|Required| + +> 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.comments --------------------|----|--------|---------- -Web part Title| Text| no| -Select Document Library| dropdown|yes -Select Field to Group By | dropdown|yes +Web + +> 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.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.Title| + +> 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.Text| + +> 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.no| +Select + +> 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.Document + +> 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.Library| + +> 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.dropdown|yes +Select + +> 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.Field + +> 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.to + +> 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.Group + +> 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.By + +> 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.| + +> 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.dropdown|yes -## Solution +> 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. -The web part Use PnPjs library, Fluent-Ui-react components +## + +> 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 + +The + +> 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.web + +> 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.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.Use + +> 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.PnPjs + +> 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.library, + +> 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.Fluent-Ui-react + +> 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.components Solution|Author(s) --------|--------- -React Documents Links Accordion |[João Mendes](https://github.com/joaojmendes) ([@joaojmendes](https://twitter.com/joaojmendes)) +React + +> 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.Documents + +> 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.Links + +> 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.Accordion + +> 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.|[João + +> 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.Mendes](https://github.com/joaojmendes) + +> 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.([@joaojmendes](https://twitter.com/joaojmendes)) +> 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. -## Version history + +## + +> 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.Version + +> 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.history Version|Date|Comments -------|----|-------- -1.0.0|October 10, 2021|Initial release +1.0.0|October + +> 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.10, + +> 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.2021|Initial + +> 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.release -## Minimal Path to Awesome +> 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 -- Move to sample folder -- in the command line run: - - `npm install` - - `gulp build` - - `gulp bundle --ship` - - `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.Minimal + +> 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.Path + +> 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.to + +> 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.Awesome + +- + +> 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 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.this + +> 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.repository +- + +> 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.Move + +> 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.to + +> 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.sample + +> 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.folder +- + +> 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.in + +> 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.the + +> 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.command + +> 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.line + +> 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.run: -## Disclaimer +> 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. -**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** +> 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.- + +> 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.`npm + +> 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.install` + + +> 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. + +> 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.- + +> 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.`gulp + +> 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.build` + + +> 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. + +> 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.- + +> 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.`gulp + +> 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.bundle + +> 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.--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. + +> 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.- + +> 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.`gulp + +> 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.package-solution + +> 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.--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.Add + +> 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.to + +> 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.AppCatalog + +> 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.and + +> 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 + + +> 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. + +## + +> 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.Disclaimer + +**THIS + +> 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.CODE + +> 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.IS + +> 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.PROVIDED + +> 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.*AS + +> 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.IS* + +> 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.WITHOUT + +> 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.WARRANTY + +> 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.OF + +> 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.ANY + +> 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.KIND, + +> 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.EITHER + +> 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.EXPRESS + +> 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.OR + +> 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.IMPLIED, + +> 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.INCLUDING + +> 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.ANY + +> 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.IMPLIED + +> 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.WARRANTIES + +> 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.OF + +> 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.FITNESS + +> 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.FOR + +> 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.A + +> 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.PARTICULAR + +> 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.PURPOSE, + +> 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.MERCHANTABILITY, + +> 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.OR + +> 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.NON-INFRINGEMENT.** -## 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. +> 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 -You can try looking at [issues related to this sample](https://github.com/pnp/sp-dev-fx-webparts/labels/react-document-links-accordion) to see if anybody else is having the same issues. +We -You can also try looking at [discussions related to this sample](https://github.com/pnp/sp-dev-fx-webparts/discussions?discussions_q=react-document-links-accordion) and see what the community is saying. +> 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.do -If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected%2Csample%3A%20react-document-links-accordion&template=bug-report.yml&sample=react-document-links-accordion&authors=@joaojmendes%20@Ravikadri&title=react-document-links-accordion%20-%20). +> 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.not -For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aquestion%2Csample%3A%20react-document-links-accordion&template=question.yml&sample=react-document-links-accordion&authors=@joaojmendes%20@Ravikadri&title=react-document-links-accordion%20-%20). +> 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.support -Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aenhancement%2Csample%3A%20react-document-links-accordion&template=question.yml&sample=react-document-links-accordion&authors=@joaojmendes%20@Ravikadri&title=react-document-links-accordion%20-%20). +> 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.samples, + +> 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.but + +> 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.we + +> 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.this + +> 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.community + +> 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.is + +> 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.always + +> 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.willing + +> 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.to + +> 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, + +> 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.and + +> 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.we + +> 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.want + +> 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.to + +> 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.improve + +> 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.these + +> 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.samples. + +> 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.We + +> 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.use + +> 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.GitHub + +> 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.to + +> 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.track + +> 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.issues, + +> 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.which + +> 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.makes + +> 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.it + +> 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.easy + +> 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.for + +> 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. + +> 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.community + +> 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.members + +> 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.to + +> 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.volunteer + +> 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.their + +> 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.time + +> 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.and + +> 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 + +> 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.resolve + +> 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.issues. + +You + +> 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.can + +> 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.try + +> 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.looking + +> 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.at + +> 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.[issues + +> 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.related + +> 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.to + +> 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.this + +> 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.sample](https://github.com/pnp/sp-dev-fx-webparts/labels/react-document-links-accordion) + +> 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.to + +> 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.see + +> 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.if + +> 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.anybody + +> 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.else + +> 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.is + +> 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.having + +> 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.the + +> 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.same + +> 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.issues. + +You + +> 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.can + +> 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.also + +> 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.try + +> 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.looking + +> 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.at + +> 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.[discussions + +> 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.related + +> 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.to + +> 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.this + +> 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.sample](https://github.com/pnp/sp-dev-fx-webparts/discussions?discussions_q=react-document-links-accordion) + +> 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.and + +> 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.see + +> 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.what + +> 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.the + +> 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.community + +> 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.is + +> 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.saying. + +If + +> 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.you + +> 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.encounter + +> 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.any + +> 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.issues + +> 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.while + +> 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.using + +> 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.this + +> 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.sample, + +> 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 + +> 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.a + +> 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.new + +> 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.issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected%2Csample%3A%20react-document-links-accordion&template=bug-report.yml&sample=react-document-links-accordion&authors=@joaojmendes%20@Ravikadri&title=react-document-links-accordion%20-%20). + +For + +> 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.questions + +> 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.regarding + +> 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.this + +> 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.sample, + +> 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 + +> 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.a + +> 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.new + +> 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.question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aquestion%2Csample%3A%20react-document-links-accordion&template=question.yml&sample=react-document-links-accordion&authors=@joaojmendes%20@Ravikadri&title=react-document-links-accordion%20-%20). + +Finally, + +> 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.if + +> 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.you + +> 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.have + +> 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.an + +> 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.idea + +> 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.for + +> 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.improvement, + +> 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.[make + +> 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.a + +> 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.suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aenhancement%2Csample%3A%20react-document-links-accordion&template=question.yml&sample=react-document-links-accordion&authors=@joaojmendes%20@Ravikadri&title=react-document-links-accordion%20-%20). - + 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.src="https://pnptelemetry.azurewebsites.net/sp-dev-fx-webparts/samples/react-documents-links-accordion" + +> 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./> diff --git a/samples/react-emoji-ratings/.devcontainer/devcontainer.json b/samples/react-emoji-ratings/.devcontainer/devcontainer.json new file mode 100644 index 000000000..325cc1797 --- /dev/null +++ b/samples/react-emoji-ratings/.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.12.1", + "image": "docker.io/m365pnp/spfx:1.12.1", + // 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 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + // Not needed for SPFx>= 1.12.1 + // "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-emoji-ratings/.devcontainer/spfx-startup.sh b/samples/react-emoji-ratings/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-emoji-ratings/.devcontainer/spfx-startup.sh @@ -0,0 +1,33 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer + +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-emoji-ratings/README.md b/samples/react-emoji-ratings/README.md index 896b33f4d..70e42d5c3 100644 --- a/samples/react-emoji-ratings/README.md +++ b/samples/react-emoji-ratings/README.md @@ -50,6 +50,7 @@ I have added default emoji's images which can be used and uploaded to SharePoint ![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 a 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 @@ -84,6 +85,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. + ## References - [Getting started with SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant) diff --git a/samples/react-events-aggregator/README.md b/samples/react-events-aggregator/README.md index 7aa731ea9..277070398 100644 --- a/samples/react-events-aggregator/README.md +++ b/samples/react-events-aggregator/README.md @@ -16,7 +16,7 @@ This sample shows how we can use the SPFx Event Aggregator to communicate betwee -# Compatibility +## Compatibility ![SPFx 1.4.1](https://img.shields.io/badge/SPFx-1.4.1-green.svg) ![Node.js v8 | v6](https://img.shields.io/badge/Node.js-v8%20%7C%20v6-green.svg) diff --git a/samples/react-facebook-plugin/.devcontainer/devcontainer.json b/samples/react-facebook-plugin/.devcontainer/devcontainer.json new file mode 100644 index 000000000..325cc1797 --- /dev/null +++ b/samples/react-facebook-plugin/.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.12.1", + "image": "docker.io/m365pnp/spfx:1.12.1", + // 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 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + // Not needed for SPFx>= 1.12.1 + // "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-facebook-plugin/.devcontainer/spfx-startup.sh b/samples/react-facebook-plugin/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-facebook-plugin/.devcontainer/spfx-startup.sh @@ -0,0 +1,33 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer + +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-facebook-plugin/README.md b/samples/react-facebook-plugin/README.md index ad72efb85..2bf9a0457 100644 --- a/samples/react-facebook-plugin/README.md +++ b/samples/react-facebook-plugin/README.md @@ -15,6 +15,7 @@ The key differences between using Embed web part and current example are the str ![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg) ![Teams N/A: Untested with Microsoft Teams](https://img.shields.io/badge/Teams-N%2FA-lightgrey.svg "Untested with Microsoft Teams") ![Workbench Local | Hosted](https://img.shields.io/badge/Workbench-Local%20%7C%20Hosted-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. + ## Features This web part illustrates the following concepts on top of the SharePoint Framework: diff --git a/samples/react-faqapp/README.md b/samples/react-faqapp/README.md index 99a35048b..f544de64c 100644 --- a/samples/react-faqapp/README.md +++ b/samples/react-faqapp/README.md @@ -23,7 +23,7 @@ extensions: ![Web part preview](assets/FAQWebpart.png) -# Compatibility +## Compatibility ![SPFx 1.8.2](https://img.shields.io/badge/SPFx-1.8.2-green.svg) ![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) diff --git a/samples/react-find-parker/README.md b/samples/react-find-parker/README.md index 96878faec..9493102ac 100644 --- a/samples/react-find-parker/README.md +++ b/samples/react-find-parker/README.md @@ -26,6 +26,7 @@ or good old where's Wally game 😉 ![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 Unsupported](https://img.shields.io/badge/Local%20Workbench-Unsupported-red.svg "Local workbench is no longer available as of SPFx 1.13 and above") ![Hosted Workbench Partially](https://img.shields.io/badge/Hosted%20Workbench-Partially-yellow.svg "Will run on hosted workbench, but web part works better on a hosted page with content") +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to diff --git a/samples/react-fluentui-theme-variant/.devcontainer/devcontainer.json b/samples/react-fluentui-theme-variant/.devcontainer/devcontainer.json new file mode 100644 index 000000000..325cc1797 --- /dev/null +++ b/samples/react-fluentui-theme-variant/.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.12.1", + "image": "docker.io/m365pnp/spfx:1.12.1", + // 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 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + // Not needed for SPFx>= 1.12.1 + // "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-fluentui-theme-variant/.devcontainer/spfx-startup.sh b/samples/react-fluentui-theme-variant/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-fluentui-theme-variant/.devcontainer/spfx-startup.sh @@ -0,0 +1,33 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer + +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-fluentui-theme-variant/README.md b/samples/react-fluentui-theme-variant/README.md index c0c136580..56c81afd0 100644 --- a/samples/react-fluentui-theme-variant/README.md +++ b/samples/react-fluentui-theme-variant/README.md @@ -13,6 +13,7 @@ In this way it is possible to implement the same mechanism that is currently imp ![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg) ![Teams N/A: Untested with Microsoft Teams](https://img.shields.io/badge/Teams-N%2FA-lightgrey.svg "Untested with Microsoft Teams") ![Workbench Local | Hosted](https://img.shields.io/badge/Workbench-Local%20%7C%20Hosted-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -38,6 +39,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 example was born with the idea of overcoming the present default limit regarding the colors of the sections of the SharePoint pages. diff --git a/samples/react-follow-document/.devcontainer/devcontainer.json b/samples/react-follow-document/.devcontainer/devcontainer.json new file mode 100644 index 000000000..325cc1797 --- /dev/null +++ b/samples/react-follow-document/.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.12.1", + "image": "docker.io/m365pnp/spfx:1.12.1", + // 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 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + // Not needed for SPFx>= 1.12.1 + // "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-follow-document/.devcontainer/spfx-startup.sh b/samples/react-follow-document/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-follow-document/.devcontainer/spfx-startup.sh @@ -0,0 +1,33 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer + +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-follow-document/README.md b/samples/react-follow-document/README.md index 966c9c84f..3ca33a9c3 100644 --- a/samples/react-follow-document/README.md +++ b/samples/react-follow-document/README.md @@ -38,6 +38,7 @@ Usage of following 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 "Needs access to OneDrive documents") ![Hosted Workbench Compatible (requires permissions)](https://img.shields.io/badge/Hosted%20Workbench-Compatible%20(requires%20permissions)-yellow.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -90,6 +91,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. + ## Features Description of the extension that expands upon high-level summary above. diff --git a/samples/react-followed-drag-and-drop-grid/README.md b/samples/react-followed-drag-and-drop-grid/README.md index 40560d8f2..a1f302470 100644 --- a/samples/react-followed-drag-and-drop-grid/README.md +++ b/samples/react-followed-drag-and-drop-grid/README.md @@ -29,6 +29,7 @@ Another cool feature is also done using MS Graph in order to save or update the ![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 Unsupported](https://img.shields.io/badge/Local%20Workbench-Unsupported-red.svg "Local workbench is no longer available as of SPFx 1.13 and above") ![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-functional-component/README.md b/samples/react-functional-component/README.md index 264414c14..d245f3db8 100644 --- a/samples/react-functional-component/README.md +++ b/samples/react-functional-component/README.md @@ -7,7 +7,7 @@ This web part is intended to be easier to understand for new developers building ![Screenshot](Screenshot.png "Screenshot - nothing to see here, move along") -# Compatibility +## Compatibility ![SPFx 1.8.2](https://img.shields.io/badge/SPFx-1.8.2-green.svg) ![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) diff --git a/samples/react-functional-stateful-component/README.md b/samples/react-functional-stateful-component/README.md index 0d8446b15..f85e7e441 100644 --- a/samples/react-functional-stateful-component/README.md +++ b/samples/react-functional-stateful-component/README.md @@ -7,7 +7,7 @@ This web part demonstrates building a React functional component that includes s ![Screenshot](Screenshot.png "Screenshot - Roman Numerals web part") -# Compatibility +## Compatibility ![SPFx 1.8.2](https://img.shields.io/badge/SPFx-1.8.2-green.svg) ![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) diff --git a/samples/react-github-badge/README.md b/samples/react-github-badge/README.md index e6bb9380a..088ee450e 100644 --- a/samples/react-github-badge/README.md +++ b/samples/react-github-badge/README.md @@ -9,7 +9,7 @@ Displays information about a GitHub user. ![React GitHub Badge in action](https://github.com/hugoabernier/sp-dev-fx-webparts/raw/master/samples/react-github-badge/assets/githubbadge.png) -# Compatibility +## Compatibility ![SPFx 1.8.2](https://img.shields.io/badge/SPFx-1.8.2-green.svg) ![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) diff --git a/samples/react-global-news-sp2019/README.md b/samples/react-global-news-sp2019/README.md index b47a2ef02..e50058035 100644 --- a/samples/react-global-news-sp2019/README.md +++ b/samples/react-global-news-sp2019/README.md @@ -32,7 +32,7 @@ Please go to https://newsapi.org to get more information. -# Compatibility +## Compatibility ![SPFx 1.4.1](https://img.shields.io/badge/SPFx-1.4.1-green.svg) ![Node.js v8 | v6](https://img.shields.io/badge/Node.js-v8%20%7C%20v6-green.svg) diff --git a/samples/react-google-fit/README.md b/samples/react-google-fit/README.md index e2ae813d4..9b7a02262 100644 --- a/samples/react-google-fit/README.md +++ b/samples/react-google-fit/README.md @@ -42,7 +42,7 @@ Below NPM package is used to develop this sample. 1. react-google-authorize (https://www.npmjs.com/package/react-google-authorize) -# Compatibility +## Compatibility ![SPFx 1.7.1](https://img.shields.io/badge/SPFx-1.7.1-green.svg) ![Node.js v8](https://img.shields.io/badge/Node.js-v8-green.svg) diff --git a/samples/react-graph-app-secret-expiration/.devcontainer/devcontainer.json b/samples/react-graph-app-secret-expiration/.devcontainer/devcontainer.json new file mode 100644 index 000000000..325cc1797 --- /dev/null +++ b/samples/react-graph-app-secret-expiration/.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.12.1", + "image": "docker.io/m365pnp/spfx:1.12.1", + // 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 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + // Not needed for SPFx>= 1.12.1 + // "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-app-secret-expiration/.devcontainer/spfx-startup.sh b/samples/react-graph-app-secret-expiration/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-graph-app-secret-expiration/.devcontainer/spfx-startup.sh @@ -0,0 +1,33 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer + +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-graph-app-secret-expiration/README.md b/samples/react-graph-app-secret-expiration/README.md index 1bd80c6be..ba4303b8c 100644 --- a/samples/react-graph-app-secret-expiration/README.md +++ b/samples/react-graph-app-secret-expiration/README.md @@ -14,6 +14,7 @@ I got the idea from this great article [Use Power Automate to Notify of Upcoming ![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg) ![Teams N/A: Untested with Microsoft Teams](https://img.shields.io/badge/Teams-N%2FA-lightgrey.svg "Untested with Microsoft Teams") ![Workbench Hosted: Does not work with local workbench](https://img.shields.io/badge/Workbench-Hosted-yellow.svg "Does not work with local workbench") +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -50,6 +51,8 @@ Version|Date|Comments - In the command-line run: - `gulp serve --nobrowser` +> 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-graph-auto-batching/README.md b/samples/react-graph-auto-batching/README.md index 5f117cca1..35067d900 100644 --- a/samples/react-graph-auto-batching/README.md +++ b/samples/react-graph-auto-batching/README.md @@ -56,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. + - Add Graph Auto Batching To run tests diff --git a/samples/react-graph-groupviewer/.devcontainer/devcontainer.json b/samples/react-graph-groupviewer/.devcontainer/devcontainer.json new file mode 100644 index 000000000..325cc1797 --- /dev/null +++ b/samples/react-graph-groupviewer/.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.12.1", + "image": "docker.io/m365pnp/spfx:1.12.1", + // 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 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + // Not needed for SPFx>= 1.12.1 + // "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-groupviewer/.devcontainer/spfx-startup.sh b/samples/react-graph-groupviewer/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-graph-groupviewer/.devcontainer/spfx-startup.sh @@ -0,0 +1,33 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer + +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-graph-groupviewer/README.md b/samples/react-graph-groupviewer/README.md index 8d207a97b..f59c6ddb0 100644 --- a/samples/react-graph-groupviewer/README.md +++ b/samples/react-graph-groupviewer/README.md @@ -13,6 +13,7 @@ This web part will provide the functionality to search for groups in your tenant ![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg) ![Teams N/A: Untested with Microsoft Teams](https://img.shields.io/badge/Teams-N%2FA-lightgrey.svg "Untested with Microsoft Teams") ![Workbench Hosted: Does not work with local workbench](https://img.shields.io/badge/Workbench-Hosted-yellow.svg "Does not work with local workbench") +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -53,6 +54,8 @@ There are no prerequisites to use this web part. * `gulp serve --nobrowser` * browse to your hosted workbench and add the 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 Web Part illustrates the following concepts on top of the SharePoint Framework: diff --git a/samples/react-graph-personalemail/README.md b/samples/react-graph-personalemail/README.md index 88a97c260..3fe2c52b5 100644 --- a/samples/react-graph-personalemail/README.md +++ b/samples/react-graph-personalemail/README.md @@ -7,7 +7,7 @@ Sample React web part showing how to retrieve and display personal e-mail retrie ![SharePoint Framework web part showing latest personal e-mails](./assets/preview.png) -# Compatibility +## Compatibility ![SPFx 1.6](https://img.shields.io/badge/SPFx-1.6.0-green.svg) ![Node.js v8 | v6](https://img.shields.io/badge/Node.js-v8%20%7C%20v6-green.svg) diff --git a/samples/react-graph-pnpjs/README.md b/samples/react-graph-pnpjs/README.md index 0c233af83..58411f9cf 100644 --- a/samples/react-graph-pnpjs/README.md +++ b/samples/react-graph-pnpjs/README.md @@ -8,7 +8,7 @@ It requests a list of Azure AD [groups](https://docs.microsoft.com/en-us/graph/a -# Compatibility +## Compatibility ![SPFx 1.7.1](https://img.shields.io/badge/SPFx-1.7.1-green.svg) ![Node.js v8](https://img.shields.io/badge/Node.js-v8-green.svg) diff --git a/samples/react-graph-reports/README.md b/samples/react-graph-reports/README.md index 55770e60d..5ac77fb3b 100644 --- a/samples/react-graph-reports/README.md +++ b/samples/react-graph-reports/README.md @@ -7,7 +7,7 @@ This sample describe a SPFx application which retrieve an office 365 usage repor ![Office 365 Usage Reports using Microsoft Graph API](./assets/react-graph-reports.gif) -# Compatibility +## Compatibility ![SPFx 1.8](https://img.shields.io/badge/SPFx-1.8.0-green.svg) ![Node.js v8](https://img.shields.io/badge/Node.js-v8-green.svg) diff --git a/samples/react-graph-schema-extensions/README.md b/samples/react-graph-schema-extensions/README.md index 341a5b7f5..5961b02fe 100644 --- a/samples/react-graph-schema-extensions/README.md +++ b/samples/react-graph-schema-extensions/README.md @@ -11,7 +11,7 @@ Office 365 Groups, for instance Sales information, and make it available in the ![Custom Schema Extension Web part](./assets/webpart.png) -# Compatibility +## Compatibility ![SPFx 1.5.1](https://img.shields.io/badge/SPFx-1.5.1-green.svg) ![Node.js v8 | v6](https://img.shields.io/badge/Node.js-v8%20%7C%20v6-green.svg) diff --git a/samples/react-groups-teams/.devcontainer/devcontainer.json b/samples/react-groups-teams/.devcontainer/devcontainer.json new file mode 100644 index 000000000..325cc1797 --- /dev/null +++ b/samples/react-groups-teams/.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.12.1", + "image": "docker.io/m365pnp/spfx:1.12.1", + // 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 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + // Not needed for SPFx>= 1.12.1 + // "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-groups-teams/.devcontainer/spfx-startup.sh b/samples/react-groups-teams/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-groups-teams/.devcontainer/spfx-startup.sh @@ -0,0 +1,33 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer + +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-groups-teams/README.md b/samples/react-groups-teams/README.md index dd29e46d2..73e285d65 100644 --- a/samples/react-groups-teams/README.md +++ b/samples/react-groups-teams/README.md @@ -33,6 +33,7 @@ Web part pulls all Microsoft 365 Groups and Teams that the logged in user has ac ![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 Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "This solution requires API permissions") ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-yellow.svg "Only after API permissions granted") +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -84,6 +85,8 @@ React-Groups-Teams | [Alison Collins](https://github.com/ReactIntern) ([Blog](ht - Open hosted workbench, i.e. `https://.sharepoint.com/sites//_layouts/15/workbench.aspx` - Search and add `O365 Groups Manager` web part to see it in action +> 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 project contains sample client-side web part built on the SharePoint Framework illustrating possibilities to quickly gain access to features in Microsoft 365 Groups and Teams using React and MS Graph. diff --git a/samples/react-hero-webpart/.devcontainer/devcontainer.json b/samples/react-hero-webpart/.devcontainer/devcontainer.json new file mode 100644 index 000000000..325cc1797 --- /dev/null +++ b/samples/react-hero-webpart/.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.12.1", + "image": "docker.io/m365pnp/spfx:1.12.1", + // 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 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + // Not needed for SPFx>= 1.12.1 + // "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-hero-webpart/.devcontainer/spfx-startup.sh b/samples/react-hero-webpart/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-hero-webpart/.devcontainer/spfx-startup.sh @@ -0,0 +1,33 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer + +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-hero-webpart/README.md b/samples/react-hero-webpart/README.md index 7ae463947..d45161bfb 100644 --- a/samples/react-hero-webpart/README.md +++ b/samples/react-hero-webpart/README.md @@ -14,6 +14,7 @@ This solution creates a customisable Hero web part, it uses a stored collection ![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg) ![Teams N/A: Untested with Microsoft Teams](https://img.shields.io/badge/Teams-N%2FA-lightgrey.svg "Untested with Microsoft Teams") ![Workbench Hosted: Does not work with local workbench](https://img.shields.io/badge/Workbench-Hosted-yellow.svg "Does not work with local workbench") +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -45,6 +46,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 Description of the extension that expands upon high-level summary above. diff --git a/samples/react-hooks/README.md b/samples/react-hooks/README.md index 722bd8971..df6db7a4b 100644 --- a/samples/react-hooks/README.md +++ b/samples/react-hooks/README.md @@ -7,7 +7,7 @@ Hooks is a new feature included in React version 16.8, with the new version of * -# Compatibility +## Compatibility ![SPFx 1.9.1](https://img.shields.io/badge/SPFx-1.9.1-green.svg) ![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) diff --git a/samples/react-htm-templating/.devcontainer/devcontainer.json b/samples/react-htm-templating/.devcontainer/devcontainer.json new file mode 100644 index 000000000..325cc1797 --- /dev/null +++ b/samples/react-htm-templating/.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.12.1", + "image": "docker.io/m365pnp/spfx:1.12.1", + // 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 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + // Not needed for SPFx>= 1.12.1 + // "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-htm-templating/.devcontainer/spfx-startup.sh b/samples/react-htm-templating/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-htm-templating/.devcontainer/spfx-startup.sh @@ -0,0 +1,33 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer + +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-htm-templating/README.md b/samples/react-htm-templating/README.md index 4a55e7457..be48df72e 100644 --- a/samples/react-htm-templating/README.md +++ b/samples/react-htm-templating/README.md @@ -15,6 +15,7 @@ This Web Part provides an example of how to create a dynamic template system (co ![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 @@ -40,6 +41,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 example born from the need to have a template system that can directly use the "Fluent UI" components (or other components) written in React, without the need to use any wrapper such as, for example, encapsulating the rendering of components via Web Components. diff --git a/samples/react-image-gallery/README.md b/samples/react-image-gallery/README.md index 3978cecfa..053715952 100644 --- a/samples/react-image-gallery/README.md +++ b/samples/react-image-gallery/README.md @@ -7,7 +7,7 @@ This sample describes an SPFx application which implements an image gallery with ![Filterable Image Gallery web part built on the SharePoint Framework using React](./assets/image-gallery.gif) -# Compatibility +## Compatibility ![SPFx 1.6](https://img.shields.io/badge/SPFx-1.6.0-green.svg) ![Node.js v8 | v6](https://img.shields.io/badge/Node.js-v8%20%7C%20v6-green.svg) diff --git a/samples/react-image-slider-list-taxonomy-filter/README.md b/samples/react-image-slider-list-taxonomy-filter/README.md index c051f8843..9f5ff6b38 100644 --- a/samples/react-image-slider-list-taxonomy-filter/README.md +++ b/samples/react-image-slider-list-taxonomy-filter/README.md @@ -10,7 +10,7 @@ This web part display the image in slider based on the filter of Taxonomy from P ![preview](./assets/ImageSlider.gif) -# Compatibility +## Compatibility ![SPFx 1.6](https://img.shields.io/badge/SPFx-1.6.0-green.svg) ![Node.js v8 | v6](https://img.shields.io/badge/Node.js-v8%20%7C%20v6-green.svg) diff --git a/samples/react-invitation-manager/README.md b/samples/react-invitation-manager/README.md index 8f93bc7ba..5a434fc74 100644 --- a/samples/react-invitation-manager/README.md +++ b/samples/react-invitation-manager/README.md @@ -34,7 +34,7 @@ Look at this to go deep: ![The invitation manager web part displayed in SharePoint workbench](./assets/SPFx-Invitation-Manager.gif) -# Compatibility +## Compatibility ![SPFx 1.3](https://img.shields.io/badge/SPFx-1.3.0-green.svg) ![Node.js v6](https://img.shields.io/badge/Node.js-v6-green.svg) diff --git a/samples/react-kanban-board/README.md b/samples/react-kanban-board/README.md index b9a028d94..229dadb74 100644 --- a/samples/react-kanban-board/README.md +++ b/samples/react-kanban-board/README.md @@ -34,6 +34,7 @@ The web part uses the default columns of the SharePoint Tasks list for showing t ![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 Unsupported](https://img.shields.io/badge/Local%20Workbench-Unsupported-red.svg "Local workbench is no longer available as of SPFx 1.13 and above") ![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-list-items-menu/README.md b/samples/react-list-items-menu/README.md index db3da0b51..a691dfc32 100644 --- a/samples/react-list-items-menu/README.md +++ b/samples/react-list-items-menu/README.md @@ -24,6 +24,7 @@ When the user clicks on the header it dynamically load documents. ![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 Unsupported](https://img.shields.io/badge/Local%20Workbench-Unsupported-red.svg "Local workbench is no longer available as of SPFx 1.13 and above") ![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-list-search/.devcontainer/devcontainer.json b/samples/react-list-search/.devcontainer/devcontainer.json new file mode 100644 index 000000000..3e7ba6ebb --- /dev/null +++ b/samples/react-list-search/.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.13.1", + "image": "docker.io/m365pnp/spfx:1.13.1", + // 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 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + // Not needed for SPFx>= 1.12.1 + // "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-search/.devcontainer/spfx-startup.sh b/samples/react-list-search/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-list-search/.devcontainer/spfx-startup.sh @@ -0,0 +1,33 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer + +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-list-search/README.md b/samples/react-list-search/README.md index dc47aac05..6afafa10c 100644 --- a/samples/react-list-search/README.md +++ b/samples/react-list-search/README.md @@ -66,6 +66,7 @@ This list search web part allows the user to show data from lists or libraries. ![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 SharePoint lists and libraries") ![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 @@ -90,6 +91,8 @@ Version|Date|Comments ### Dev Mode +> 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: * Navigate to `list-search-webpart` diff --git a/samples/react-manage-sitedesigns/README.md b/samples/react-manage-sitedesigns/README.md index ca9b90ceb..f66f8b440 100644 --- a/samples/react-manage-sitedesigns/README.md +++ b/samples/react-manage-sitedesigns/README.md @@ -85,7 +85,7 @@ Only users with Tenant Admin Role are allowed to managed tenant properties. ![tenant properties](./assets/screen17.jpg) -# Compatibility +## Compatibility ![SPFx 1.8](https://img.shields.io/badge/SPFx-1.8.0-green.svg) ![Node.js v8](https://img.shields.io/badge/Node.js-v8-green.svg) diff --git a/samples/react-manage-spfx-solutions-alm/README.md b/samples/react-manage-spfx-solutions-alm/README.md index 3c6fec23c..329a5489a 100644 --- a/samples/react-manage-spfx-solutions-alm/README.md +++ b/samples/react-manage-spfx-solutions-alm/README.md @@ -16,7 +16,7 @@ This web part acts as a centralized place where admin can manage SPFx solutions **Note:** This web part is mainly build for tenant and SharePoint admins, since most of the operation requires administrator privileges. -# Compatibility +## Compatibility ![SPFx 1.10](https://img.shields.io/badge/SPFx-1.10.0-green.svg) ![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) diff --git a/samples/react-material-ui/README.md b/samples/react-material-ui/README.md index 2dec1be77..626a820c7 100644 --- a/samples/react-material-ui/README.md +++ b/samples/react-material-ui/README.md @@ -7,7 +7,7 @@ This sample also includes RXJS DebounceTime, this feature allows you to wait for ![react-command-print](./assets/screenshot.gif) -# Compatibility +## Compatibility ![SPFx 1.8.1](https://img.shields.io/badge/SPFx-1.8.1-green.svg) ![Node.js v8](https://img.shields.io/badge/Node.js-v8-green.svg) diff --git a/samples/react-members-with-presence/README.md b/samples/react-members-with-presence/README.md index a7e959149..f880b349e 100644 --- a/samples/react-members-with-presence/README.md +++ b/samples/react-members-with-presence/README.md @@ -7,7 +7,7 @@ This sample shows how to get the members of a specific group, including their pr ![Members with Presence](./assets/react-members-with-presence.gif) -# Compatibility +## Compatibility ![SPFx 1.9.1](https://img.shields.io/badge/SPFx-1.9.1-green.svg) ![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) diff --git a/samples/react-mobx-multiple-stores/README.md b/samples/react-mobx-multiple-stores/README.md index ba43bc1dd..ab72393d8 100644 --- a/samples/react-mobx-multiple-stores/README.md +++ b/samples/react-mobx-multiple-stores/README.md @@ -7,7 +7,7 @@ A sample web part that uses the [Mobx](https://mobx.js.org/) library with multip -# Compatibility +## Compatibility ![SPFx 1.8.2](https://img.shields.io/badge/SPFx-1.8.2-green.svg) ![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) diff --git a/samples/react-modern-organization-chart/README.md b/samples/react-modern-organization-chart/README.md index a86828952..2194298e4 100644 --- a/samples/react-modern-organization-chart/README.md +++ b/samples/react-modern-organization-chart/README.md @@ -35,7 +35,7 @@ Property |Type|Required| comments Title | Text| no| Refresh Status Interval in minutes | number| no | default value 5 min -# Compatibility +## Compatibility ![SPFx 1.10](https://img.shields.io/badge/SPFx-1.10.0-green.svg) ![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) diff --git a/samples/react-msgraph-extension/README.md b/samples/react-msgraph-extension/README.md index b0b6c7cac..fff383601 100644 --- a/samples/react-msgraph-extension/README.md +++ b/samples/react-msgraph-extension/README.md @@ -13,7 +13,7 @@ This sample shows how to managed Microsoft Graph Open Extension in SPFx. This ap -# Compatibility +## Compatibility ![SPFx 1.9.1](https://img.shields.io/badge/SPFx-1.9.1-green.svg) ![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) diff --git a/samples/react-multimedia-gallery/README.md b/samples/react-multimedia-gallery/README.md index f338df8d7..ad1f14f45 100644 --- a/samples/react-multimedia-gallery/README.md +++ b/samples/react-multimedia-gallery/README.md @@ -26,7 +26,7 @@ It uses Microsoft Graph API to get thumbnails and image/video url and use PnPjs ![gallery](/samples/react-multimedia-gallery/assets/Screenshot2.png) -# Compatibility +## Compatibility ![SPFx 1.10](https://img.shields.io/badge/SPFx-1.10.0-green.svg) ![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) diff --git a/samples/react-multiscreen-webpart/.devcontainer/devcontainer.json b/samples/react-multiscreen-webpart/.devcontainer/devcontainer.json new file mode 100644 index 000000000..325cc1797 --- /dev/null +++ b/samples/react-multiscreen-webpart/.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.12.1", + "image": "docker.io/m365pnp/spfx:1.12.1", + // 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 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + // Not needed for SPFx>= 1.12.1 + // "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-multiscreen-webpart/.devcontainer/spfx-startup.sh b/samples/react-multiscreen-webpart/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-multiscreen-webpart/.devcontainer/spfx-startup.sh @@ -0,0 +1,33 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer + +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-multiscreen-webpart/README.md b/samples/react-multiscreen-webpart/README.md index 30aedfd24..4912d1e46 100644 --- a/samples/react-multiscreen-webpart/README.md +++ b/samples/react-multiscreen-webpart/README.md @@ -23,6 +23,7 @@ The web part utilizes the usage of hashes in the URL so different screen will be ![Teams N/A: Untested with Microsoft Teams](https://img.shields.io/badge/Teams-N%2FA-lightgrey.svg "Untested with Microsoft Teams") ![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 @@ -55,6 +56,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. + ## Usefull links - [React Router](https://github.com/ReactTraining/react-router#readme) diff --git a/samples/react-my-approvals/README.md b/samples/react-my-approvals/README.md index aaea0c215..6fa39cdeb 100644 --- a/samples/react-my-approvals/README.md +++ b/samples/react-my-approvals/README.md @@ -16,6 +16,7 @@ This web part demonstrates displaying the list of approval requests of Power Aut ![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 Unsupported](https://img.shields.io/badge/Local%20Workbench-Unsupported-red.svg "Local workbench is no longer available as of SPFx 1.13 and above") ![Hosted Workbench Compatible (with permissions)](https://img.shields.io/badge/Hosted%20Workbench-Compatible-yellow.svg "Requires API permissions") +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) > NodeJS version must match >=10.13.0 <11.0.0 on >=12.13.0 <13.0.0 or >=14.15.0 <15.0.0 ## Prerequisites diff --git a/samples/react-my-events/.devcontainer/devcontainer.json b/samples/react-my-events/.devcontainer/devcontainer.json new file mode 100644 index 000000000..325cc1797 --- /dev/null +++ b/samples/react-my-events/.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.12.1", + "image": "docker.io/m365pnp/spfx:1.12.1", + // 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 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + // Not needed for SPFx>= 1.12.1 + // "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-events/.devcontainer/spfx-startup.sh b/samples/react-my-events/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-my-events/.devcontainer/spfx-startup.sh @@ -0,0 +1,33 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer + +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-my-events/README.md b/samples/react-my-events/README.md index 8d0e51ca2..9d18e86f6 100644 --- a/samples/react-my-events/README.md +++ b/samples/react-my-events/README.md @@ -26,6 +26,7 @@ This web part provides loggedin user's outlook events with some advanced feature ![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 Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "This solution requires access to user's Outlook events") ![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 @@ -73,6 +74,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. + ## References - [Getting started with SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant) diff --git a/samples/react-my-groups/README.md b/samples/react-my-groups/README.md index 35941b87e..7e6c2b66d 100644 --- a/samples/react-my-groups/README.md +++ b/samples/react-my-groups/README.md @@ -29,7 +29,7 @@ You can change between the grid and compact layout through the settings in the p ![Property Pane Demo](./assets/React-MyGroups_Property.png) -# Compatibility +## Compatibility ![SPFx 1.10](https://img.shields.io/badge/SPFx-1.10.0-green.svg) ![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) diff --git a/samples/react-my-personal-apps/README.md b/samples/react-my-personal-apps/README.md index 733ca9e65..eb43c2ef3 100644 --- a/samples/react-my-personal-apps/README.md +++ b/samples/react-my-personal-apps/README.md @@ -49,7 +49,7 @@ This Web Part uses MSgraph Open Extension to save the personal information on us ![PersonalApps](./assets/Image10.png) -# Compatibility +## Compatibility ![SPFx 1.10](https://img.shields.io/badge/SPFx-1.10.0-green.svg) ![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) diff --git a/samples/react-my-teams/README.md b/samples/react-my-teams/README.md index c7363c1df..1340c6ea4 100644 --- a/samples/react-my-teams/README.md +++ b/samples/react-my-teams/README.md @@ -8,13 +8,14 @@ The web part can be configured to open the team on the web browser or client app ![Demo](./assets/Preview.png) -# Compatibility +## Compatibility ![SPFx 1.13.1](https://img.shields.io/badge/SPFx-1.13.1-green.svg) ![Node.js v14](https://img.shields.io/badge/Node.js-v14-green.svg) ![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg) ![Compatible with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Compatible-green.svg) ![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") +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to diff --git a/samples/react-myonedrive/.devcontainer/devcontainer.json b/samples/react-myonedrive/.devcontainer/devcontainer.json new file mode 100644 index 000000000..325cc1797 --- /dev/null +++ b/samples/react-myonedrive/.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.12.1", + "image": "docker.io/m365pnp/spfx:1.12.1", + // 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 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + // Not needed for SPFx>= 1.12.1 + // "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-myonedrive/.devcontainer/spfx-startup.sh b/samples/react-myonedrive/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-myonedrive/.devcontainer/spfx-startup.sh @@ -0,0 +1,33 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer + +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-myonedrive/README.md b/samples/react-myonedrive/README.md index 602f9e297..65813d19e 100644 --- a/samples/react-myonedrive/README.md +++ b/samples/react-myonedrive/README.md @@ -75,6 +75,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. + ## References diff --git a/samples/react-news/.devcontainer/devcontainer.json b/samples/react-news/.devcontainer/devcontainer.json new file mode 100644 index 000000000..325cc1797 --- /dev/null +++ b/samples/react-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.12.1", + "image": "docker.io/m365pnp/spfx:1.12.1", + // 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 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + // Not needed for SPFx>= 1.12.1 + // "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-news/.devcontainer/spfx-startup.sh b/samples/react-news/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-news/.devcontainer/spfx-startup.sh @@ -0,0 +1,33 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer + +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-news/README.md b/samples/react-news/README.md index 6c8dd5383..f7f2496c8 100644 --- a/samples/react-news/README.md +++ b/samples/react-news/README.md @@ -29,6 +29,7 @@ Web part pulls all SharePoint News Posts that the logged in user has access to v ![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg) ![Teams N/A: Untested with Microsoft Teams](https://img.shields.io/badge/Teams-N%2FA-lightgrey.svg "Untested with Microsoft Teams") ![Workbench Hosted: Only after API permissions granted](https://img.shields.io/badge/Workbench-Hosted-yellow.svg "Only after API permissions granted") +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to diff --git a/samples/react-outlook-add-todo-task/README.md b/samples/react-outlook-add-todo-task/README.md index 822aaedc0..c1154133f 100644 --- a/samples/react-outlook-add-todo-task/README.md +++ b/samples/react-outlook-add-todo-task/README.md @@ -44,7 +44,7 @@ POST https://graph.microsoft.com/beta/me/todo/lists/{listId}/tasks } ``` -# Compatibility +## Compatibility ![SPFx 1.10](https://img.shields.io/badge/SPFx-1.10.0-green.svg) ![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) diff --git a/samples/react-outlook-copy2teams/README.md b/samples/react-outlook-copy2teams/README.md index 9b0a8665a..6955d7828 100644 --- a/samples/react-outlook-copy2teams/README.md +++ b/samples/react-outlook-copy2teams/README.md @@ -14,7 +14,7 @@ Furthermore it shows you how to retrieve a complete mail as a mimestream via Mic A detailed functionality and technical description can be found in the [author's blog series](https://mmsharepoint.wordpress.com/2020/01/11/an-outlook-add-in-with-sharepoint-framework-spfx-introduction/) # -# Compatibility +## Compatibility ![SPFx 1.10](https://img.shields.io/badge/SPFx-1.10.0-green.svg) ![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) diff --git a/samples/react-page-navigator/.devcontainer/devcontainer.json b/samples/react-page-navigator/.devcontainer/devcontainer.json new file mode 100644 index 000000000..325cc1797 --- /dev/null +++ b/samples/react-page-navigator/.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.12.1", + "image": "docker.io/m365pnp/spfx:1.12.1", + // 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 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + // Not needed for SPFx>= 1.12.1 + // "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-page-navigator/.devcontainer/spfx-startup.sh b/samples/react-page-navigator/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-page-navigator/.devcontainer/spfx-startup.sh @@ -0,0 +1,33 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer + +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-page-navigator/README.md b/samples/react-page-navigator/README.md index d13ddea26..b5b849191 100644 --- a/samples/react-page-navigator/README.md +++ b/samples/react-page-navigator/README.md @@ -17,6 +17,7 @@ When added to a Vertical Section it can be used as a Contents table for the page ![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 page structure") ![Hosted Workbench Partially](https://img.shields.io/badge/Hosted%20Workbench-Partially-yellow.svg "The solution needs to run on a hosted page to work as intended") +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Version history @@ -34,6 +35,8 @@ Version|Date|Comments - Add the app package to Site Collection App Catalog and Install the App - Add the web part to a 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-page-sections-navigation/README.md b/samples/react-page-sections-navigation/README.md index f01a38d81..016c15510 100644 --- a/samples/react-page-sections-navigation/README.md +++ b/samples/react-page-sections-navigation/README.md @@ -5,7 +5,7 @@ Sample web parts allowing to add sections navigation to the SharePoint page. ![Navigation configuration](./assets/page-nav.gif) -# Compatibility +## Compatibility ![SPFx 1.8](https://img.shields.io/badge/SPFx-1.8.0-green.svg) ![Node.js v8](https://img.shields.io/badge/Node.js-v8-green.svg) diff --git a/samples/react-pagecontributors/.devcontainer/devcontainer.json b/samples/react-pagecontributors/.devcontainer/devcontainer.json new file mode 100644 index 000000000..325cc1797 --- /dev/null +++ b/samples/react-pagecontributors/.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.12.1", + "image": "docker.io/m365pnp/spfx:1.12.1", + // 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 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + // Not needed for SPFx>= 1.12.1 + // "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-pagecontributors/.devcontainer/spfx-startup.sh b/samples/react-pagecontributors/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-pagecontributors/.devcontainer/spfx-startup.sh @@ -0,0 +1,33 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer + +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-pagecontributors/README.md b/samples/react-pagecontributors/README.md index da07d1458..4bbb3cc7d 100644 --- a/samples/react-pagecontributors/README.md +++ b/samples/react-pagecontributors/README.md @@ -30,6 +30,7 @@ Displays page contributors in reverse chronological order. ![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg) ![Teams N/A: Untested with Microsoft Teams](https://img.shields.io/badge/Teams-N%2FA-lightgrey.svg "Untested with Microsoft Teams") ![Workbench Local | Hosted](https://img.shields.io/badge/Workbench-Local%20%7C%20Hosted-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 Settings : diff --git a/samples/react-pages-hierarchy/README.md b/samples/react-pages-hierarchy/README.md index 00eb85c95..36267337d 100644 --- a/samples/react-pages-hierarchy/README.md +++ b/samples/react-pages-hierarchy/README.md @@ -22,7 +22,7 @@ This web part allows users to create a faux page hierarchy in their pages librar ![Page Navigator](./assets/PagesHierarchy.gif) -# Compatibility +## Compatibility ![SPFx 1.10](https://img.shields.io/badge/SPFx-1.10.0-green.svg) ![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) diff --git a/samples/react-pnp-controls-list-view-fields/README.md b/samples/react-pnp-controls-list-view-fields/README.md index fd5db0562..5691c2347 100644 --- a/samples/react-pnp-controls-list-view-fields/README.md +++ b/samples/react-pnp-controls-list-view-fields/README.md @@ -4,7 +4,7 @@ Sample web part to display PnP [`ListView`](https://sharepoint.github.io/sp-dev- ![PnP List View](./assets/web-part.png) -# Compatibility +## Compatibility ![SPFx 1.10](https://img.shields.io/badge/SPFx-1.10.0-green.svg) ![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) diff --git a/samples/react-private-libraries/README.md b/samples/react-private-libraries/README.md index dd01ba550..057a63cfd 100644 --- a/samples/react-private-libraries/README.md +++ b/samples/react-private-libraries/README.md @@ -18,7 +18,7 @@ The application manages all the security groups set up for the various libraries ![Configuration](assets/Configuration.PNG "Configuration") -# Compatibility +## Compatibility ![SPFx 1.10](https://img.shields.io/badge/SPFx-1.10.0-green.svg) ![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) diff --git a/samples/react-project-online/README.md b/samples/react-project-online/README.md index ff5be8e0b..8efa8b8f1 100644 --- a/samples/react-project-online/README.md +++ b/samples/react-project-online/README.md @@ -24,7 +24,7 @@ The web part is currently returning project tasks as a simple proof of concept. ![Demo](./assets/Preview.gif) -# Compatibility +## Compatibility ![SPFx 1.10](https://img.shields.io/badge/SPFx-1.10.0-green.svg) ![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) diff --git a/samples/react-quotes/README.md b/samples/react-quotes/README.md index 3ff1cf1ce..e6eb8a752 100644 --- a/samples/react-quotes/README.md +++ b/samples/react-quotes/README.md @@ -7,7 +7,7 @@ This web part displays a quote of the day by querying a third-party api or can d ![picture of the web part in action](./assets/react-quotes-sample.png) -# Compatibility +## Compatibility ![SPFx 1.13.1](https://img.shields.io/badge/SPFx-1.13.1-green.svg) ![Node.js v14](https://img.shields.io/badge/Node.js-v14-green.svg) diff --git a/samples/react-recaptcha/README.md b/samples/react-recaptcha/README.md index a6753b9fb..592346286 100644 --- a/samples/react-recaptcha/README.md +++ b/samples/react-recaptcha/README.md @@ -10,7 +10,7 @@ business requirement if you need to implement CAPTCHA in SPFx web part. ![web part in action](screens/WebpartInAction.gif?raw=true "web part in action") -# Compatibility +## Compatibility ![SPFx 1.9.1](https://img.shields.io/badge/SPFx-1.9.1-green.svg) ![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) diff --git a/samples/react-reduxform/README.md b/samples/react-reduxform/README.md index 826d15015..388b03534 100644 --- a/samples/react-reduxform/README.md +++ b/samples/react-reduxform/README.md @@ -9,7 +9,7 @@ Sample web part to demonstrate the use of [Redux-Form](https://github.com/erikra -# Compatibility +## Compatibility ![SPFx 1.4.1](https://img.shields.io/badge/SPFx-1.4.1-green.svg) ![Node.js v8 | v6](https://img.shields.io/badge/Node.js-v8%20%7C%20v6-green.svg) diff --git a/samples/react-save-attachments/README.md b/samples/react-save-attachments/README.md index ee0ed9153..22c03229f 100755 --- a/samples/react-save-attachments/README.md +++ b/samples/react-save-attachments/README.md @@ -18,6 +18,7 @@ This SPFx Outlook Add-In lets users save any email attachments to a OneDrive fol ![Local Workbench Unsupported](https://img.shields.io/badge/Local%20Workbench-Unsupported-red.svg "Local workbench is no longer available as of SPFx 1.13 and above") ![Hosted Workbench Partially](https://img.shields.io/badge/Hosted%20Workbench-Partially-yellow.svg "Designed to work in Outlook, but will display sample attachments while in workbench") ![Outlook Web Access Compatible ](https://img.shields.io/badge/Outlook%20Web%20Access-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Features diff --git a/samples/react-script-editor-onprem/README.md b/samples/react-script-editor-onprem/README.md index cbaeb0481..86429b095 100644 --- a/samples/react-script-editor-onprem/README.md +++ b/samples/react-script-editor-onprem/README.md @@ -98,7 +98,7 @@ You may add CSS via style tags or `link` tags. If your scripts rely on the classic _spPageContextInfo, you can enable that in the web part property pane. -# Compatibility +## Compatibility ![SPFx 1.4.1](https://img.shields.io/badge/SPFx-1.4.1-green.svg) ![Node.js v8 | v6](https://img.shields.io/badge/Node.js-v8%20%7C%20v6-green.svg) diff --git a/samples/react-script-editor/README.md b/samples/react-script-editor/README.md index 1e2dfe377..261b0a1b1 100644 --- a/samples/react-script-editor/README.md +++ b/samples/react-script-editor/README.md @@ -147,7 +147,7 @@ By default you have to install this web part per site collection where you want In order to make it available to absolutely all sites you need apply the _Deploy to non-script sites / modern team site_ change as well. -# Compatibility +## Compatibility ![SPFx 1.10](https://img.shields.io/badge/SPFx-1.10.0-green.svg) ![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) diff --git a/samples/react-securitygrid/README.md b/samples/react-securitygrid/README.md index ea29b60f7..699fe16af 100644 --- a/samples/react-securitygrid/README.md +++ b/samples/react-securitygrid/README.md @@ -80,7 +80,7 @@ The admin can select lists and libraries below to have them included/excluded fr This is a port of an Angular 1.3 SharePoint hosted App at https://github.com/russgove/SPSecurity. -# Compatibility +## Compatibility ![SPFx 1.10](https://img.shields.io/badge/SPFx-1.10.0-green.svg) ![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) diff --git a/samples/react-site-provisioning-manager/README.md b/samples/react-site-provisioning-manager/README.md index c6d9f3c08..f2fe456c2 100644 --- a/samples/react-site-provisioning-manager/README.md +++ b/samples/react-site-provisioning-manager/README.md @@ -9,7 +9,7 @@ You can also find out how you can use React Hooks to manage the state of your ap ![react-provisioning-manager](./assets/screenshot.gif) -# Compatibility +## Compatibility ![SPFx 1.9.1](https://img.shields.io/badge/SPFx-1.9.1-green.svg) ![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) diff --git a/samples/react-spupsproperty-sync/README.md b/samples/react-spupsproperty-sync/README.md index 7357a9423..d80fc697a 100644 --- a/samples/react-spupsproperty-sync/README.md +++ b/samples/react-spupsproperty-sync/README.md @@ -53,7 +53,7 @@ This component will help the administrators who are currently maintaining the us ## Preview ![SPUPS-Property-Sync](./assets/SPUPS-Sync.gif) -# Compatibility +## Compatibility ![SPFx 1.10](https://img.shields.io/badge/SPFx-1.10.0-green.svg) ![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) diff --git a/samples/react-star-ratings/.devcontainer/devcontainer.json b/samples/react-star-ratings/.devcontainer/devcontainer.json new file mode 100644 index 000000000..325cc1797 --- /dev/null +++ b/samples/react-star-ratings/.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.12.1", + "image": "docker.io/m365pnp/spfx:1.12.1", + // 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 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + // Not needed for SPFx>= 1.12.1 + // "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-star-ratings/.devcontainer/spfx-startup.sh b/samples/react-star-ratings/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-star-ratings/.devcontainer/spfx-startup.sh @@ -0,0 +1,33 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer + +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-star-ratings/README.md b/samples/react-star-ratings/README.md index cbffa8a78..f54f5bf94 100644 --- a/samples/react-star-ratings/README.md +++ b/samples/react-star-ratings/README.md @@ -15,6 +15,7 @@ This web part demonstrates *Star Ratings* capablities to SharePoint News. The "R ![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 "This solution requires the ratings feature from SharePoint Online") ![Hosted Workbench Not Compatible](https://img.shields.io/badge/Hosted%20Workbench-Not-Compatible-red.svg "This web part needs to run on a page") +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Prerequisites diff --git a/samples/react-taxonomy-file-explorer/README.md b/samples/react-taxonomy-file-explorer/README.md index 94be5abff..ffdff14b5 100644 --- a/samples/react-taxonomy-file-explorer/README.md +++ b/samples/react-taxonomy-file-explorer/README.md @@ -34,6 +34,7 @@ For further details see the author's [blog post](https://mmsharepoint.wordpress. ![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 Unsupported](https://img.shields.io/badge/Local%20Workbench-Unsupported-red.svg "Local workbench is no longer available as of SPFx 1.13 and above") ![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-teams-configure-tab/README.md b/samples/react-teams-configure-tab/README.md index 593eab39c..5e7442a82 100644 --- a/samples/react-teams-configure-tab/README.md +++ b/samples/react-teams-configure-tab/README.md @@ -11,7 +11,7 @@ When the user selects one of the tab options, the tab is saved pointing to the c ![Tab configuration](documentation/images/SPTabAppStudioTeamsTab007.png) -# Compatibility +## Compatibility ![SPFx 1.9.1](https://img.shields.io/badge/SPFx-1.9.1-green.svg) ![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) diff --git a/samples/react-teams-graph-upload-as-pdf/README.md b/samples/react-teams-graph-upload-as-pdf/README.md index 2c8f1a9e1..44fb108b0 100644 --- a/samples/react-teams-graph-upload-as-pdf/README.md +++ b/samples/react-teams-graph-upload-as-pdf/README.md @@ -22,6 +22,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 Unsupported](https://img.shields.io/badge/Local%20Workbench-Unsupported-red.svg "Local workbench is no longer available as of SPFx 1.13 and above") ![Hosted Workbench Compatible (with Permissions)](https://img.shields.io/badge/Hosted%20Workbench-Compatible%20(with%20permissions)-yellow.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to diff --git a/samples/react-teams-lead-dashboard/.devcontainer/devcontainer.json b/samples/react-teams-lead-dashboard/.devcontainer/devcontainer.json new file mode 100644 index 000000000..325cc1797 --- /dev/null +++ b/samples/react-teams-lead-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.12.1", + "image": "docker.io/m365pnp/spfx:1.12.1", + // 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 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + // Not needed for SPFx>= 1.12.1 + // "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-lead-dashboard/.devcontainer/spfx-startup.sh b/samples/react-teams-lead-dashboard/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-teams-lead-dashboard/.devcontainer/spfx-startup.sh @@ -0,0 +1,33 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer + +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-teams-lead-dashboard/README.md b/samples/react-teams-lead-dashboard/README.md index 0126cc9fc..41658b5ae 100644 --- a/samples/react-teams-lead-dashboard/README.md +++ b/samples/react-teams-lead-dashboard/README.md @@ -7,7 +7,7 @@ This sample shows how to integrate SharePoint Framework, PnP React Controls, and ![Lead Assist Dashboard](./assets/LeadAssistDashboard_overview.png) -# Compatibility +## Compatibility ![SPFx 1.12.1](https://img.shields.io/badge/SPFx-1.12.1-green.svg) ![Node.js v14 | v12 | v10](https://img.shields.io/badge/Node.js-v14%20%7C%20v12%20%7C%20v10-green.svg) @@ -16,6 +16,7 @@ This sample shows how to integrate SharePoint Framework, PnP React Controls, and ![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 @@ -49,6 +50,8 @@ Version|Date|Comments - Add the web part to a SharePoint page - In the first run the web part will ask for the target SharePoint site URL +> 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. + If needed: - Using the control panel of the web part - Create the SharePoint demo lists diff --git a/samples/react-teams-meeting-app-questionnaire/.devcontainer/devcontainer.json b/samples/react-teams-meeting-app-questionnaire/.devcontainer/devcontainer.json new file mode 100644 index 000000000..325cc1797 --- /dev/null +++ b/samples/react-teams-meeting-app-questionnaire/.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.12.1", + "image": "docker.io/m365pnp/spfx:1.12.1", + // 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 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + // Not needed for SPFx>= 1.12.1 + // "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-meeting-app-questionnaire/.devcontainer/spfx-startup.sh b/samples/react-teams-meeting-app-questionnaire/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-teams-meeting-app-questionnaire/.devcontainer/spfx-startup.sh @@ -0,0 +1,33 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer + +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-teams-meeting-app-questionnaire/README.md b/samples/react-teams-meeting-app-questionnaire/README.md index f3fc88061..d0d64b29f 100644 --- a/samples/react-teams-meeting-app-questionnaire/README.md +++ b/samples/react-teams-meeting-app-questionnaire/README.md @@ -48,8 +48,10 @@ spfx-react-teams-meeting-app-questionnaire ``` ## Compatibility +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Compatibility +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ![SPFx 1.12.1](https://img.shields.io/badge/SPFx-1.12.1-green.svg) ![Node.js v14 | v12 | v10](https://img.shields.io/badge/Node.js-v14%20%7C%20v12%20%7C%20v10-green.svg) @@ -95,6 +97,8 @@ MeetingID|MeetingID|Single line of text|N| ### SharePoint deployment +> 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 repo - Navigate to the folder with current sample - Restore dependencies: `$ npm i` diff --git a/samples/react-teams-membership-updater/.devcontainer/devcontainer.json b/samples/react-teams-membership-updater/.devcontainer/devcontainer.json new file mode 100644 index 000000000..325cc1797 --- /dev/null +++ b/samples/react-teams-membership-updater/.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.12.1", + "image": "docker.io/m365pnp/spfx:1.12.1", + // 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 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + // Not needed for SPFx>= 1.12.1 + // "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-membership-updater/.devcontainer/spfx-startup.sh b/samples/react-teams-membership-updater/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-teams-membership-updater/.devcontainer/spfx-startup.sh @@ -0,0 +1,33 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer + +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-teams-membership-updater/README.md b/samples/react-teams-membership-updater/README.md index 53e96b002..513aca26d 100644 --- a/samples/react-teams-membership-updater/README.md +++ b/samples/react-teams-membership-updater/README.md @@ -17,6 +17,7 @@ Used to update the membership of a team based on the contents of a CSV file, can ![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg) ![Teams Yes: Designed for Microsoft Teams](https://img.shields.io/badge/Teams-Yes-green.svg "Designed for Microsoft Teams") ![Workbench Hosted: Does not work with local workbench](https://img.shields.io/badge/Workbench-Hosted-yellow.svg "Does not work with local workbench") +![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-teams-message/README.md b/samples/react-teams-message/README.md index aa033563d..8e4f1122e 100644 --- a/samples/react-teams-message/README.md +++ b/samples/react-teams-message/README.md @@ -44,7 +44,7 @@ Configurable Web part Properties * Please refer this [link](https://www.c-sharpcorner.com/article/microsoft-teams-operations-in-spfx-webpart-using-graph-api/) if you are interested in learning step by step on how to call Team graph API from SPFx web part. -# Compatibility +## Compatibility ![SPFx 1.10](https://img.shields.io/badge/SPFx-1.10.0-green.svg) ![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) diff --git a/samples/react-teams-personal-app-settings/README.md b/samples/react-teams-personal-app-settings/README.md index 74aa1e854..5fd11b88f 100644 --- a/samples/react-teams-personal-app-settings/README.md +++ b/samples/react-teams-personal-app-settings/README.md @@ -34,7 +34,7 @@ The provided sample demonstrates how it can be achieved using custom Settings Pa Downside of this approach is we need to additionally implement "app uninstalled" event to correctly remove properties from OneDrive list. -# Compatibility +## Compatibility ![SPFx 1.10](https://img.shields.io/badge/SPFx-1.10.0-green.svg) ![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) diff --git a/samples/react-teams-tab-field-visit-mashup/README.md b/samples/react-teams-tab-field-visit-mashup/README.md index a894dc89c..924a57f02 100644 --- a/samples/react-teams-tab-field-visit-mashup/README.md +++ b/samples/react-teams-tab-field-visit-mashup/README.md @@ -20,7 +20,7 @@ The solution demonstrates: ![Field Visit Demo](./documentation/FieldVisitDemo.png) -# Compatibility +## Compatibility ![SPFx 1.8](https://img.shields.io/badge/SPFx-1.8.0-green.svg) ![Node.js v8](https://img.shields.io/badge/Node.js-v8-green.svg) diff --git a/samples/react-teams-tagging/README.md b/samples/react-teams-tagging/README.md index 48bf1fe06..bd9c39aea 100644 --- a/samples/react-teams-tagging/README.md +++ b/samples/react-teams-tagging/README.md @@ -6,7 +6,7 @@ This sample shows how read and update a custom Schema extension in MS Graph to T ![Custom Schema Extension Webpart](./assets/webpart.JPG) -# Compatibility +## Compatibility ![SPFx 1.8](https://img.shields.io/badge/SPFx-1.8.0-green.svg) ![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) diff --git a/samples/react-themes/README.md b/samples/react-themes/README.md index e7bf516d8..e2ba311b6 100644 --- a/samples/react-themes/README.md +++ b/samples/react-themes/README.md @@ -26,7 +26,7 @@ The Section Theme web part illustrates how to use theme variant variables to sty ![SharePoint Section Themes Client Side Web Part](./assets/SectionThemes.png) -# Compatibility +## Compatibility ![SPFx 1.11](https://img.shields.io/badge/SPFx-1.11.0-green.svg) ![Node.js v10](https://img.shields.io/badge/Node.js-v10-green.svg) diff --git a/samples/react-timeline/README.md b/samples/react-timeline/README.md index 7ca434f5f..4f5872bb5 100644 --- a/samples/react-timeline/README.md +++ b/samples/react-timeline/README.md @@ -69,7 +69,7 @@ Below NPM package is used to develop this sample. 4. Moment (https://www.npmjs.com/package/moment) -# Compatibility +## Compatibility ![SPFx 1.10](https://img.shields.io/badge/SPFx-1.10.0-green.svg) ![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) diff --git a/samples/react-tinymce/README.md b/samples/react-tinymce/README.md index 914879bb2..581ed5488 100644 --- a/samples/react-tinymce/README.md +++ b/samples/react-tinymce/README.md @@ -24,7 +24,7 @@ editor is powered by the community. ![picture of the web part in action](./assets/preview.gif) -# Compatibility +## Compatibility ![SPFx 1.4.1](https://img.shields.io/badge/SPFx-1.4.1-green.svg) ![Node.js v8 | v6](https://img.shields.io/badge/Node.js-v8%20%7C%20v6-green.svg) diff --git a/samples/react-tour-pnpjs/README.md b/samples/react-tour-pnpjs/README.md index d2395758f..c249c768b 100644 --- a/samples/react-tour-pnpjs/README.md +++ b/samples/react-tour-pnpjs/README.md @@ -17,7 +17,7 @@ The property pane shows dinamically all webparts in the current page, using [PnP ![WebPartInAction](./assets/react-tour-pnpjs-webpart-configuration.gif) -# Compatibility +## Compatibility ![SPFx 1.9.1](https://img.shields.io/badge/SPFx-1.9.1-green.svg) ![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) diff --git a/samples/react-word-game/README.md b/samples/react-word-game/README.md index 74dbb9f63..29b81c1bc 100644 --- a/samples/react-word-game/README.md +++ b/samples/react-word-game/README.md @@ -6,7 +6,7 @@ A fun game where you unscramble the words before the time runs out. It stores ev ![Word Game Preview](./assets/preview.gif) -# Compatibility +## Compatibility ![SPFx 1.11](https://img.shields.io/badge/SPFx-1.11.0-green.svg) ![Node.js v10](https://img.shields.io/badge/Node.js-v10-green.svg) diff --git a/samples/react-youtube/README.md b/samples/react-youtube/README.md index 1397d89b2..4716d4f67 100644 --- a/samples/react-youtube/README.md +++ b/samples/react-youtube/README.md @@ -22,7 +22,7 @@ This web part allows to search and view the YouTube videos, across the YouTube A ![Demo](./assets/Preview.gif) -# Compatibility +## Compatibility ![SPFx 1.11](https://img.shields.io/badge/SPFx-1.11.0-green.svg) ![Node.js v10](https://img.shields.io/badge/Node.js-v10-green.svg) diff --git a/samples/react-zpl-viewer/README.md b/samples/react-zpl-viewer/README.md index b7cb24050..d7fc27362 100644 --- a/samples/react-zpl-viewer/README.md +++ b/samples/react-zpl-viewer/README.md @@ -7,7 +7,7 @@ This web part will allow a user to select a text file contatining zpl which is u ![Preview](./assets/preview.gif) -# Compatibility +## Compatibility ![SPFx 1.9.1](https://img.shields.io/badge/SPFx-1.9.1-green.svg) ![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) diff --git a/samples/sharepoint-crud/.devcontainer/devcontainer.json b/samples/sharepoint-crud/.devcontainer/devcontainer.json new file mode 100644 index 000000000..325cc1797 --- /dev/null +++ b/samples/sharepoint-crud/.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.12.1", + "image": "docker.io/m365pnp/spfx:1.12.1", + // 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 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + // Not needed for SPFx>= 1.12.1 + // "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/sharepoint-crud/.devcontainer/spfx-startup.sh b/samples/sharepoint-crud/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/sharepoint-crud/.devcontainer/spfx-startup.sh @@ -0,0 +1,33 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer + +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/sharepoint-crud/README.md b/samples/sharepoint-crud/README.md index aebed5a4b..e31de0b26 100644 --- a/samples/sharepoint-crud/README.md +++ b/samples/sharepoint-crud/README.md @@ -30,6 +30,7 @@ Sample Web Parts illustrating performing SharePoint CRUD operations in React, An ![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg) ![Teams N/A: Untested with Microsoft Teams](https://img.shields.io/badge/Teams-N%2FA-lightgrey.svg "Untested with Microsoft Teams") ![Workbench Hosted](https://img.shields.io/badge/Workbench-Hosted-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 - `gulp serve --nobrowser` - in your SharePoint Site create a 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. + > Note: this Site should be located in a Site Collection under the **/sites/** managed path, eg. **https://contoso.sharepoint.com/sites/my-team-site** - navigate to the hosted version of SharePoint workbench, eg. **https://contoso.sharepoint.com/sites/my-team-site/_layouts/15/workbench.aspx** diff --git a/samples/vue-js-org-chart/README.md b/samples/vue-js-org-chart/README.md index ed0100e1d..6475072bc 100644 --- a/samples/vue-js-org-chart/README.md +++ b/samples/vue-js-org-chart/README.md @@ -7,7 +7,7 @@ A simple Organisation Chart web part using Office UI Fabric, VueJS, REST API. -# Compatibility +## Compatibility ![SPFx 1.8.1](https://img.shields.io/badge/SPFx-1.8.1-green.svg) ![Node.js v8](https://img.shields.io/badge/Node.js-v8-green.svg) diff --git a/tutorials/tutorial-migrate-datatables/README.md b/tutorials/tutorial-migrate-datatables/README.md index a9b920212..35b94b8dd 100644 --- a/tutorials/tutorial-migrate-datatables/README.md +++ b/tutorials/tutorial-migrate-datatables/README.md @@ -13,7 +13,7 @@ Sub folders represent the different stages of the migration process. Each folder | 03-transformed-js-to-typescript | Transformed plain JavaScript to TypeScript | [details](https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/migrate-jquery-datatables-script-to-spfx#transform-the-plain-javascript-code-to-typescript) -# Compatibility +## Compatibility ![SPFx 1.10](https://img.shields.io/badge/SPFx-1.10.0-green.svg) ![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg)