sp-dev-fx-webparts/samples/react-app-settings
dependabot[bot] ade1e801cd
Bump xml2js and @microsoft/sp-build-web in /samples/react-app-settings
Bumps [xml2js](https://github.com/Leonidas-from-XIV/node-xml2js) to 0.5.0 and updates ancestor dependency [@microsoft/sp-build-web](http://aka.ms/spfx). These dependencies need to be updated together.


Updates `xml2js` from 0.4.23 to 0.5.0
- [Commits](https://github.com/Leonidas-from-XIV/node-xml2js/commits/0.5.0)

Updates `@microsoft/sp-build-web` from 1.15.2 to 1.17.2

---
updated-dependencies:
- dependency-name: xml2js
  dependency-type: indirect
- dependency-name: "@microsoft/sp-build-web"
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>
2023-05-13 18:42:44 +00:00
..
.devcontainer Added 1.7.x containers 2022-02-16 01:12:30 -05:00
assets Changed docs links to learn 2022-10-24 09:42:45 -04:00
config App Settings sample updated to v1.7.1, devops pipelines added (#803) 2019-03-09 12:33:33 +02:00
devops App Settings sample updated to v1.7.1, devops pipelines added (#803) 2019-03-09 12:33:33 +02:00
src App Settings sample updated to v1.7.1, devops pipelines added (#803) 2019-03-09 12:33:33 +02:00
teams App Settings sample updated to v1.7.1, devops pipelines added (#803) 2019-03-09 12:33:33 +02:00
teams_iceCreamShop App Settings sample updated to v1.7.1, devops pipelines added (#803) 2019-03-09 12:33:33 +02:00
.editorconfig Sample that shows appSettings.json similar to Web.config appSettings (#278) 2017-08-07 16:59:08 +03:00
.gitattributes Sample that shows appSettings.json similar to Web.config appSettings (#278) 2017-08-07 16:59:08 +03:00
.gitignore Sample that shows appSettings.json similar to Web.config appSettings (#278) 2017-08-07 16:59:08 +03:00
.npmignore Sample that shows appSettings.json similar to Web.config appSettings (#278) 2017-08-07 16:59:08 +03:00
.yo-rc.json App Settings sample updated to v1.7.1, devops pipelines added (#803) 2019-03-09 12:33:33 +02:00
README.md Updated contributors for readmes 2023-03-15 00:11:27 -04:00
gulpfile.js App Settings sample updated to v1.7.1, devops pipelines added (#803) 2019-03-09 12:33:33 +02:00
package-lock.json Bump xml2js and @microsoft/sp-build-web in /samples/react-app-settings 2023-05-13 18:42:44 +00:00
package.json Bump xml2js and @microsoft/sp-build-web in /samples/react-app-settings 2023-05-13 18:42:44 +00:00
tsconfig.json App Settings sample updated to v1.7.1, devops pipelines added (#803) 2019-03-09 12:33:33 +02:00
tslint.json App Settings sample updated to v1.7.1, devops pipelines added (#803) 2019-03-09 12:33:33 +02:00

README.md

page_type products languages extensions
sample
office-sp
javascript
typescript
contentType technologies platforms createdDate
samples
SharePoint Framework
react
8/1/2017 12:00:00 AM

App Settings

Summary

This sample shows how AppSettings.ts file can be added and used within SharePoint Framewrok webparts similar to the Web.config / App.config key value app settings in .NET Framework projects. That allows better DevOps and continuous integration (CI/CD) automation. The AppSettings.ts is transpiled/compiled with your SPFx solution which differs from the way the web.config. With .Net web.config file we would be able to update independently without the need of compiling DLLs. If that behavior is required, you can store your app settings in a SharePoint list and change them from there. However, that will have performance degradation over if the setting was part of the SPFx code where the logic can get a setting value in milliseconds.

SPFx React app settings webpart

Replace values in AppSettings.ts if DEV, QA, PROD environments with Azure DevOps pipeline.

Azure DevOps pipelines configurations are included to demonstrate how the AppSettings.ts values can be changed per different environments. Please refer to the devops/configurations folder to see how this can be setup for your pipeline.

Compatibility

⚠️ Important
Every SPFx version is only compatible with specific version(s) of Node.js. In order to be able to build this sample, please ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.
Refer to https://aka.ms/spfx-matrix for more information on SPFx compatibility.

SPFx 1.7.1 Node.js v8 Compatible with SharePoint Online Does not work with SharePoint 2019 Does not work with SharePoint 2016 (Feature Pack 2) Local Workbench Compatible Hosted Workbench Compatible Compatible with Remote Containers

Applies to

Prerequisites

Contributors

Version history

Version Date Comments
0.0.1 August 03, 2017 Initial commit
0.0.2 March 08, 2018 Update to SPFx 1.4.1
0.0.3 March 03, 2019 Update to SPFx 1.7.1

Minimal Path to Awesome

  • Clone this repository.
  • Open the command line, navigate to the web part folder and execute:
    • npm i
    • gulp serve
  • Navigate to the local or hosted version of the SharePoint workbench.(https://<your_tenant>.sharepoint.com/sites/<your_site>/_layouts/15/workbench.aspx).
  • Add the React AppSettings Web part web part.

This sample can also be opened with VS Code Remote Development. Visit https://aka.ms/spfx-devcontainer for further instructions.

Features

This Web Part illustrates the following concepts on top of the SharePoint Framework:

  • Using React for building SharePoint Framework client-side web parts.
  • The use of app settings and passing the app settings to React components.

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 from within the solution folder to diagnose incompatibility issues with your environment.

You can try looking at issues related to this sample to see if anybody else is having the same issues.

You can also try looking at discussions related to this sample and see what the community is saying.

If you encounter any issues while using this sample, create a new issue.

For questions regarding this sample, create a new question.

Finally, if you have an idea for improvement, make a suggestion.

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.