Updated devcontainer and sample.json
This commit is contained in:
Hugo Bernier
parent
b1f7c06ef6
commit
6523ffeb1e
|
|
@ -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.11.0",
|
||||
"image": "docker.io/m365pnp/spfx:1.11.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"
|
||||
}
|
||||
|
|
@ -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**********"
|
||||
|
|
@ -2,12 +2,11 @@
|
|||
|
||||
## Summary
|
||||
|
||||
This solution creates a customisable Tiles Web part, it uses a stored collection from the PnP `PropertyFieldCollectionData` control and allows the user to choose the colour scheme (theme or custom) and to set the size of the tiles. By default the tiles use a fluid flex layout to use the available screen area.
|
||||
This solution creates a customizable Tiles Web part, it uses a stored collection from the PnP `PropertyFieldCollectionData` control and allows the user to choose the color scheme (theme or custom) and to set the size of the tiles. By default the tiles use a fluid flex layout to use the available screen area.
|
||||
|
||||
This is a rebuild of the awesome project created by @hugoabernier [https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-tiles] so the credit goes to him!
|
||||
|
||||
|
||||
|
||||
|
||||
## Compatibility
|
||||
|
||||
|
|
@ -24,7 +23,7 @@ This is a rebuild of the awesome project created by @hugoabernier [https://githu
|
|||
## 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)
|
||||
- [Microsoft 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
|
||||
|
||||
> Get your own free development tenant by subscribing to [Microsoft 365 developer program](http://aka.ms/o365devprogram)
|
||||
|
||||
|
|
@ -40,13 +39,13 @@ react-tiles-v2 | [Omar El-Anis](https://github.com/omarelanis) @ SP Bytes www.sp
|
|||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|July 14, 2021|Initial release
|
||||
1.1|October 14, 2021|Added sorting, static tile width and unique tile colour - [fthorild](https://github.com/fthorild)
|
||||
1.1|October 14, 2021|Added sorting, static tile width and unique tile color - [fthorild](https://github.com/fthorild)
|
||||
1.1.1|March 25, 2022|Added current icon within property pane
|
||||
|
||||
## Minimal Path to Awesome
|
||||
## Minimal path to awesome
|
||||
|
||||
- Clone this repository
|
||||
- Ensure that you are at the solution folder
|
||||
- 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-tiles-v2) then unzip it)
|
||||
- From your command line, change your current directory to the directory containing this sample (`react-tiles-v2`, located under `samples`)
|
||||
- in the command-line run:
|
||||
- `npm install`
|
||||
- `gulp serve`
|
||||
|
|
@ -61,7 +60,7 @@ Description of the extension that expands upon high-level summary above.
|
|||
This extension illustrates the following concepts:
|
||||
|
||||
- Store data (including icons) in a collection from property panel
|
||||
- Allow usage of site theme or custom colours
|
||||
- Allow usage of site theme or custom colors
|
||||
- Set size of tile content based on slider bar
|
||||
- Load the data onto the page to display a tile web part
|
||||
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@
|
|||
"name": "pnp-sp-dev-spfx-web-parts-react-tiles-v2",
|
||||
"source": "pnp",
|
||||
"title": "Tiles V2",
|
||||
"shortDescription": "This solution creates a customisable Tiles Web part, it uses a stored collection from the PnP `PropertyFieldCollectionData` control and allows the user to choose the colour scheme (theme or custom) and to set the size of the tiles.",
|
||||
"shortDescription": "This solution creates a customizable Tiles Web part, it uses a stored collection from the PnP `PropertyFieldCollectionData` control and allows the user to choose the color scheme (theme or custom) and to set the size of the tiles.",
|
||||
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-tiles-v2",
|
||||
"longDescription": [
|
||||
"This solution creates a customisable Tiles Web part, it uses a stored collection from the PnP `PropertyFieldCollectionData` control and allows the user to choose the colour scheme (theme or custom) and to set the size of the tiles. By default the tiles use a fluid flex layout to use the available screen area."
|
||||
"This solution creates a customizable Tiles Web part, it uses a stored collection from the PnP `PropertyFieldCollectionData` control and allows the user to choose the color scheme (theme or custom) and to set the size of the tiles. By default the tiles use a fluid flex layout to use the available screen area."
|
||||
],
|
||||
"creationDateTime": "2021-07-14",
|
||||
"updateDateTime": "2021-10-14",
|
||||
"updateDateTime": "2022-03-25",
|
||||
"products": [
|
||||
"SharePoint"
|
||||
],
|
||||
|
|
|
|||
Loading…
Reference in New Issue