From 71a351fd99f6cd5ce6adfd1da8b5c197ed2ac153 Mon Sep 17 00:00:00 2001 From: Hugo Bernier Date: Thu, 24 Feb 2022 02:36:31 -0500 Subject: [PATCH] added container and sample.json --- .../.devcontainer/devcontainer.json | 39 +++++++++++++ .../.devcontainer/spfx-startup.sh | 51 +++++++++++++++++ .../.gitignore | 4 ++ .../README.md | 36 ++++++------ .../assets/sample.json | 56 +++++++++++++++++++ .../library/.gitignore | 4 ++ .../library/README.md | 2 +- .../library/package-lock.json | 27 ++++----- .../library/package.json | 3 +- .../webpart/.gitignore | 4 ++ .../webpart/README.md | 4 +- 11 files changed, 192 insertions(+), 38 deletions(-) create mode 100644 samples/react-save-to-onedrive-app-personal-folder/.devcontainer/devcontainer.json create mode 100644 samples/react-save-to-onedrive-app-personal-folder/.devcontainer/spfx-startup.sh create mode 100644 samples/react-save-to-onedrive-app-personal-folder/.gitignore create mode 100644 samples/react-save-to-onedrive-app-personal-folder/assets/sample.json diff --git a/samples/react-save-to-onedrive-app-personal-folder/.devcontainer/devcontainer.json b/samples/react-save-to-onedrive-app-personal-folder/.devcontainer/devcontainer.json new file mode 100644 index 000000000..3765b2cca --- /dev/null +++ b/samples/react-save-to-onedrive-app-personal-folder/.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.14.0", + "image": "docker.io/m365pnp/spfx:1.14.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + // Not needed for SPFx>= 1.12.1 + // "5432": { + // "protocol": "https", + // "label": "Workbench", + // "onAutoForward": "silent" + // }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-save-to-onedrive-app-personal-folder/.devcontainer/spfx-startup.sh b/samples/react-save-to-onedrive-app-personal-folder/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..35c50af2b --- /dev/null +++ b/samples/react-save-to-onedrive-app-personal-folder/.devcontainer/spfx-startup.sh @@ -0,0 +1,51 @@ +mkdir ~/.npm-global +export NPM_CONFIG_PREFIX=~/.npm-global +export PATH=$PATH:~/.npm-global/bin +echo -e "export NPM_CONFIG_PREFIX=~/.npm-global\nexport PATH=\$PATH:~/.npm-global/bin" >> ~/.bashrc + +echo +echo -e "\e[1;94mInstalling Node dependencies for library\e[0m" +cd library +npm install +# npm install sudo -g +gulp bundle --ship +gulp package-solution --ship +npm link + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ../spfx-dev-cert.cer + +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ../spfx-dev-cert.pem + +cd .. + +## 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;94mInstalling Node dependencies for web part\e[0m" +cd webpart +npm link manage-data +npm if +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-save-to-onedrive-app-personal-folder/.gitignore b/samples/react-save-to-onedrive-app-personal-folder/.gitignore new file mode 100644 index 000000000..196ebb4fd --- /dev/null +++ b/samples/react-save-to-onedrive-app-personal-folder/.gitignore @@ -0,0 +1,4 @@ +# .CER Certificates +*.cer +# .PEM Certificates +*.pem diff --git a/samples/react-save-to-onedrive-app-personal-folder/README.md b/samples/react-save-to-onedrive-app-personal-folder/README.md index 96c8e1eb6..4757c4f17 100644 --- a/samples/react-save-to-onedrive-app-personal-folder/README.md +++ b/samples/react-save-to-onedrive-app-personal-folder/README.md @@ -1,8 +1,8 @@ -# react-save-to-onedrive-app-personal-folder +# Save to User Application Personal Folder in OneDrive ## Summary -This solution shows how to manage data stored in user application's personal folder in OneDrive which is one of many good methods to store application data/configuration which may be easily used in apps added to SharePoint page or Teams. The solution is built of two compontents. Spfx library which provides the functionality to manage data saved to OneDrive application personal folder and Spfx webpart component which is a very simple solution that uses the library and gets or saves data. +This solution shows how to manage data stored in user application's personal folder in OneDrive which is one of many good methods to store application data/configuration which may be easily used in apps added to SharePoint page or Teams. The solution is built of two compontents. SPFx library which provides the functionality to manage data saved to OneDrive application personal folder and SPFx webpart component which is a very simple solution that uses the library and gets or saves data. ![image](./assets/to-all-sites.png) when adding solution to appcatalog make it available to all sites @@ -20,19 +20,19 @@ webpart added to teams ## Compatibility -![SPFx 1.13.0](https://img.shields.io/badge/SPFx-1.13.0-green.svg) +![SPFx 1.14](https://img.shields.io/badge/SPFx-1.14-green.svg) ![Node.js v14 | v12](https://img.shields.io/badge/Node.js-v14%20%7C%20v12-green.svg) ![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg) ![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg "SharePoint Server 2019 requires SPFx 1.4.1 or lower") ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Local Workbench Unsupported](https://img.shields.io/badge/Local%20Workbench-Unsupported-red.svg "Local workbench is no longer available as of SPFx 1.13 and above") -![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) +![Hosted Workbench (Requires permissions))](https://img.shields.io/badge/Hosted%20Workbench-(Requires%20permissions%)-yellow.svg "Requires permissions to be granted before this solution can work on the hosted workbench") ![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Applies to -- [SharePoint Framework](https://aka.ms/spfx) -- [Microsoft 365 tenant](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant) +- [SharePoint Framework](https://aka.ms/SPFx) +- [Microsoft 365 tenant](https://docs.microsoft.com/en-us/sharepoint/dev/SPFx/set-up-your-developer-tenant) ## Solution @@ -44,20 +44,20 @@ react-save-to-onedrive-app-personal-folder | [Adam Wójcik](https://github.com/A Version|Date|Comments -------|----|-------- -1.0|Februaru 21, 2022|Initial release +1.0|February 21, 2022|Initial release ## Minimal Path to Awesome - Clone this repository (or [download this solution as a .ZIP file](https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-save-to-onedrive-app-personal-folder) then unzip it) - Ensure that you are at the solution folder -- go to library folder +- go to `library` folder - in the command-line run: - `npm install` - `gulp bundle --ship` - `gulp package-solution --ship` - Add to AppCatalog and deploy (check option to make this solution available to all sites) - Approve the MS Graph API permissions in SharePoint Admin page -- go to webpart folder +- go to `webpart` folder - in the command-line run: - `npm install` - `gulp serve` @@ -65,7 +65,7 @@ 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. +> This sample can also 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 @@ -73,23 +73,23 @@ Description of the extension that expands upon high-level summary above. This extension illustrates the following concepts: -- how to use Spfx library code in webpart -- how to use Microsoft Graph api to use special approot on user OneDrive -- how to save/update data in a json file special approot folder on user OneDrive as a place to keep data a use in SharePoint or Teams +- how to use SPFx library code in webpart +- how to use Microsoft Graph API to use special approot on user OneDrive +- how to save/update data in a `json` file special approot folder on user OneDrive as a place to keep data a use in SharePoint or Teams ## References -- [Getting started with SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant) -- [Building for Microsoft teams](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-overview) -- [Use Microsoft Graph in your solution](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis) -- [Publish SharePoint Framework applications to the Marketplace](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/publish-to-marketplace-overview) +- [Getting started with SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/SPFx/set-up-your-developer-tenant) +- [Building for Microsoft teams](https://docs.microsoft.com/en-us/sharepoint/dev/SPFx/build-for-teams-overview) +- [Use Microsoft Graph in your solution](https://docs.microsoft.com/en-us/sharepoint/dev/SPFx/web-parts/get-started/using-microsoft-graph-apis) +- [Publish SharePoint Framework applications to the Marketplace](https://docs.microsoft.com/en-us/sharepoint/dev/SPFx/publish-to-marketplace-overview) - [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp) - Guidance, tooling, samples and open-source controls for your Microsoft 365 development ## Help We do not support samples, but this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues. -If you're having issues building the solution, please run [spfx doctor](https://pnp.github.io/cli-microsoft365/cmd/spfx/spfx-doctor/) from within the solution folder to diagnose incompatibility issues with your environment. +If you're having issues building the solution, please run [SPFx doctor](https://pnp.github.io/cli-microsoft365/cmd/SPFx/SPFx-doctor/) from within the solution folder to diagnose incompatibility issues with your environment. You can try looking at [issues related to this sample](https://github.com/pnp/sp-dev-fx-webparts/issues?q=label%3A%22sample%3A%20react-save-to-onedrive-app-personal-folder%22) to see if anybody else is having the same issues. diff --git a/samples/react-save-to-onedrive-app-personal-folder/assets/sample.json b/samples/react-save-to-onedrive-app-personal-folder/assets/sample.json new file mode 100644 index 000000000..b196297cb --- /dev/null +++ b/samples/react-save-to-onedrive-app-personal-folder/assets/sample.json @@ -0,0 +1,56 @@ +[ + { + "name": "pnp-sp-dev-spfx-web-parts-react-save-to-onedrive-app-personal-folder", + "source": "pnp", + "title": "Save to User Application Personal Folder in OneDrive", + "shortDescription": "This solution shows how to manage data stored in user application's personal folder in OneDrive which is one of many good methods to store application data/configuration which may be easily used in apps added to SharePoint page or Teams.", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-save-to-onedrive-app-personal-folder", + "longDescription": [ + "This solution shows how to manage data stored in user application's personal folder in OneDrive which is one of many good methods to store application data/configuration which may be easily used in apps added to SharePoint page or Teams. The solution is built of two compontents.", + "SPFx library which provides the functionality to manage data saved to OneDrive application personal folder and SFIx webpart component which is a very simple solution that uses the library and gets or saves data." + ], + "creationDateTime": "2022-02-21", + "updateDateTime": "2022-02-21", + "products": [ + "SharePoint" + ], + "metadata": [ + { + "key": "CLIENT-SIDE-DEV", + "value": "React" + }, + { + "key": "SPFX-VERSION", + "value": "1.14" + } + ], + "thumbnails": [ + { + "type": "image", + "order": 100, + "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-save-to-onedrive-app-personal-folder/assets/in-sharepoint.png", + "alt": "Web Part Preview in SharePoint" + }, + { + "type": "image", + "order": 100, + "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-save-to-onedrive-app-personal-folder/assets/in-teams.png", + "alt": "Web Part Preview in Teams" + } + ], + "authors": [ + { + "gitHubAccount": "Adam-it", + "pictureUrl": "https://github.com/Adam-it.png", + "name": "Adam Wójcik" + } + ], + "references": [ + { + "name": "Build your first SharePoint client-side web part", + "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", + "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" + } + ] + } +] \ No newline at end of file diff --git a/samples/react-save-to-onedrive-app-personal-folder/library/.gitignore b/samples/react-save-to-onedrive-app-personal-folder/library/.gitignore index d5ab57b0f..636a3337f 100644 --- a/samples/react-save-to-onedrive-app-personal-folder/library/.gitignore +++ b/samples/react-save-to-onedrive-app-personal-folder/library/.gitignore @@ -31,3 +31,7 @@ obj # Styles Generated Code *.scss.ts +# .CER Certificates +*.cer +# .PEM Certificates +*.pem diff --git a/samples/react-save-to-onedrive-app-personal-folder/library/README.md b/samples/react-save-to-onedrive-app-personal-folder/library/README.md index bc93e6a12..128d066c8 100644 --- a/samples/react-save-to-onedrive-app-personal-folder/library/README.md +++ b/samples/react-save-to-onedrive-app-personal-folder/library/README.md @@ -2,7 +2,7 @@ ## Summary -This is a Spfx library component which provides functionality to manage data stored in user application's personal folder in OneDrive which is one of many good methods to store application data/configuration which may be easily used in apps added to SharePoint page or Teams. +This is a SPFx library component which provides functionality to manage data stored in user application's personal folder in OneDrive which is one of many good methods to store application data/configuration which may be easily used in apps added to SharePoint page or Teams. ![image](../assets/to-all-sites.png) when adding solution to appcatalog make it available to all sites diff --git a/samples/react-save-to-onedrive-app-personal-folder/library/package-lock.json b/samples/react-save-to-onedrive-app-personal-folder/library/package-lock.json index e84ef170a..cab9ce607 100644 --- a/samples/react-save-to-onedrive-app-personal-folder/library/package-lock.json +++ b/samples/react-save-to-onedrive-app-personal-folder/library/package-lock.json @@ -2491,6 +2491,14 @@ "tslib": "^1.9.3" } }, + "msalLegacy": { + "version": "npm:msal@1.4.12", + "resolved": "https://registry.npmjs.org/msal/-/msal-1.4.12.tgz", + "integrity": "sha512-gjupwQ6nvNL6mZkl5NIXyUmZhTiEMRu5giNdgHMh8l5EPOnV2Xj6nukY1NIxFacSTkEYUSDB47Pej9GxDYf+1w==", + "requires": { + "tslib": "^1.9.3" + } + }, "tslib": { "version": "1.10.0", "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz", @@ -11452,8 +11460,7 @@ "inpath": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/inpath/-/inpath-1.0.2.tgz", - "integrity": "sha1-SsIZcQ7Hpy9GD/lL9CTdPvDlKBc=", - "dev": true + "integrity": "sha1-SsIZcQ7Hpy9GD/lL9CTdPvDlKBc=" }, "inquirer": { "version": "7.3.3", @@ -14856,14 +14863,6 @@ "tslib": "^1.9.3" } }, - "msalLegacy": { - "version": "npm:msal@1.4.12", - "resolved": "https://registry.npmjs.org/msal/-/msal-1.4.12.tgz", - "integrity": "sha512-gjupwQ6nvNL6mZkl5NIXyUmZhTiEMRu5giNdgHMh8l5EPOnV2Xj6nukY1NIxFacSTkEYUSDB47Pej9GxDYf+1w==", - "requires": { - "tslib": "^1.9.3" - } - }, "multicast-dns": { "version": "6.2.3", "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-6.2.3.tgz", @@ -14898,8 +14897,7 @@ "mute-stream": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz", - "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==", - "dev": true + "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==" }, "mz": { "version": "2.7.0", @@ -16051,8 +16049,7 @@ "pidof": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/pidof/-/pidof-1.0.2.tgz", - "integrity": "sha1-+6Dq4cgzWhHrgJn10PPvvEXLTpA=", - "dev": true + "integrity": "sha1-+6Dq4cgzWhHrgJn10PPvvEXLTpA=" }, "pify": { "version": "2.3.0", @@ -17234,7 +17231,6 @@ "version": "1.0.7", "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz", "integrity": "sha1-s9oZvQUkMal2cdRKQmNK33ELQMQ=", - "dev": true, "requires": { "mute-stream": "~0.0.4" } @@ -19282,7 +19278,6 @@ "version": "1.0.3", "resolved": "https://registry.npmjs.org/sudo/-/sudo-1.0.3.tgz", "integrity": "sha1-zPKGaRIPi3T4K4Rt/38clRIO/yA=", - "dev": true, "requires": { "inpath": "~1.0.2", "pidof": "~1.0.2", diff --git a/samples/react-save-to-onedrive-app-personal-folder/library/package.json b/samples/react-save-to-onedrive-app-personal-folder/library/package.json index 9ada56405..8264f7a29 100644 --- a/samples/react-save-to-onedrive-app-personal-folder/library/package.json +++ b/samples/react-save-to-onedrive-app-personal-folder/library/package.json @@ -9,7 +9,8 @@ "test": "gulp test" }, "dependencies": { - "@microsoft/sp-webpart-base": "^1.14.0-beta.5" + "@microsoft/sp-webpart-base": "^1.14.0-beta.5", + "sudo": "^1.0.3" }, "devDependencies": { "@microsoft/sp-build-web": "1.14.0-beta.5", diff --git a/samples/react-save-to-onedrive-app-personal-folder/webpart/.gitignore b/samples/react-save-to-onedrive-app-personal-folder/webpart/.gitignore index d5ab57b0f..636a3337f 100644 --- a/samples/react-save-to-onedrive-app-personal-folder/webpart/.gitignore +++ b/samples/react-save-to-onedrive-app-personal-folder/webpart/.gitignore @@ -31,3 +31,7 @@ obj # Styles Generated Code *.scss.ts +# .CER Certificates +*.cer +# .PEM Certificates +*.pem diff --git a/samples/react-save-to-onedrive-app-personal-folder/webpart/README.md b/samples/react-save-to-onedrive-app-personal-folder/webpart/README.md index d01d21741..13dd43bf5 100644 --- a/samples/react-save-to-onedrive-app-personal-folder/webpart/README.md +++ b/samples/react-save-to-onedrive-app-personal-folder/webpart/README.md @@ -2,7 +2,7 @@ ## Summary -This is a very simple Spfx webpart which presents how to use your own Spfx library in your solution. The webpart uses two methods from Spfx manage-data library to get and save data in user application's personal folder in OneDrive. +This is a very simple SPFx webpart which presents how to use your own SPFx library in your solution. The webpart uses two methods from SPFx manage-data library to get and save data in user application's personal folder in OneDrive. ![image](../assets/in-sharepoint.png) webpart added to sharepoint page @@ -57,7 +57,7 @@ Description of the extension that expands upon high-level summary above. This extension illustrates the following concepts: -- how to use Spfx library code in webpart +- how to use SPFx library code in webpart ## References