diff --git a/samples/react-image-gallery/.devcontainer/devcontainer.json b/samples/react-image-gallery/.devcontainer/devcontainer.json new file mode 100644 index 000000000..896564300 --- /dev/null +++ b/samples/react-image-gallery/.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" +} diff --git a/samples/react-image-gallery/.devcontainer/spfx-startup.sh b/samples/react-image-gallery/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-image-gallery/.devcontainer/spfx-startup.sh @@ -0,0 +1,33 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer + +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-image-gallery/.gitignore b/samples/react-image-gallery/.gitignore index d5ab57b0f..4b8ce6da2 100644 --- a/samples/react-image-gallery/.gitignore +++ b/samples/react-image-gallery/.gitignore @@ -31,3 +31,6 @@ obj # Styles Generated Code *.scss.ts + +*.cer +*.pem diff --git a/samples/react-image-gallery/README.md b/samples/react-image-gallery/README.md index 3f8083401..9262b59f2 100644 --- a/samples/react-image-gallery/README.md +++ b/samples/react-image-gallery/README.md @@ -4,10 +4,8 @@ This sample describes an SPFx application which implements an image gallery with taxonomy base filtering and typed search. This application also implements pagination. - ![Filterable Image Gallery web part built on the SharePoint Framework using React](./assets/image-gallery.gif) - ## Compatibility ![SPFx 1.14](https://img.shields.io/badge/SPFx-1.14-green.svg) @@ -39,25 +37,27 @@ Version|Date|Comments ## Minimal Path to Awesome -- Clone this repository -- in the command line run: - - `npm install` - - `gulp serve` +* 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-image-gallery) then unzip it) +* From your command line, change your current directory to the directory containing this sample (`react-image-gallery`, located under `samples`) +* in the command line run: + * `npm install` + * `gulp serve` +* Create a Departments Term set with associated child terms, for example, HR, Information Services, Sales, Marketing +* Create an Image Library and add some sample images +* Tag each image with Department Metadata Column +* Also fill in Title field for each image, this is require for typed search functionality -- Create a Departments Term set with associated child terms, for example, HR, Information Services, Sales, Marketing -- Create an Image Library and add some sample images -- Tag each image with Department Metadata Column -- Also fill in Title field for each image, this is require for typed search functionality +> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit for further instructions. ## Features Here are the main features for this application -- Taxonomy-based filtering -- Typed Search -- Right-side popup panel -- Server-side pagination using REST API +* Taxonomy-based filtering +* Typed Search +* Right-side popup panel +* Server-side pagination using REST API ## Help diff --git a/samples/react-image-gallery/assets/sample.json b/samples/react-image-gallery/assets/sample.json index 8138fdea9..a056a86a3 100644 --- a/samples/react-image-gallery/assets/sample.json +++ b/samples/react-image-gallery/assets/sample.json @@ -9,7 +9,7 @@ "This sample describe a SPFX application which implement an image gallery with taxonomy base filtering and typed search. This application also implement pagination." ], "creationDateTime": "2019-03-01", - "updateDateTime": "2019-03-01", + "updateDateTime": "2022-05-23", "products": [ "SharePoint" ], @@ -20,7 +20,7 @@ }, { "key": "SPFX-VERSION", - "value": "1.6.0" + "value": "1.14.0" } ], "thumbnails": [ diff --git a/samples/react-image-gallery/npm-shrinkwrap.json b/samples/react-image-gallery/npm-shrinkwrap.json index d88fbad7a..979a1b036 100644 --- a/samples/react-image-gallery/npm-shrinkwrap.json +++ b/samples/react-image-gallery/npm-shrinkwrap.json @@ -1,5 +1,5 @@ { - "name": "image-gallery", + "name": "react-image-gallery", "version": "0.0.1", "lockfileVersion": 1, "requires": true, @@ -3356,6 +3356,16 @@ "msal": "1.4.13", "msalLegacy": "npm:msal@1.4.12", "tslib": "~1.10.0" + }, + "dependencies": { + "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" + } + } } }, "@microsoft/sp-listview-extensibility": { @@ -16994,14 +17004,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",