honeymoose/sp-dev-fx-webparts
1
0
Fork 0
mirror of https://github.com/pnp/sp-dev-fx-webparts.git synced 2025-02-18 19:07:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated readem, added container and sample.json

Browse Source
This commit is contained in:
Hugo Bernier 2023-03-12 20:36:47 -04:00
parent 22338667af
commit 6d15dbf491
4 changed files with 158 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
samples/react-instagram/.devcontainer/devcontainer.json Normal file
View File

@ -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.16.1",
"image": "docker.io/m365pnp/spfx:1.16.1",
// Set *default* container specific settings.json values on container create.
"settings": {},
// Add the IDs of extensions you want installed when the container is created.
"extensions": [
"editorconfig.editorconfig",
"dbaeumer.vscode-eslint"
],
// Use 'forwardPorts' to make a list of ports inside the container available locally.
"forwardPorts": [
4321,
35729
],
"portsAttributes": {
"4321": {
"protocol": "https",
"label": "Manifest",
"onAutoForward": "silent",
"requireLocalPort": true
},
// Not needed for SPFx>= 1.12.1
// "5432": {
// "protocol": "https",
// "label": "Workbench",
// "onAutoForward": "silent"
// },
"35729": {
"protocol": "https",
"label": "LiveReload",
"onAutoForward": "silent",
"requireLocalPort": true
}
},
"postCreateCommand": "bash .devcontainer/spfx-startup.sh",
"remoteUser": "node"
}

33
samples/react-instagram/.devcontainer/spfx-startup.sh Normal file
View File

@ -0,0 +1,33 @@
echo
echo -e "\e[1;94mInstalling Node dependencies\e[0m"
npm install
## commands to create dev certificate and copy it to the root folder of the project
echo
echo -e "\e[1;94mGenerating dev certificate\e[0m"
gulp trust-dev-cert
# Convert the generated PEM certificate to a CER certificate
openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer
# Copy the PEM ecrtificate for non-Windows hosts
cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem
## add *.cer to .gitignore to prevent certificates from being saved in repo
if ! grep -Fxq '*.cer' ./.gitignore
then
echo "# .CER Certificates" >> .gitignore
echo "*.cer" >> .gitignore
fi
## add *.pem to .gitignore to prevent certificates from being saved in repo
if ! grep -Fxq '*.pem' ./.gitignore
then
echo "# .PEM Certificates" >> .gitignore
echo "*.pem" >> .gitignore
fi
echo
echo -e "\e[1;92mReady!\e[0m"
echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********"

42
samples/react-instagram/README.md
View File

@ -41,52 +41,64 @@ This web part needs an Instagram user token. An Instagram developer account is r
Follow the steps to generate your user access token.
Step 1
### Step 1
Go to developers.facebook.com and sign in to your Facebook account. Click on the "My Apps" button on the top right.
![Step 1](./assets/usertoken-step1.png)
Step 2
### Step 2
Click on the "Create App" button.
![Step 2](./assets/usertoken-step2.png)
Step 3
### Step 3
Select either "Consumer" or "None" as your application type.
![Step 3](./assets/usertoken-step3.png)
Step 4
### Step 4
Give your application a name, enter your contact email, and create your app.
![Step 4](./assets/usertoken-step4.png)
Step 5
### Step 5
Re-enter your Facebook account password
![Step 5](./assets/usertoken-step5.png)
Step 6
### Step 6
Click on the "Set Up" button in the "Instagram Basic Display" box.
![Step 6](./assets/usertoken-step6.png)
Step 7
### Step 7
Click on "Create New App" and click on "Create App" from the pop up to create a new instagram app id.
![Step 7](./assets/usertoken-step7.png)
Step 8
### Step 8
Save your changes. In the "User Token Generator" section, click on the "Add or Remove Instagram Testers" button, and follow the instructions.
![Step 8](./assets/usertoken-step8.png)
Step 9
### Step 9
Click on the link "apps and websites" link to manage instagram tester invitations and click on accept.
![Step 9](./assets/usertoken-step9.png)
![Step 10](./assets/usertoken-step10.png)
Step 11
### Step 11
Click on "Basic Display", click on "Generate Token" under "User Token Generator" and from the pop up click on "continue as <testername>".
![Step 11](./assets/usertoken-step11.png)
Step 12
### Step 12
Click on "Allow" from the pop up to authorise the app to retrieve profile and media information about the instagram user.
![Step 12](./assets/usertoken-step12.png)
Step 13
### Step 13
Copy the user token to be used on the webpart.
![Step 13](./assets/usertoken-step13.png)
@ -107,7 +119,7 @@ You must then enter this user token in the web part properties to display the in
* add _Instagram Feed_ web part
* configure web part
> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions.
> This sample can also 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
@ -130,10 +142,8 @@ For questions regarding this sample, [create a new question](https://github.com/
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aenhancement%2Csample%3A%20react-instagram&template=question.yml&sample=react-instagram&authors=@AJIXuMuK&title=react-instagram%20-%20).
## Disclaimer
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
**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.**
<img src="https://pnptelemetry.azurewebsites.net/sp-dev-fx-webparts/samples/react-instagram" />

50
samples/react-instagram/assets/sample.json Normal file
View File

@ -0,0 +1,50 @@
[
{
"name": "pnp-sp-dev-spfx-web-parts-react-instagram",
"source": "pnp",
"title": "Instagram Feed",
"shortDescription": "Sample web part to showcase an Instagram feed.",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-instagram",
"downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-instagram",
"longDescription": [
"Sample web part to showcase an Instagram feed."
],
"creationDateTime": "2023-03-12",
"updateDateTime": "2023-03-12",
"products": [
"SharePoint"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "React"
},
{
"key": "SPFX-VERSION",
"value": "1.16.1"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-instagram/assets/instagram-feed.png",
"alt": "Web Part Preview"
}
],
"authors": [
{
"gitHubAccount": "reshmee011",
"pictureUrl": "https://github.com/reshmee011.png",
"name": "Reshmee Auckloo"
}
],
"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"
}
]
}
]