From 52ee1c3daa96ec050b2d9b44f1027e4062b5c6d6 Mon Sep 17 00:00:00 2001 From: Hugo Bernier Date: Mon, 31 Jan 2022 00:10:13 -0500 Subject: [PATCH] Added devcontainers for 1.13 solutions --- samples/README-template.md | 2 +- .../.devcontainer/devcontainer.json | 39 +++++++++++++++++++ .../.devcontainer/spfx-startup.sh | 33 ++++++++++++++++ samples/react-find-parker/README.md | 5 ++- .../.devcontainer/devcontainer.json | 39 +++++++++++++++++++ .../.devcontainer/spfx-startup.sh | 33 ++++++++++++++++ .../.gitignore | 4 ++ .../README.md | 4 +- .../.devcontainer/devcontainer.json | 39 +++++++++++++++++++ .../.devcontainer/spfx-startup.sh | 33 ++++++++++++++++ samples/react-kanban-board/.gitignore | 4 ++ samples/react-kanban-board/README.md | 5 ++- .../.devcontainer/devcontainer.json | 39 +++++++++++++++++++ .../.devcontainer/spfx-startup.sh | 33 ++++++++++++++++ samples/react-list-items-menu/.gitignore | 4 ++ samples/react-list-items-menu/README.md | 5 ++- .../.devcontainer/devcontainer.json | 39 +++++++++++++++++++ .../.devcontainer/spfx-startup.sh | 33 ++++++++++++++++ samples/react-my-approvals/.gitignore | 6 +++ samples/react-my-approvals/README.md | 13 +++++++ .../.devcontainer/devcontainer.json | 39 +++++++++++++++++++ .../.devcontainer/spfx-startup.sh | 33 ++++++++++++++++ samples/react-my-teams/.gitignore | 6 +++ samples/react-my-teams/README.md | 32 ++++++++++++--- .../.devcontainer/devcontainer.json | 39 +++++++++++++++++++ .../.devcontainer/spfx-startup.sh | 33 ++++++++++++++++ samples/react-quotes/.gitignore | 5 +++ samples/react-quotes/README.md | 5 ++- .../.devcontainer/devcontainer.json | 39 +++++++++++++++++++ .../.devcontainer/spfx-startup.sh | 33 ++++++++++++++++ samples/react-save-attachments/.gitignore | 37 ++++++++++++++++++ samples/react-save-attachments/README.md | 4 +- .../.devcontainer/devcontainer.json | 39 +++++++++++++++++++ .../.devcontainer/spfx-startup.sh | 33 ++++++++++++++++ .../react-taxonomy-file-explorer/.gitignore | 4 ++ .../react-taxonomy-file-explorer/README.md | 4 +- .../.devcontainer/devcontainer.json | 39 +++++++++++++++++++ .../.devcontainer/spfx-startup.sh | 33 ++++++++++++++++ .../.gitignore | 6 +++ .../react-teams-graph-upload-as-pdf/README.md | 2 + 40 files changed, 863 insertions(+), 14 deletions(-) create mode 100644 samples/react-find-parker/.devcontainer/devcontainer.json create mode 100644 samples/react-find-parker/.devcontainer/spfx-startup.sh create mode 100644 samples/react-followed-drag-and-drop-grid/.devcontainer/devcontainer.json create mode 100644 samples/react-followed-drag-and-drop-grid/.devcontainer/spfx-startup.sh create mode 100644 samples/react-kanban-board/.devcontainer/devcontainer.json create mode 100644 samples/react-kanban-board/.devcontainer/spfx-startup.sh create mode 100644 samples/react-list-items-menu/.devcontainer/devcontainer.json create mode 100644 samples/react-list-items-menu/.devcontainer/spfx-startup.sh create mode 100644 samples/react-my-approvals/.devcontainer/devcontainer.json create mode 100644 samples/react-my-approvals/.devcontainer/spfx-startup.sh create mode 100644 samples/react-my-teams/.devcontainer/devcontainer.json create mode 100644 samples/react-my-teams/.devcontainer/spfx-startup.sh create mode 100644 samples/react-quotes/.devcontainer/devcontainer.json create mode 100644 samples/react-quotes/.devcontainer/spfx-startup.sh create mode 100644 samples/react-save-attachments/.devcontainer/devcontainer.json create mode 100644 samples/react-save-attachments/.devcontainer/spfx-startup.sh create mode 100644 samples/react-save-attachments/.gitignore create mode 100644 samples/react-taxonomy-file-explorer/.devcontainer/devcontainer.json create mode 100644 samples/react-taxonomy-file-explorer/.devcontainer/spfx-startup.sh create mode 100644 samples/react-taxonomy-file-explorer/.gitignore create mode 100644 samples/react-teams-graph-upload-as-pdf/.devcontainer/devcontainer.json create mode 100644 samples/react-teams-graph-upload-as-pdf/.devcontainer/spfx-startup.sh diff --git a/samples/README-template.md b/samples/README-template.md index 2ab9a0e17..6aa9ae0a3 100644 --- a/samples/README-template.md +++ b/samples/README-template.md @@ -135,7 +135,7 @@ As tempting as it may be, don't just use images to describe the steps. Let's be --> -* Clone this repository +* Clone this repository (or [download this solution as a .ZIP file](https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/YOUR-SOLUTION-NAME) then unzip it) * From your command line, change your current directory to the directory containing this sample (`YOUR-SOLUTION-NAME`, located under `samples`) * in the command line run: * `npm install` diff --git a/samples/react-find-parker/.devcontainer/devcontainer.json b/samples/react-find-parker/.devcontainer/devcontainer.json new file mode 100644 index 000000000..4b1bdea04 --- /dev/null +++ b/samples/react-find-parker/.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/react-find-parker/.devcontainer/spfx-startup.sh b/samples/react-find-parker/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-find-parker/.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-find-parker/README.md b/samples/react-find-parker/README.md index eaf55e5eb..96878faec 100644 --- a/samples/react-find-parker/README.md +++ b/samples/react-find-parker/README.md @@ -47,12 +47,15 @@ Version|Date|Comments ## Minimal Path to Awesome -- Clone this repository +- Clone this repository (or [download this solution as a .ZIP file](https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-find-parker) then unzip it) - Ensure that you are at the solution folder - in the command-line run: - `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 project contains sample client-side web parts built on the SharePoint Framework using React diff --git a/samples/react-followed-drag-and-drop-grid/.devcontainer/devcontainer.json b/samples/react-followed-drag-and-drop-grid/.devcontainer/devcontainer.json new file mode 100644 index 000000000..4b1bdea04 --- /dev/null +++ b/samples/react-followed-drag-and-drop-grid/.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/react-followed-drag-and-drop-grid/.devcontainer/spfx-startup.sh b/samples/react-followed-drag-and-drop-grid/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-followed-drag-and-drop-grid/.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-followed-drag-and-drop-grid/.gitignore b/samples/react-followed-drag-and-drop-grid/.gitignore index d5ab57b0f..636a3337f 100644 --- a/samples/react-followed-drag-and-drop-grid/.gitignore +++ b/samples/react-followed-drag-and-drop-grid/.gitignore @@ -31,3 +31,7 @@ obj # Styles Generated Code *.scss.ts +# .CER Certificates +*.cer +# .PEM Certificates +*.pem diff --git a/samples/react-followed-drag-and-drop-grid/README.md b/samples/react-followed-drag-and-drop-grid/README.md index b827e135b..40560d8f2 100644 --- a/samples/react-followed-drag-and-drop-grid/README.md +++ b/samples/react-followed-drag-and-drop-grid/README.md @@ -54,7 +54,7 @@ Version|Date|Comments ## Minimal Path to Awesome -- Clone this repository +- Clone this repository (or [download this solution as a .ZIP file](https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-followed-drag-and-drop-grid) then unzip it) - Ensure that you are at the solution folder - in the command-line run: - `npm install` @@ -64,6 +64,8 @@ Version|Date|Comments - Add to AppCatalog and deploy - Approve the MS Graph API permissions in SharePoint Admin 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 Description of the extension that expands upon high-level summary above. diff --git a/samples/react-kanban-board/.devcontainer/devcontainer.json b/samples/react-kanban-board/.devcontainer/devcontainer.json new file mode 100644 index 000000000..4b1bdea04 --- /dev/null +++ b/samples/react-kanban-board/.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/react-kanban-board/.devcontainer/spfx-startup.sh b/samples/react-kanban-board/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-kanban-board/.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-kanban-board/.gitignore b/samples/react-kanban-board/.gitignore index 0e655ce79..9d22b0f94 100644 --- a/samples/react-kanban-board/.gitignore +++ b/samples/react-kanban-board/.gitignore @@ -31,3 +31,7 @@ obj # Styles Generated Code *.scss.ts +# .CER Certificates +*.cer +# .PEM Certificates +*.pem diff --git a/samples/react-kanban-board/README.md b/samples/react-kanban-board/README.md index 2059b4675..b9a028d94 100644 --- a/samples/react-kanban-board/README.md +++ b/samples/react-kanban-board/README.md @@ -92,11 +92,14 @@ Version|Date|Comments ## Minimal Path to Awesome -* Clone this repository +- Clone this repository (or [download this solution as a .ZIP file](https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-kanban-board) then unzip it) * in the command line run: * `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 sample highlights the following concepts diff --git a/samples/react-list-items-menu/.devcontainer/devcontainer.json b/samples/react-list-items-menu/.devcontainer/devcontainer.json new file mode 100644 index 000000000..4b1bdea04 --- /dev/null +++ b/samples/react-list-items-menu/.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/react-list-items-menu/.devcontainer/spfx-startup.sh b/samples/react-list-items-menu/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-list-items-menu/.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-items-menu/.gitignore b/samples/react-list-items-menu/.gitignore index a23190062..b600fccf6 100644 --- a/samples/react-list-items-menu/.gitignore +++ b/samples/react-list-items-menu/.gitignore @@ -33,3 +33,7 @@ obj # Styles Generated Code *.scss.ts *.scss.d.ts +# .CER Certificates +*.cer +# .PEM Certificates +*.pem diff --git a/samples/react-list-items-menu/README.md b/samples/react-list-items-menu/README.md index 218f7e8bb..db3da0b51 100644 --- a/samples/react-list-items-menu/README.md +++ b/samples/react-list-items-menu/README.md @@ -61,7 +61,7 @@ Version|Date|Comments ## Minimal Path to Awesome -- Clone this repository +- Clone this repository (or [download this solution as a .ZIP file](https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-list-items-menu) then unzip it) - Move to sample folder - in the command line run: - `npm install` @@ -71,6 +71,9 @@ Version|Date|Comments - Add to AppCatalog and deploy - go to SharePoint Admin Center and Approve required API Permissions + +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Video [![React web part to group documents based on metadata](./assets/video-thumbnail.jpg)](https://www.youtube.com/watch?v=6vqjRTcWd4M "React web part to group documents based on metadata") diff --git a/samples/react-my-approvals/.devcontainer/devcontainer.json b/samples/react-my-approvals/.devcontainer/devcontainer.json new file mode 100644 index 000000000..3e7ba6ebb --- /dev/null +++ b/samples/react-my-approvals/.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-my-approvals/.devcontainer/spfx-startup.sh b/samples/react-my-approvals/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-my-approvals/.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-approvals/.gitignore b/samples/react-my-approvals/.gitignore index d5ab57b0f..1aa548385 100644 --- a/samples/react-my-approvals/.gitignore +++ b/samples/react-my-approvals/.gitignore @@ -31,3 +31,9 @@ obj # Styles Generated Code *.scss.ts + +# .CER Certificates +*.cer + +# .PEM Certificates +*.pem diff --git a/samples/react-my-approvals/README.md b/samples/react-my-approvals/README.md index 1a2dbd485..aaea0c215 100644 --- a/samples/react-my-approvals/README.md +++ b/samples/react-my-approvals/README.md @@ -26,8 +26,20 @@ This web part uses *Microsoft Flow Service* API. You need to approve the API req - `Approvals.Read.All` - `Flows.Read.All` + For more information, see [docs](https://docs.microsoft.com/ja-jp/sharepoint/dev/spfx/use-aadhttpclient). + +## Minimal Path to Awesome + +- Clone this repository (or [download this solution as a .ZIP file](https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-my-approvals) then unzip it) +- Ensure that you are at the solution folder +- in the command-line run: + - `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. + ## Solution Solution|Author(s) @@ -41,6 +53,7 @@ Version|Date|Comments 1.1|January 22, 2022|Updated to allow multiple environments to be selected 1.0|January 11, 2022|Initial release + ## Help We do not support samples, but this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues. diff --git a/samples/react-my-teams/.devcontainer/devcontainer.json b/samples/react-my-teams/.devcontainer/devcontainer.json new file mode 100644 index 000000000..3e7ba6ebb --- /dev/null +++ b/samples/react-my-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.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-my-teams/.devcontainer/spfx-startup.sh b/samples/react-my-teams/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-my-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-my-teams/.gitignore b/samples/react-my-teams/.gitignore index d5ab57b0f..1aa548385 100644 --- a/samples/react-my-teams/.gitignore +++ b/samples/react-my-teams/.gitignore @@ -31,3 +31,9 @@ obj # Styles Generated Code *.scss.ts + +# .CER Certificates +*.cer + +# .PEM Certificates +*.pem diff --git a/samples/react-my-teams/README.md b/samples/react-my-teams/README.md index 04cd54d12..c7363c1df 100644 --- a/samples/react-my-teams/README.md +++ b/samples/react-my-teams/README.md @@ -40,15 +40,10 @@ The web part can be configured to open the team on the web browser or client app | 1.1 | December 18, 2021 | Upgraded for SPFx v1.13.1 | | 1.0 | February 26, 2019 | Initial release | -## Disclaimer - -**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.** - ---- ## Minimal Path to Awesome -Clone this repository. +- Clone this repository (or [download this solution as a .ZIP file](https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-my-teams) then unzip it) In the command line run: @@ -59,6 +54,8 @@ gulp serve --nobrowser Navigate to the hosted version of SharePoint workbench, eg. https://contoso.sharepoint.com/_layouts/15/workbench.aspx +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for more information. + ### Grant the service principal permission to the Microsoft Graph API Once installed, the solution will request the required permissions via the Office 365 admin portal. @@ -76,4 +73,27 @@ o365 spo serviceprincipal grant add --resource 'Microsoft Graph' --scope 'Group. This Web Part lists all the teams the current user is a member of. + +## Help + +We do not support samples, but 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. + +If you're having issues building the solution, please run [spfx doctor](https://pnp.github.io/cli-microsoft365/cmd/spfx/spfx-doctor/) from within the solution folder to diagnose incompatibility issues with your environment. + +You can try looking at [issues related to this sample](https://github.com/pnp/sp-dev-fx-webparts/issues?q=label%3A%22sample%3A%20react-my-teams%22) to see if anybody else is having the same issues. + +You can also try looking at [discussions related to this sample](https://github.com/pnp/sp-dev-fx-webparts/discussions?discussions_q=react-my-teams) and see what the community is saying. + +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-my-teams&template=bug-report.yml&sample=react-my-teams&authors=@joelfmrodrigues @yhabersaat&title=react-my-teams%20-%20). + +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-my-teams&template=question.yml&sample=react-my-teams&authors=@joelfmrodrigues @yhabersaat&title=react-my-teams%20-%20). + +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-my-teams&template=suggestion.yml&sample=react-my-teams&authors=@joelfmrodrigues @yhabersaat&title=react-my-teams%20-%20). + + +## Disclaimer + +**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.** + + diff --git a/samples/react-quotes/.devcontainer/devcontainer.json b/samples/react-quotes/.devcontainer/devcontainer.json new file mode 100644 index 000000000..3e7ba6ebb --- /dev/null +++ b/samples/react-quotes/.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-quotes/.devcontainer/spfx-startup.sh b/samples/react-quotes/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-quotes/.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-quotes/.gitignore b/samples/react-quotes/.gitignore index d5ab57b0f..db234d2b9 100644 --- a/samples/react-quotes/.gitignore +++ b/samples/react-quotes/.gitignore @@ -31,3 +31,8 @@ obj # Styles Generated Code *.scss.ts + +# .CER Certificates +*.cer +# .PEM Certificates +*.pem \ No newline at end of file diff --git a/samples/react-quotes/README.md b/samples/react-quotes/README.md index 4de57667f..f219b4b89 100644 --- a/samples/react-quotes/README.md +++ b/samples/react-quotes/README.md @@ -36,13 +36,16 @@ Version|Date|Comments ## Minimal Path to Awesome -* Clone this repository +- Clone this repository (or [download this solution as a .ZIP file](https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-quotes) then unzip it) * in the command line run: * `npm install` * `gulp serve` * In the browser that opens add the web part to your page. * After the web part has loaded it will load the quote automatically or you can edit the webparts properties to display a manual quote. +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for more information. + + ## Features This web part loads a random quote from a third-party api (https://favqs.com/api). Additionally a quote can be entered manually and the text color of the quote and author can be adjusted through the web part properties. diff --git a/samples/react-save-attachments/.devcontainer/devcontainer.json b/samples/react-save-attachments/.devcontainer/devcontainer.json new file mode 100644 index 000000000..4b1bdea04 --- /dev/null +++ b/samples/react-save-attachments/.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/react-save-attachments/.devcontainer/spfx-startup.sh b/samples/react-save-attachments/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-save-attachments/.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-save-attachments/.gitignore b/samples/react-save-attachments/.gitignore new file mode 100644 index 000000000..636a3337f --- /dev/null +++ b/samples/react-save-attachments/.gitignore @@ -0,0 +1,37 @@ +# Logs +logs +*.log +npm-debug.log* + +# Dependency directories +node_modules + +# Build generated files +dist +lib +release +solution +temp +*.sppkg + +# Coverage directory used by tools like istanbul +coverage + +# OSX +.DS_Store + +# Visual Studio files +.ntvs_analysis.dat +.vs +bin +obj + +# Resx Generated Code +*.resx.ts + +# Styles Generated Code +*.scss.ts +# .CER Certificates +*.cer +# .PEM Certificates +*.pem diff --git a/samples/react-save-attachments/README.md b/samples/react-save-attachments/README.md index faaeede2e..ee0ed9153 100755 --- a/samples/react-save-attachments/README.md +++ b/samples/react-save-attachments/README.md @@ -45,7 +45,7 @@ Version|Date|Comments ## Minimal Path to Awesome -* Clone this repository +- Clone this repository (or [download this solution as a .ZIP file](https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-save-attachments) then unzip it) * From your command line, change your current directory to the directory containing this sample (`react-save-attachments`, located under `samples`) * In the command line run: * Restore dependencies: `npm install` @@ -64,6 +64,8 @@ Version|Date|Comments * Go to the **API Management** section in the new SharePoint Admin Center (*https://{tenantname}-admin.sharepoint.com/_layouts/15/online/AdminHome.aspx#/webApiPermissionManagement*) * **Approve** the permission request for **Mail.ReadWrite** and **Files.ReadWrite** to **Microsoft Graph** +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for more information. + ## Video [![Outlook add-in with SPFx to save attachments to SharePoint using Microsoft Graph](./assets/video-thumbnail.jpg)](https://www.youtube.com/watch?v=Hl4zu9YeeRA "Outlook add-in with SPFx to save attachments to SharePoint using Microsoft Graph") diff --git a/samples/react-taxonomy-file-explorer/.devcontainer/devcontainer.json b/samples/react-taxonomy-file-explorer/.devcontainer/devcontainer.json new file mode 100644 index 000000000..4b1bdea04 --- /dev/null +++ b/samples/react-taxonomy-file-explorer/.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/react-taxonomy-file-explorer/.devcontainer/spfx-startup.sh b/samples/react-taxonomy-file-explorer/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-taxonomy-file-explorer/.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-taxonomy-file-explorer/.gitignore b/samples/react-taxonomy-file-explorer/.gitignore new file mode 100644 index 000000000..196ebb4fd --- /dev/null +++ b/samples/react-taxonomy-file-explorer/.gitignore @@ -0,0 +1,4 @@ +# .CER Certificates +*.cer +# .PEM Certificates +*.pem diff --git a/samples/react-taxonomy-file-explorer/README.md b/samples/react-taxonomy-file-explorer/README.md index db7175761..94be5abff 100644 --- a/samples/react-taxonomy-file-explorer/README.md +++ b/samples/react-taxonomy-file-explorer/README.md @@ -63,7 +63,7 @@ Version|Date|Comments ## Minimal Path to Awesome -- Clone this repository +- Clone this repository (or [download this solution as a .ZIP file](https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-taxonomy-file-explorer) then unzip it) - Ensure that you are at the solution folder - in the command-line run: - `npm install` @@ -74,6 +74,8 @@ Version|Date|Comments - In the web part properties set the library name and the internal field name of the managed metadata column - Done! +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for more information. + ## Features This web part illustrates the following concepts: diff --git a/samples/react-teams-graph-upload-as-pdf/.devcontainer/devcontainer.json b/samples/react-teams-graph-upload-as-pdf/.devcontainer/devcontainer.json new file mode 100644 index 000000000..4b1bdea04 --- /dev/null +++ b/samples/react-teams-graph-upload-as-pdf/.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/react-teams-graph-upload-as-pdf/.devcontainer/spfx-startup.sh b/samples/react-teams-graph-upload-as-pdf/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-teams-graph-upload-as-pdf/.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-graph-upload-as-pdf/.gitignore b/samples/react-teams-graph-upload-as-pdf/.gitignore index d5ab57b0f..1aa548385 100644 --- a/samples/react-teams-graph-upload-as-pdf/.gitignore +++ b/samples/react-teams-graph-upload-as-pdf/.gitignore @@ -31,3 +31,9 @@ obj # Styles Generated Code *.scss.ts + +# .CER Certificates +*.cer + +# .PEM Certificates +*.pem diff --git a/samples/react-teams-graph-upload-as-pdf/README.md b/samples/react-teams-graph-upload-as-pdf/README.md index 6d29fab50..2c8f1a9e1 100644 --- a/samples/react-teams-graph-upload-as-pdf/README.md +++ b/samples/react-teams-graph-upload-as-pdf/README.md @@ -55,6 +55,8 @@ Version|Date|Comments - `Files.ReadWrite` - `Sites.ReadWrite.All` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for more information. + ## Features This web part illustrates the following concepts: