diff --git a/samples/angular-aad-webapi/.devcontainer/devcontainer.json b/samples/angular-aad-webapi/.devcontainer/devcontainer.json new file mode 100644 index 000000000..404c35930 --- /dev/null +++ b/samples/angular-aad-webapi/.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.0.0", + "image": "docker.io/m365pnp/spfx:ga", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} diff --git a/samples/angular-aad-webapi/.devcontainer/spfx-startup.sh b/samples/angular-aad-webapi/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/angular-aad-webapi/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/angular-aad-webapi/.gitignore b/samples/angular-aad-webapi/.gitignore index b19bbe123..a17f3f582 100644 --- a/samples/angular-aad-webapi/.gitignore +++ b/samples/angular-aad-webapi/.gitignore @@ -30,3 +30,7 @@ obj # Styles Generated Code *.scss.ts +# .CER Certificates +*.cer +# .PEM Certificates +*.pem diff --git a/samples/angular-aad-webapi/README.md b/samples/angular-aad-webapi/README.md index 2c53d5446..e786d0b98 100644 --- a/samples/angular-aad-webapi/README.md +++ b/samples/angular-aad-webapi/README.md @@ -33,6 +33,7 @@ Sample SharePoint Framework client-side web part illustrating communication with ![Compatible with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Compatible-green.svg) ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to diff --git a/samples/angular-msgraph/.devcontainer/devcontainer.json b/samples/angular-msgraph/.devcontainer/devcontainer.json new file mode 100644 index 000000000..91a971e28 --- /dev/null +++ b/samples/angular-msgraph/.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.0.0", + "image": "docker.io/m365pnp/spfx:ga", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/angular-msgraph/.devcontainer/spfx-startup.sh b/samples/angular-msgraph/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/angular-msgraph/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/angular-msgraph/.gitignore b/samples/angular-msgraph/.gitignore index b19bbe123..a17f3f582 100644 --- a/samples/angular-msgraph/.gitignore +++ b/samples/angular-msgraph/.gitignore @@ -30,3 +30,7 @@ obj # Styles Generated Code *.scss.ts +# .CER Certificates +*.cer +# .PEM Certificates +*.pem diff --git a/samples/angular-msgraph/README.md b/samples/angular-msgraph/README.md index d4e5725a3..c7b3480c7 100644 --- a/samples/angular-msgraph/README.md +++ b/samples/angular-msgraph/README.md @@ -47,6 +47,7 @@ display all the lists associated with the site followed by all the items inside ![Compatible with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Compatible-green.svg) ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to diff --git a/samples/angular-ngofficeuifabric-file-upload/.devcontainer/devcontainer.json b/samples/angular-ngofficeuifabric-file-upload/.devcontainer/devcontainer.json new file mode 100644 index 000000000..404c35930 --- /dev/null +++ b/samples/angular-ngofficeuifabric-file-upload/.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.0.0", + "image": "docker.io/m365pnp/spfx:ga", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} diff --git a/samples/angular-ngofficeuifabric-file-upload/.devcontainer/spfx-startup.sh b/samples/angular-ngofficeuifabric-file-upload/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/angular-ngofficeuifabric-file-upload/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/angular-ngofficeuifabric-file-upload/README.md b/samples/angular-ngofficeuifabric-file-upload/README.md index 1e5b8d83e..076205063 100644 --- a/samples/angular-ngofficeuifabric-file-upload/README.md +++ b/samples/angular-ngofficeuifabric-file-upload/README.md @@ -34,6 +34,7 @@ Edit web part properties to set Document library Name. Initially, It has been se ![Compatible with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Compatible-green.svg ) ![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "Requires access to SharePoint document 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 @@ -63,6 +64,8 @@ Version|Date|Comments - `tsd install` - `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 Web Part illustrates the following concepts on top of the SharePoint Framework & AngularJs: diff --git a/samples/angular-todo/.devcontainer/devcontainer.json b/samples/angular-todo/.devcontainer/devcontainer.json new file mode 100644 index 000000000..404c35930 --- /dev/null +++ b/samples/angular-todo/.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.0.0", + "image": "docker.io/m365pnp/spfx:ga", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} diff --git a/samples/angular-todo/.devcontainer/spfx-startup.sh b/samples/angular-todo/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/angular-todo/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/angular-todo/README.md b/samples/angular-todo/README.md index 097c61ef3..2803f8be5 100644 --- a/samples/angular-todo/README.md +++ b/samples/angular-todo/README.md @@ -31,6 +31,7 @@ Sample Web Part illustrating using Angular with the SharePoint Framework. ![Compatible with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Compatible-green.svg) ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -59,6 +60,8 @@ Version|Date|Comments * `npm i` * `gulp serve` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Features The To do web part is a sample client-side web part built on the SharePoint Framework built using Angular. diff --git a/samples/angularelements-helloworld/.devcontainer/devcontainer.json b/samples/angularelements-helloworld/.devcontainer/devcontainer.json new file mode 100644 index 000000000..50d2cd4b9 --- /dev/null +++ b/samples/angularelements-helloworld/.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.4.1", + "image": "docker.io/m365pnp/spfx:1.4.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, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/angularelements-helloworld/.devcontainer/spfx-startup.sh b/samples/angularelements-helloworld/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/angularelements-helloworld/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/angularelements-helloworld/README.md b/samples/angularelements-helloworld/README.md index 6ca416cfe..a8d26fdc2 100644 --- a/samples/angularelements-helloworld/README.md +++ b/samples/angularelements-helloworld/README.md @@ -29,6 +29,7 @@ Set of sample web parts illustrating how to use Angular Elements in the SharePoi ![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-Compatbile-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 @@ -56,6 +57,8 @@ Version|Date|Comments * `npm i` * `gulp serve` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Features This sample contains a set of web parts that illustrate using Angular Elements in the SharePoint Framework. diff --git a/samples/angularelements-html-templatefile/.devcontainer/devcontainer.json b/samples/angularelements-html-templatefile/.devcontainer/devcontainer.json new file mode 100644 index 000000000..50d2cd4b9 --- /dev/null +++ b/samples/angularelements-html-templatefile/.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.4.1", + "image": "docker.io/m365pnp/spfx:1.4.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, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/angularelements-html-templatefile/.devcontainer/spfx-startup.sh b/samples/angularelements-html-templatefile/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/angularelements-html-templatefile/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/angularelements-html-templatefile/README.md b/samples/angularelements-html-templatefile/README.md index 8ebddef18..66e605418 100644 --- a/samples/angularelements-html-templatefile/README.md +++ b/samples/angularelements-html-templatefile/README.md @@ -30,6 +30,7 @@ A sample web part illustrating how to use Angular Elements in the SharePoint Fra ![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 @@ -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. + ## Features This web part illustrates the following concepts on top of the SharePoint Framework: diff --git a/samples/bootstrap-slider/.devcontainer/devcontainer.json b/samples/bootstrap-slider/.devcontainer/devcontainer.json new file mode 100644 index 000000000..404c35930 --- /dev/null +++ b/samples/bootstrap-slider/.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.0.0", + "image": "docker.io/m365pnp/spfx:ga", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} diff --git a/samples/bootstrap-slider/.devcontainer/spfx-startup.sh b/samples/bootstrap-slider/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/bootstrap-slider/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/bootstrap-slider/README.md b/samples/bootstrap-slider/README.md index 77f76b9d7..8a6eca9ad 100644 --- a/samples/bootstrap-slider/README.md +++ b/samples/bootstrap-slider/README.md @@ -35,6 +35,7 @@ Sample bootstrap slider which pulls the slides from a list inside the SharePoint ![Compatible with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Compatible-green.svg) ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to diff --git a/samples/handlebarsjs-webpack-loader/.devcontainer/devcontainer.json b/samples/handlebarsjs-webpack-loader/.devcontainer/devcontainer.json new file mode 100644 index 000000000..50d2cd4b9 --- /dev/null +++ b/samples/handlebarsjs-webpack-loader/.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.4.1", + "image": "docker.io/m365pnp/spfx:1.4.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, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/handlebarsjs-webpack-loader/.devcontainer/spfx-startup.sh b/samples/handlebarsjs-webpack-loader/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/handlebarsjs-webpack-loader/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/handlebarsjs-webpack-loader/README.md b/samples/handlebarsjs-webpack-loader/README.md index 506aa0097..34a7fe9ae 100644 --- a/samples/handlebarsjs-webpack-loader/README.md +++ b/samples/handlebarsjs-webpack-loader/README.md @@ -26,6 +26,7 @@ This sample demonstrate how to set up SPFx to use [Handlebars](http://handlebars ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to diff --git a/samples/jquery-photopile/.devcontainer/devcontainer.json b/samples/jquery-photopile/.devcontainer/devcontainer.json new file mode 100644 index 000000000..404c35930 --- /dev/null +++ b/samples/jquery-photopile/.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.0.0", + "image": "docker.io/m365pnp/spfx:ga", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} diff --git a/samples/jquery-photopile/.devcontainer/spfx-startup.sh b/samples/jquery-photopile/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/jquery-photopile/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/jquery-photopile/README.md b/samples/jquery-photopile/README.md index 4e6bb4759..3a9cc7cdc 100644 --- a/samples/jquery-photopile/README.md +++ b/samples/jquery-photopile/README.md @@ -37,6 +37,7 @@ simulates a pile of photos scattered about on a surface. Thumbnail clicks remove ![Compatible with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Compatible-green.svg) ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -64,6 +65,8 @@ Version|Date|Comments - `tsd 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 uses React, Office UI Fabric, JQuery, JQuery UI and Photopile.js. This web part is available in English (en-us) diff --git a/samples/js-employee-spotlight/.devcontainer/devcontainer.json b/samples/js-employee-spotlight/.devcontainer/devcontainer.json new file mode 100644 index 000000000..404c35930 --- /dev/null +++ b/samples/js-employee-spotlight/.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.0.0", + "image": "docker.io/m365pnp/spfx:ga", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} diff --git a/samples/js-employee-spotlight/.devcontainer/spfx-startup.sh b/samples/js-employee-spotlight/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/js-employee-spotlight/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/js-employee-spotlight/README.md b/samples/js-employee-spotlight/README.md index 4e0af3819..8caa48e44 100644 --- a/samples/js-employee-spotlight/README.md +++ b/samples/js-employee-spotlight/README.md @@ -48,6 +48,7 @@ Simple Web Part that demonstrates the use of SharePoint Framework for show casin ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "Requires access to SharePoint content") ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to * [SharePoint Framework Developer](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview) @@ -77,6 +78,8 @@ Version|Date|Comments - `Open the workbench on your Office 365 Developer tenant` - Basic functionality can be tested locally, data is only shown when used in context of 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. + ## Features The js-employee-spotlight web part displays the content of the list specified in the web part properties pane, The list should have the 3 mandatory fields. diff --git a/samples/js-extend-webpack/.devcontainer/devcontainer.json b/samples/js-extend-webpack/.devcontainer/devcontainer.json new file mode 100644 index 000000000..6cccae66f --- /dev/null +++ b/samples/js-extend-webpack/.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.3.0", + "image": "docker.io/m365pnp/spfx:1.3.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/js-extend-webpack/.devcontainer/spfx-startup.sh b/samples/js-extend-webpack/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/js-extend-webpack/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/js-extend-webpack/README.md b/samples/js-extend-webpack/README.md index f6ee1005e..29e01a304 100644 --- a/samples/js-extend-webpack/README.md +++ b/samples/js-extend-webpack/README.md @@ -33,6 +33,7 @@ Read the following documentation for detailed information on working with webpac ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg) ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -62,6 +63,8 @@ Version|Date|Comments - `npm install` - `gulp serve` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## 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/js-propertycontrols-svg/assets/sample.json b/samples/js-propertycontrols-svg/assets/sample.json index 1c1f14611..7e29bf8c4 100644 --- a/samples/js-propertycontrols-svg/assets/sample.json +++ b/samples/js-propertycontrols-svg/assets/sample.json @@ -9,7 +9,7 @@ "An SPFx web part that displays a Scalable Vector Graphics (SVG) image using properties to customize how it is rendered. The web part utilizes the PnP SPFx Property Controls package (specifially the SpinButton and ColorPicker) to set these properties." ], "creationDateTime": "2017-11-12", - "updateDateTime": "2017-11-12", + "updateDateTime": "2021-12-30", "products": [ "SharePoint" ], diff --git a/samples/js-solution-editions/.devcontainer/devcontainer.json b/samples/js-solution-editions/.devcontainer/devcontainer.json new file mode 100644 index 000000000..618547c32 --- /dev/null +++ b/samples/js-solution-editions/.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.1.0", + "image": "docker.io/m365pnp/spfx:1.1.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/js-solution-editions/.devcontainer/spfx-startup.sh b/samples/js-solution-editions/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/js-solution-editions/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/js-solution-editions/README.md b/samples/js-solution-editions/README.md index 70e97e45e..d5ca85635 100644 --- a/samples/js-solution-editions/README.md +++ b/samples/js-solution-editions/README.md @@ -24,6 +24,7 @@ This sample shows a possible approach of handling multiple editions (e.g. trial, ![Compatible with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Compatible-green.svg) ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to diff --git a/samples/js-theme-manager-2019/.devcontainer/devcontainer.json b/samples/js-theme-manager-2019/.devcontainer/devcontainer.json new file mode 100644 index 000000000..bf6805701 --- /dev/null +++ b/samples/js-theme-manager-2019/.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.4.0", + "image": "docker.io/m365pnp/spfx:1.4.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/js-theme-manager-2019/.devcontainer/spfx-startup.sh b/samples/js-theme-manager-2019/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/js-theme-manager-2019/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/js-theme-manager-2019/README.md b/samples/js-theme-manager-2019/README.md index 4a82223f9..bd47101ff 100644 --- a/samples/js-theme-manager-2019/README.md +++ b/samples/js-theme-manager-2019/README.md @@ -23,6 +23,7 @@ NOTE: This is a great option to provide theme management of a Site Collection wi ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench 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 @@ -52,6 +53,8 @@ Version|Date|Comments - `npm install` - `gulp serve` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Features diff --git a/samples/knockout-dependent-properties/.devcontainer/devcontainer.json b/samples/knockout-dependent-properties/.devcontainer/devcontainer.json new file mode 100644 index 000000000..404c35930 --- /dev/null +++ b/samples/knockout-dependent-properties/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.0.0", + "image": "docker.io/m365pnp/spfx:ga", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} diff --git a/samples/knockout-dependent-properties/.devcontainer/spfx-startup.sh b/samples/knockout-dependent-properties/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/knockout-dependent-properties/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/knockout-dependent-properties/README.md b/samples/knockout-dependent-properties/README.md index aa70a4058..4bb726680 100644 --- a/samples/knockout-dependent-properties/README.md +++ b/samples/knockout-dependent-properties/README.md @@ -33,6 +33,7 @@ Sample Web Part illustrating ![Compatible with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Compatible-green.svg) ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) @@ -60,6 +61,8 @@ Version|Date|Comments - `npm i` - `gulp serve` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Features This project contains Client-Side Web Part built on the SharePoint Framework illustrating how to create dependent properties in Web Part Property Pane. This Web Part illustrates the following concepts on top of the SharePoint Framework: diff --git a/samples/knockout-taxonomy/.devcontainer/devcontainer.json b/samples/knockout-taxonomy/.devcontainer/devcontainer.json new file mode 100644 index 000000000..404c35930 --- /dev/null +++ b/samples/knockout-taxonomy/.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.0.0", + "image": "docker.io/m365pnp/spfx:ga", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} diff --git a/samples/knockout-taxonomy/.devcontainer/spfx-startup.sh b/samples/knockout-taxonomy/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/knockout-taxonomy/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/knockout-taxonomy/README.md b/samples/knockout-taxonomy/README.md index e2a4a2bce..15eb9ec56 100644 --- a/samples/knockout-taxonomy/README.md +++ b/samples/knockout-taxonomy/README.md @@ -32,6 +32,7 @@ Sample Web Part illustrating ![Compatible with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Compatible-green.svg) ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -58,6 +59,8 @@ Version|Date|Comments - `npm i` - `gulp serve` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Features This project contains Client-Side Web Part built on the SharePoint Framework illustrating how to request Taxonomy Term Stores' hierarchy from SharePoint. This Web Part illustrates the following concepts on top of the SharePoint Framework: diff --git a/samples/react-3rd-party-api/.devcontainer/devcontainer.json b/samples/react-3rd-party-api/.devcontainer/devcontainer.json new file mode 100644 index 000000000..50d2cd4b9 --- /dev/null +++ b/samples/react-3rd-party-api/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.4.1", + "image": "docker.io/m365pnp/spfx:1.4.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, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-3rd-party-api/.devcontainer/spfx-startup.sh b/samples/react-3rd-party-api/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-3rd-party-api/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-aad-implicitflow/.devcontainer/devcontainer.json b/samples/react-aad-implicitflow/.devcontainer/devcontainer.json new file mode 100644 index 000000000..404c35930 --- /dev/null +++ b/samples/react-aad-implicitflow/.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.0.0", + "image": "docker.io/m365pnp/spfx:ga", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} diff --git a/samples/react-aad-implicitflow/.devcontainer/spfx-startup.sh b/samples/react-aad-implicitflow/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-aad-implicitflow/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-aad-implicitflow/README.md b/samples/react-aad-implicitflow/README.md index 44ea49742..ffa86aa0f 100644 --- a/samples/react-aad-implicitflow/README.md +++ b/samples/react-aad-implicitflow/README.md @@ -36,6 +36,7 @@ Sample SharePoint Framework client-side web part built using React showing upcom ![Compatible with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Compatible-green.svg) ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -74,6 +75,8 @@ Version|Date|Comments - navigate to the hosted version of the SharePoint workbench - add the **Upcoming meetings** 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 Sample web part in this solution illustrates the following concepts on top of the SharePoint Framework: diff --git a/samples/react-aggregated-calendar/.devcontainer/devcontainer.json b/samples/react-aggregated-calendar/.devcontainer/devcontainer.json new file mode 100644 index 000000000..50d2cd4b9 --- /dev/null +++ b/samples/react-aggregated-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.4.1", + "image": "docker.io/m365pnp/spfx:1.4.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, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-aggregated-calendar/.devcontainer/spfx-startup.sh b/samples/react-aggregated-calendar/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-aggregated-calendar/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-aggregated-calendar/README.md b/samples/react-aggregated-calendar/README.md index 60673e16f..fc2c0478b 100644 --- a/samples/react-aggregated-calendar/README.md +++ b/samples/react-aggregated-calendar/README.md @@ -25,6 +25,7 @@ Web part is developed using below technologies ![Compatible with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Compatible-green.svg) ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -59,6 +60,8 @@ Version|Date|Comments - `npm install` - `gulp serve` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Features diff --git a/samples/react-content-query-onprem/.devcontainer/devcontainer.json b/samples/react-content-query-onprem/.devcontainer/devcontainer.json new file mode 100644 index 000000000..618547c32 --- /dev/null +++ b/samples/react-content-query-onprem/.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.1.0", + "image": "docker.io/m365pnp/spfx:1.1.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-content-query-onprem/.devcontainer/spfx-startup.sh b/samples/react-content-query-onprem/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-content-query-onprem/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-content-query-onprem/README.md b/samples/react-content-query-onprem/README.md index 4ef608862..a0e72daaa 100644 --- a/samples/react-content-query-onprem/README.md +++ b/samples/react-content-query-onprem/README.md @@ -33,6 +33,7 @@ The `React Content Query Web Part` is a modern version of the good old `Content ![Compatible with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Compatible-green.svg) ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to diff --git a/samples/react-events-aggregator/.devcontainer/devcontainer.json b/samples/react-events-aggregator/.devcontainer/devcontainer.json new file mode 100644 index 000000000..50d2cd4b9 --- /dev/null +++ b/samples/react-events-aggregator/.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.4.1", + "image": "docker.io/m365pnp/spfx:1.4.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, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-events-aggregator/.devcontainer/spfx-startup.sh b/samples/react-events-aggregator/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-events-aggregator/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-events-aggregator/README.md b/samples/react-events-aggregator/README.md index 277070398..533e345ab 100644 --- a/samples/react-events-aggregator/README.md +++ b/samples/react-events-aggregator/README.md @@ -25,6 +25,7 @@ This sample shows how we can use the SPFx Event Aggregator to communicate betwee ![Compatible with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -60,6 +61,8 @@ Version|Date|Comments - `gulp test` (optional) - `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-feature-framework/.devcontainer/devcontainer.json b/samples/react-feature-framework/.devcontainer/devcontainer.json new file mode 100644 index 000000000..404c35930 --- /dev/null +++ b/samples/react-feature-framework/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.0.0", + "image": "docker.io/m365pnp/spfx:ga", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} diff --git a/samples/react-feature-framework/.devcontainer/spfx-startup.sh b/samples/react-feature-framework/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-feature-framework/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-feature-framework/README.md b/samples/react-feature-framework/README.md index dcf0a3a0b..db1ac5737 100644 --- a/samples/react-feature-framework/README.md +++ b/samples/react-feature-framework/README.md @@ -41,6 +41,7 @@ More details on the capability is available from the following article ![Compatible with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Compatible-green.svg) ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -76,6 +77,8 @@ Version|Date|Comments - Install `react-feature-framework.sppkg` from `/sharepoint/solution` to app catalog in your tenant - Install solution to SharePoint site +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + Following items are being provisioned - SPFxAmount and SPFxCostCenter fields under 'SPFx Columns' group - visible in the Site Column Gallery diff --git a/samples/react-file-upload/.devcontainer/devcontainer.json b/samples/react-file-upload/.devcontainer/devcontainer.json new file mode 100644 index 000000000..bf6805701 --- /dev/null +++ b/samples/react-file-upload/.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.4.0", + "image": "docker.io/m365pnp/spfx:1.4.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-file-upload/.devcontainer/spfx-startup.sh b/samples/react-file-upload/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-file-upload/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-file-upload/README.md b/samples/react-file-upload/README.md index 48fcf93d5..df6f51cdc 100644 --- a/samples/react-file-upload/README.md +++ b/samples/react-file-upload/README.md @@ -15,6 +15,7 @@ The file upload web part allowing users to upload multiple files to a document l ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -47,6 +48,8 @@ Version|Date|Comments - `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 illustrating working with file upload web part. This sample illustrates the following concepts on top of the SharePoint Framework: diff --git a/samples/react-global-news-sp2019/.devcontainer/devcontainer.json b/samples/react-global-news-sp2019/.devcontainer/devcontainer.json new file mode 100644 index 000000000..50d2cd4b9 --- /dev/null +++ b/samples/react-global-news-sp2019/.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.4.1", + "image": "docker.io/m365pnp/spfx:1.4.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, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-global-news-sp2019/.devcontainer/spfx-startup.sh b/samples/react-global-news-sp2019/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-global-news-sp2019/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-global-news-sp2019/README.md b/samples/react-global-news-sp2019/README.md index e50058035..62ae0ec5d 100644 --- a/samples/react-global-news-sp2019/README.md +++ b/samples/react-global-news-sp2019/README.md @@ -41,6 +41,7 @@ Please go to https://newsapi.org to get more information. ![Compatible with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Compatible-green.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 @@ -74,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. + > Include any additional steps as needed. ## Features diff --git a/samples/react-graph-evalurl/.devcontainer/devcontainer.json b/samples/react-graph-evalurl/.devcontainer/devcontainer.json new file mode 100644 index 000000000..50d2cd4b9 --- /dev/null +++ b/samples/react-graph-evalurl/.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.4.1", + "image": "docker.io/m365pnp/spfx:1.4.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, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-graph-evalurl/.devcontainer/spfx-startup.sh b/samples/react-graph-evalurl/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-graph-evalurl/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-graph-evalurl/README.md b/samples/react-graph-evalurl/README.md index e9ae257ee..4a1478269 100644 --- a/samples/react-graph-evalurl/README.md +++ b/samples/react-graph-evalurl/README.md @@ -46,6 +46,7 @@ src ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "Requires access to Microsoft Graph") ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Demo @@ -82,6 +83,8 @@ Version|Date|Comments - Open workbench on your tenant, ie. https://contoso.sharepoint.com/sites/salestesm/_layouts/15/workbench.aspx - Search and add web part "Graph - Eval 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. + ## Features This sample web part shows how URLs in SharePoint can be checked and evaluated against the Microsoft Graph. This scenario and the introduced class can be use to evluate not only user input but can also be used in the configuration panel of web parts. The benefit is that the URL of the target location remains visible and can be use for debugging reasons to. diff --git a/samples/react-image-editor/.devcontainer/devcontainer.json b/samples/react-image-editor/.devcontainer/devcontainer.json new file mode 100644 index 000000000..bf6805701 --- /dev/null +++ b/samples/react-image-editor/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.4.0", + "image": "docker.io/m365pnp/spfx:1.4.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-image-editor/.devcontainer/spfx-startup.sh b/samples/react-image-editor/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-image-editor/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-image-editor/README.md b/samples/react-image-editor/README.md index 71c2fa5ee..5b0f62dac 100644 --- a/samples/react-image-editor/README.md +++ b/samples/react-image-editor/README.md @@ -43,6 +43,7 @@ The Placeholder and FilePicker are components from the [sp-dev-fx-controls-react ![SharePoint 2019 | Online](https://img.shields.io/badge/SharePoint-2019%20%7C%20Online-yellow.svg) ![Teams No: Not designed for Microsoft Teams](https://img.shields.io/badge/Teams-No-red.svg "Not designed for 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) References to office-ui-fabric-react version 5.x because of SharePoint 2019 Support @@ -80,6 +81,8 @@ Version|Date|Comments - edit `config\serve.json` set `"initialPage": "https://{tenant}.sharepoint.com/_layouts/15/workbench.aspx"` - `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. + ## Usage * PNP Placeholder control if not Configured diff --git a/samples/react-image-magnifier/.devcontainer/devcontainer.json b/samples/react-image-magnifier/.devcontainer/devcontainer.json new file mode 100644 index 000000000..5b5fbdd2f --- /dev/null +++ b/samples/react-image-magnifier/.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.2.0", + "image": "docker.io/m365pnp/spfx:1.2.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-image-magnifier/.devcontainer/spfx-startup.sh b/samples/react-image-magnifier/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-image-magnifier/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-image-magnifier/README.md b/samples/react-image-magnifier/README.md index 91db440e7..55fb67c86 100644 --- a/samples/react-image-magnifier/README.md +++ b/samples/react-image-magnifier/README.md @@ -29,6 +29,7 @@ This web part allow to magnify an image, displaying a resolution more detailed 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) ![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) @@ -61,6 +62,8 @@ Version|Date|Comments - `npm install` - `gulp serve` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Features This Web Part illustrates the following concepts on top of the SharePoint Framework: diff --git a/samples/react-invitation-manager/.devcontainer/devcontainer.json b/samples/react-invitation-manager/.devcontainer/devcontainer.json new file mode 100644 index 000000000..6cccae66f --- /dev/null +++ b/samples/react-invitation-manager/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.3.0", + "image": "docker.io/m365pnp/spfx:1.3.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-invitation-manager/.devcontainer/spfx-startup.sh b/samples/react-invitation-manager/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-invitation-manager/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-invitation-manager/README.md b/samples/react-invitation-manager/README.md index 5a434fc74..c7274f4bb 100644 --- a/samples/react-invitation-manager/README.md +++ b/samples/react-invitation-manager/README.md @@ -43,6 +43,7 @@ Look at this to go deep: ![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 @@ -81,6 +82,8 @@ Version|Date|Comments - navigate to the hosted version of the SharePoint workbench - add the **Invitation manager** 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 Sample web part in this solution illustrates the following concepts on top of the SharePoint Framework: diff --git a/samples/react-item-History/.devcontainer/devcontainer.json b/samples/react-item-History/.devcontainer/devcontainer.json new file mode 100644 index 000000000..50d2cd4b9 --- /dev/null +++ b/samples/react-item-History/.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.4.1", + "image": "docker.io/m365pnp/spfx:1.4.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, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-item-History/.devcontainer/spfx-startup.sh b/samples/react-item-History/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-item-History/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-item-History/README.md b/samples/react-item-History/README.md index 956c3a9b8..fdd9ddf09 100644 --- a/samples/react-item-History/README.md +++ b/samples/react-item-History/README.md @@ -14,6 +14,7 @@ This listview command is used to show the past versions of the selected list ite ![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 @@ -44,6 +45,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 listview command is used to show the past versions of the selected list item in a grid. ```bash diff --git a/samples/react-list-items-menu-sp2019/.devcontainer/devcontainer.json b/samples/react-list-items-menu-sp2019/.devcontainer/devcontainer.json new file mode 100644 index 000000000..50d2cd4b9 --- /dev/null +++ b/samples/react-list-items-menu-sp2019/.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.4.1", + "image": "docker.io/m365pnp/spfx:1.4.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, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-list-items-menu-sp2019/.devcontainer/spfx-startup.sh b/samples/react-list-items-menu-sp2019/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-list-items-menu-sp2019/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-list-items-menu-sp2019/README.md b/samples/react-list-items-menu-sp2019/README.md index 8db15abfc..e294ff0d4 100644 --- a/samples/react-list-items-menu-sp2019/README.md +++ b/samples/react-list-items-menu-sp2019/README.md @@ -22,6 +22,7 @@ When the user clicks on the header it dynamically load documents. ![SharePoint 2019 | Online](https://img.shields.io/badge/SharePoint-2019%20%7C%20Online-yellow.svg) ![Teams No: Not designed for Microsoft Teams](https://img.shields.io/badge/Teams-No-red.svg "Not 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 @@ -65,6 +66,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. + ## 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-msal-msgraph/.devcontainer/devcontainer.json b/samples/react-msal-msgraph/.devcontainer/devcontainer.json new file mode 100644 index 000000000..618547c32 --- /dev/null +++ b/samples/react-msal-msgraph/.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.1.0", + "image": "docker.io/m365pnp/spfx:1.1.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-msal-msgraph/.devcontainer/spfx-startup.sh b/samples/react-msal-msgraph/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-msal-msgraph/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-msal-msgraph/README.md b/samples/react-msal-msgraph/README.md index 71fd56433..6e23d4a48 100644 --- a/samples/react-msal-msgraph/README.md +++ b/samples/react-msal-msgraph/README.md @@ -42,6 +42,7 @@ After you gave permissions, the following will information will get displayed: ![Compatible with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Compatible-green.svg) ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -75,6 +76,8 @@ Version|Date|Comments - Specify the workbench URL and be sure that **allow implicit flow** is enabled - Click on save to store these changes +> This sample can also 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 URL configuration and implicit flow](./assets/redirect-url.png) - Copy the **application id** and change add this to the [MsalWP.tsx file on line 20](./src/webparts/msalWp/components/MsalWp.tsx#20) diff --git a/samples/react-multipage/.devcontainer/devcontainer.json b/samples/react-multipage/.devcontainer/devcontainer.json new file mode 100644 index 000000000..404c35930 --- /dev/null +++ b/samples/react-multipage/.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.0.0", + "image": "docker.io/m365pnp/spfx:ga", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} diff --git a/samples/react-multipage/.devcontainer/spfx-startup.sh b/samples/react-multipage/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-multipage/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-multipage/README.md b/samples/react-multipage/README.md index 2247bbc60..09c037143 100644 --- a/samples/react-multipage/README.md +++ b/samples/react-multipage/README.md @@ -34,6 +34,7 @@ Sample poll web part allowing users to vote and view the results. ![Compatible with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Compatible-green.svg) ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -63,6 +64,8 @@ Version|Date|Comments ### Poll 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. + - create list for the poll - in SharePoint create a new list - in the list add new column called `NumVotes` of type **Number** (you can change the name later if you want) diff --git a/samples/react-news-banner/.devcontainer/devcontainer.json b/samples/react-news-banner/.devcontainer/devcontainer.json new file mode 100644 index 000000000..50d2cd4b9 --- /dev/null +++ b/samples/react-news-banner/.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.4.1", + "image": "docker.io/m365pnp/spfx:1.4.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, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-news-banner/.devcontainer/spfx-startup.sh b/samples/react-news-banner/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-news-banner/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-news-banner/README.md b/samples/react-news-banner/README.md index ea14b3b93..81c970179 100644 --- a/samples/react-news-banner/README.md +++ b/samples/react-news-banner/README.md @@ -14,6 +14,7 @@ This web part shows news information as a Banner, this information come from a l ![SharePoint 2019 | Online](https://img.shields.io/badge/SharePoint-2019%20%7C%20Online-yellow.svg) ![Teams No: Not designed for Microsoft Teams](https://img.shields.io/badge/Teams-No-red.svg "Not 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 @@ 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 This web part shows how to use PnPjs, Office-ui-fabric-react, @pnp/spfx-controls-react, @pnp/spfx-property-controls to create an News Banner diff --git a/samples/react-officegraph/.devcontainer/devcontainer.json b/samples/react-officegraph/.devcontainer/devcontainer.json new file mode 100644 index 000000000..404c35930 --- /dev/null +++ b/samples/react-officegraph/.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.0.0", + "image": "docker.io/m365pnp/spfx:ga", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} diff --git a/samples/react-officegraph/.devcontainer/spfx-startup.sh b/samples/react-officegraph/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-officegraph/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-officegraph/README.md b/samples/react-officegraph/README.md index d5e287c35..01a7ef32f 100644 --- a/samples/react-officegraph/README.md +++ b/samples/react-officegraph/README.md @@ -59,6 +59,7 @@ Sample SharePoint Framework Client-Side Web Part built using React showing docum ![Compatible with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Compatible-green.svg) ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -97,6 +98,8 @@ Version|Date|Comments - upload the **workbench.aspx** file to the Document Library in your site - navigate to the workbench page uploaded to your SharePoint site, i.e. _https://contoso.sharepoint.com/sites/my-team/documents/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 further instructions. + ## Features Sample Web Parts in this solution illustrate the following concepts on top of the SharePoint Framework: diff --git a/samples/react-offline-first/.devcontainer/devcontainer.json b/samples/react-offline-first/.devcontainer/devcontainer.json new file mode 100644 index 000000000..50d2cd4b9 --- /dev/null +++ b/samples/react-offline-first/.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.4.1", + "image": "docker.io/m365pnp/spfx:1.4.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, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-offline-first/.devcontainer/spfx-startup.sh b/samples/react-offline-first/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-offline-first/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-offline-first/README.md b/samples/react-offline-first/README.md index 1e59268f8..da6bfad01 100644 --- a/samples/react-offline-first/README.md +++ b/samples/react-offline-first/README.md @@ -38,6 +38,7 @@ read the documentation for ![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 @@ -71,6 +72,8 @@ Version |Date | Comments - Open the *workbench* on your Office 365 Developer tenant - Test out 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 demonstrates using the OfflineFirstHTTPService how to do offline diff --git a/samples/react-organisationchart/.devcontainer/devcontainer.json b/samples/react-organisationchart/.devcontainer/devcontainer.json new file mode 100644 index 000000000..404c35930 --- /dev/null +++ b/samples/react-organisationchart/.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.0.0", + "image": "docker.io/m365pnp/spfx:ga", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} diff --git a/samples/react-organisationchart/.devcontainer/spfx-startup.sh b/samples/react-organisationchart/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-organisationchart/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-organisationchart/README.md b/samples/react-organisationchart/README.md index e230ecfd7..638873131 100644 --- a/samples/react-organisationchart/README.md +++ b/samples/react-organisationchart/README.md @@ -32,6 +32,7 @@ A simple Organisation Chart web part using Office UI Fabric, React, REST API bat ![Compatible with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Compatible-green.svg) ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -61,6 +62,8 @@ Version|Date|Comments - `npm install` - `gulp serve` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Features diff --git a/samples/react-organization-chart/.devcontainer/devcontainer.json b/samples/react-organization-chart/.devcontainer/devcontainer.json new file mode 100644 index 000000000..50d2cd4b9 --- /dev/null +++ b/samples/react-organization-chart/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.4.1", + "image": "docker.io/m365pnp/spfx:1.4.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, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-organization-chart/.devcontainer/spfx-startup.sh b/samples/react-organization-chart/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-organization-chart/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-organization-chart/README.md b/samples/react-organization-chart/README.md index ab4220c56..7d6bb6a5b 100644 --- a/samples/react-organization-chart/README.md +++ b/samples/react-organization-chart/README.md @@ -17,6 +17,7 @@ This web part shows an organization chart based on specified user, and user can ![SharePoint 2019 | Online](https://img.shields.io/badge/SharePoint-2019%20%7C%20Online-yellow.svg) ![Teams No: Not designed for Microsoft Teams](https://img.shields.io/badge/Teams-No-red.svg "Not 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 @@ -46,6 +47,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 This web part shows how to use PnPjs, Office-ui-fabric-react to create an Organization Chart diff --git a/samples/react-property-bag-editor/.devcontainer/devcontainer.json b/samples/react-property-bag-editor/.devcontainer/devcontainer.json new file mode 100644 index 000000000..404c35930 --- /dev/null +++ b/samples/react-property-bag-editor/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.0.0", + "image": "docker.io/m365pnp/spfx:ga", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} diff --git a/samples/react-property-bag-editor/.devcontainer/spfx-startup.sh b/samples/react-property-bag-editor/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-property-bag-editor/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-property-bag-editor/README.md b/samples/react-property-bag-editor/README.md index b7869d2fa..93092a1a2 100644 --- a/samples/react-property-bag-editor/README.md +++ b/samples/react-property-bag-editor/README.md @@ -14,6 +14,7 @@ A set of webparts that lets you set property bag settings on site collections an ![Compatible with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Compatible-green.svg) ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -47,6 +48,8 @@ Version|Date|Comments - `npm install` - `gulp serve` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + > Include any additional steps as needed. ## Features diff --git a/samples/react-provision-assets/.devcontainer/devcontainer.json b/samples/react-provision-assets/.devcontainer/devcontainer.json new file mode 100644 index 000000000..618547c32 --- /dev/null +++ b/samples/react-provision-assets/.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.1.0", + "image": "docker.io/m365pnp/spfx:1.1.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-provision-assets/.devcontainer/spfx-startup.sh b/samples/react-provision-assets/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-provision-assets/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-provision-assets/README.md b/samples/react-provision-assets/README.md index bdb3feff7..f72b6dfca 100644 --- a/samples/react-provision-assets/README.md +++ b/samples/react-provision-assets/README.md @@ -32,6 +32,7 @@ This sample shows how we can provision Document Library, Custom List, Web and Li ![Compatible with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Compatible-green.svg) ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) @@ -72,6 +73,8 @@ Version|Date|Comments - [Deploy the package](https://docs.microsoft.com/sharepoint/dev/spfx/enterprise-guidance#management-capabilities-of--sharepoint-framework-solutions) to the app catalog - [Add the app](https://support.office.com/en-ie/article/Add-an-app-to-a-site-ef9c0dbd-7fe1-4715-a1b0-fe3bc81317cb?ui=en-US&rs=en-IE&ad=IE) to a site +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ## Features This Web Part illustrates the following concepts on top of the SharePoint Framework: diff --git a/samples/react-redux-async-immutablejs/.devcontainer/devcontainer.json b/samples/react-redux-async-immutablejs/.devcontainer/devcontainer.json new file mode 100644 index 000000000..618547c32 --- /dev/null +++ b/samples/react-redux-async-immutablejs/.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.1.0", + "image": "docker.io/m365pnp/spfx:1.1.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-redux-async-immutablejs/.devcontainer/spfx-startup.sh b/samples/react-redux-async-immutablejs/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-redux-async-immutablejs/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-redux-async-immutablejs/README.md b/samples/react-redux-async-immutablejs/README.md index 1c8345614..0d1b987fb 100644 --- a/samples/react-redux-async-immutablejs/README.md +++ b/samples/react-redux-async-immutablejs/README.md @@ -34,6 +34,7 @@ More details in my post here: [Using Redux Async Actions and ImmutableJS in Shar ![Compatible with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Compatible-green.svg) ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -61,6 +62,8 @@ Version|Date|Comments - `gulp serve` - Open the SharePoint Online version of the workbench: /_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 further instructions. + ## Why Redux and ImmutableJS Every [Redux](http://redux.js.org/) action creates a copy of the state, changes the required properties in the copy and then returns the copy as a new state. This prevents bugs where the state is changed unknowingly. diff --git a/samples/react-reduxform/.devcontainer/devcontainer.json b/samples/react-reduxform/.devcontainer/devcontainer.json new file mode 100644 index 000000000..50d2cd4b9 --- /dev/null +++ b/samples/react-reduxform/.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.4.1", + "image": "docker.io/m365pnp/spfx:1.4.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, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-reduxform/.devcontainer/spfx-startup.sh b/samples/react-reduxform/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-reduxform/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-reduxform/README.md b/samples/react-reduxform/README.md index 388b03534..e92c61d9e 100644 --- a/samples/react-reduxform/README.md +++ b/samples/react-reduxform/README.md @@ -18,6 +18,7 @@ Sample web part to demonstrate the use of [Redux-Form](https://github.com/erikra ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -47,6 +48,8 @@ Version|Date|Comments - The web part requires two custom lists in the SharePoint site. The folder "SetupScript" contains a PnP PowerShell script that will setup the custom fields, content type and the required lists. +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + - Change the site URL in the PowerShell script and execute with proper credentials to setup the lists. - Clone this repository diff --git a/samples/react-search/.devcontainer/devcontainer.json b/samples/react-search/.devcontainer/devcontainer.json new file mode 100644 index 000000000..404c35930 --- /dev/null +++ b/samples/react-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.0.0", + "image": "docker.io/m365pnp/spfx:ga", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} diff --git a/samples/react-search/.devcontainer/spfx-startup.sh b/samples/react-search/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-search/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-search/README.md b/samples/react-search/README.md index 22623c275..81adcd1bc 100644 --- a/samples/react-search/README.md +++ b/samples/react-search/README.md @@ -31,6 +31,7 @@ Sample Search Web Part with internal and external template support. This sample ![Compatible with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Compatible-green.svg) ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) @@ -66,6 +67,8 @@ Version|Date|Comments - Open the *workbench* on your Office 365 Developer tenant - Test out 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 The search web part is a sample client-side web part built on the SharePoint Framework. The web part makes use of React and the Flux pattern. diff --git a/samples/react-side-panel/.devcontainer/devcontainer.json b/samples/react-side-panel/.devcontainer/devcontainer.json new file mode 100644 index 000000000..404c35930 --- /dev/null +++ b/samples/react-side-panel/.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.0.0", + "image": "docker.io/m365pnp/spfx:ga", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} diff --git a/samples/react-side-panel/.devcontainer/spfx-startup.sh b/samples/react-side-panel/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-side-panel/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-side-panel/README.md b/samples/react-side-panel/README.md index 3bffb9c39..e7a298987 100644 --- a/samples/react-side-panel/README.md +++ b/samples/react-side-panel/README.md @@ -31,6 +31,7 @@ The web part illustrates creation and usage of Side Panel (Sidebar) control. ![Compatible with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Compatible-green.svg) ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to diff --git a/samples/react-sitepages-metadata/.devcontainer/devcontainer.json b/samples/react-sitepages-metadata/.devcontainer/devcontainer.json new file mode 100644 index 000000000..50d2cd4b9 --- /dev/null +++ b/samples/react-sitepages-metadata/.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.4.1", + "image": "docker.io/m365pnp/spfx:1.4.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, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-sitepages-metadata/.devcontainer/spfx-startup.sh b/samples/react-sitepages-metadata/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-sitepages-metadata/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-sitepages-metadata/README.md b/samples/react-sitepages-metadata/README.md index a6713dd69..e3f147fbe 100644 --- a/samples/react-sitepages-metadata/README.md +++ b/samples/react-sitepages-metadata/README.md @@ -19,6 +19,7 @@ Solution provides an enhancement to SitePages library that enables updating exis ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to diff --git a/samples/react-sp-pnp-js-property-decorators/.devcontainer/devcontainer.json b/samples/react-sp-pnp-js-property-decorators/.devcontainer/devcontainer.json new file mode 100644 index 000000000..618547c32 --- /dev/null +++ b/samples/react-sp-pnp-js-property-decorators/.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.1.0", + "image": "docker.io/m365pnp/spfx:1.1.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-sp-pnp-js-property-decorators/.devcontainer/spfx-startup.sh b/samples/react-sp-pnp-js-property-decorators/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-sp-pnp-js-property-decorators/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-sp-pnp-js-property-decorators/README.md b/samples/react-sp-pnp-js-property-decorators/README.md index c210c04e8..e33c0e152 100644 --- a/samples/react-sp-pnp-js-property-decorators/README.md +++ b/samples/react-sp-pnp-js-property-decorators/README.md @@ -15,6 +15,7 @@ You can also find more information in the [blog series about working with Custom ![Compatible with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Compatible-green.svg) ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) @@ -48,6 +49,8 @@ Version|Date|Comments - `$ gulp trust-dev-cert` - `$ gulp serve ` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ### Local Mode A browser in local mode (localhost) will be opened. https://localhost:4321/temp/workbench.html diff --git a/samples/react-staff-directory-sp2019/.devcontainer/devcontainer.json b/samples/react-staff-directory-sp2019/.devcontainer/devcontainer.json new file mode 100644 index 000000000..50d2cd4b9 --- /dev/null +++ b/samples/react-staff-directory-sp2019/.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.4.1", + "image": "docker.io/m365pnp/spfx:1.4.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, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-staff-directory-sp2019/.devcontainer/spfx-startup.sh b/samples/react-staff-directory-sp2019/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-staff-directory-sp2019/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-staff-directory-sp2019/README.md b/samples/react-staff-directory-sp2019/README.md index 31ea03b2a..3a8a3d3dc 100644 --- a/samples/react-staff-directory-sp2019/README.md +++ b/samples/react-staff-directory-sp2019/README.md @@ -33,6 +33,7 @@ This web part shows the current user's colleagues, and allows the user to search ![SharePoint 2019 | Online](https://img.shields.io/badge/SharePoint-2019%20%7C%20Online-yellow.svg) ![Teams No: Not designed for Microsoft Teams](https://img.shields.io/badge/Teams-No-red.svg "Not 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 @@ -56,6 +57,8 @@ Version|Date|Comments Please follow all the steps: +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + - Clone this repository - in the command line run: - `npm install` diff --git a/samples/react-taxonomypicker/.devcontainer/devcontainer.json b/samples/react-taxonomypicker/.devcontainer/devcontainer.json new file mode 100644 index 000000000..618547c32 --- /dev/null +++ b/samples/react-taxonomypicker/.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.1.0", + "image": "docker.io/m365pnp/spfx:1.1.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-taxonomypicker/.devcontainer/spfx-startup.sh b/samples/react-taxonomypicker/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-taxonomypicker/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-taxonomypicker/README.md b/samples/react-taxonomypicker/README.md index 4f985f838..50462a130 100644 --- a/samples/react-taxonomypicker/README.md +++ b/samples/react-taxonomypicker/README.md @@ -30,6 +30,7 @@ A Taxonomy Picker control built with [React](https://facebook.github.io/react) b ![Compatible with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Compatible-green.svg) ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -55,6 +56,8 @@ Version|Date|Comments - `$ gulp trust-dev-cert` - `$ gulp serve ` +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + #### Local Mode A browser in local mode (localhost) will be opened. https://localhost:4321/temp/workbench.html diff --git a/samples/react-tinymce/.devcontainer/devcontainer.json b/samples/react-tinymce/.devcontainer/devcontainer.json new file mode 100644 index 000000000..50d2cd4b9 --- /dev/null +++ b/samples/react-tinymce/.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.4.1", + "image": "docker.io/m365pnp/spfx:1.4.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, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-tinymce/.devcontainer/spfx-startup.sh b/samples/react-tinymce/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-tinymce/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-tinymce/README.md b/samples/react-tinymce/README.md index 581ed5488..b8118a527 100644 --- a/samples/react-tinymce/README.md +++ b/samples/react-tinymce/README.md @@ -33,6 +33,7 @@ editor is powered by the community. ![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 @@ -64,6 +65,8 @@ Version|Date|Comments - `gulp serve` - `add web part to 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 web part with possible additional details than in short summary. diff --git a/samples/react-todo-basic/.devcontainer/devcontainer.json b/samples/react-todo-basic/.devcontainer/devcontainer.json new file mode 100644 index 000000000..618547c32 --- /dev/null +++ b/samples/react-todo-basic/.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.1.0", + "image": "docker.io/m365pnp/spfx:1.1.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-todo-basic/.devcontainer/spfx-startup.sh b/samples/react-todo-basic/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-todo-basic/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-todo-basic/README.md b/samples/react-todo-basic/README.md index eace39a93..349eedb45 100644 --- a/samples/react-todo-basic/README.md +++ b/samples/react-todo-basic/README.md @@ -30,6 +30,7 @@ A simple todo web part built using react to showcase some of the SharePoint Fram ![Compatible with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Compatible-green.svg) ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -58,6 +59,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 todo basic sample web part showcases some of the SharePoint Framework developer features which will help you build web parts with great user experiences along with good coding pattern and practices for react based web parts. Below are some resources if you are not familiar with react: diff --git a/samples/react-webhooks-realtime/.devcontainer/devcontainer.json b/samples/react-webhooks-realtime/.devcontainer/devcontainer.json new file mode 100644 index 000000000..6cccae66f --- /dev/null +++ b/samples/react-webhooks-realtime/.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.3.0", + "image": "docker.io/m365pnp/spfx:1.3.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-webhooks-realtime/.devcontainer/spfx-startup.sh b/samples/react-webhooks-realtime/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-webhooks-realtime/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-webhooks-realtime/README.md b/samples/react-webhooks-realtime/README.md index e5806654c..bbc7e1c56 100644 --- a/samples/react-webhooks-realtime/README.md +++ b/samples/react-webhooks-realtime/README.md @@ -33,6 +33,7 @@ The libraries used by this web part are Socket.io, sp pnp js, moment. ![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 @@ -68,6 +69,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-yammer-api/.devcontainer/devcontainer.json b/samples/react-yammer-api/.devcontainer/devcontainer.json new file mode 100644 index 000000000..404c35930 --- /dev/null +++ b/samples/react-yammer-api/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.0.0", + "image": "docker.io/m365pnp/spfx:ga", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} diff --git a/samples/react-yammer-api/.devcontainer/spfx-startup.sh b/samples/react-yammer-api/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-yammer-api/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-yammer-api/README.md b/samples/react-yammer-api/README.md index 438cc752a..73eed923d 100644 --- a/samples/react-yammer-api/README.md +++ b/samples/react-yammer-api/README.md @@ -41,6 +41,7 @@ To enable Office 365 Identity Enforcement on `Office 365 Enterprise E3 Trial ten ![Compatible with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Compatible-green.svg) ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to @@ -76,6 +77,8 @@ Version|Date|Comments - Add Yammer app redirect URI e.g. `https://.sharepoint.com/SitePages/Home.aspx`. - Make sure the Yammer app is enabled +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. + ![Yammer app enabled](./assets/yammer-enabled-screen.png) - Copy the Yammer app client Id and redirect uri. diff --git a/samples/riot-list/.devcontainer/devcontainer.json b/samples/riot-list/.devcontainer/devcontainer.json new file mode 100644 index 000000000..404c35930 --- /dev/null +++ b/samples/riot-list/.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.0.0", + "image": "docker.io/m365pnp/spfx:ga", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} diff --git a/samples/riot-list/.devcontainer/spfx-startup.sh b/samples/riot-list/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/riot-list/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/riot-list/README.md b/samples/riot-list/README.md index c7de7c631..fe7f1c2a8 100644 --- a/samples/riot-list/README.md +++ b/samples/riot-list/README.md @@ -30,6 +30,7 @@ Simplistic sample Web Part that demonstrates the use of RiotJS in creating a Sha ![Compatible with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Compatible-green.svg) ![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) @@ -61,6 +62,8 @@ Version|Date|Comments - `Open the *workbench* on your Office 365 Developer tenant` - Basic functionality can be tested locally, data is only shown when used in context of 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. + ## Features The spfx-riot-webpart web part displays the content of the list specified in the web part properties pane.