sp-dev-fx-webparts/samples/react-app-settings
Joel Rodrigues a940cae3bc Update react app settings (#442)
* update code comment

* Update to SPFx 1.4.1
2018-03-09 01:34:33 +01:00
..
assets Sample that shows appSettings.json similar to Web.config appSettings (#278) 2017-08-07 16:59:08 +03:00
config Update react app settings (#442) 2018-03-09 01:34:33 +01:00
src Update react app settings (#442) 2018-03-09 01:34:33 +01:00
typings Sample that shows appSettings.json similar to Web.config appSettings (#278) 2017-08-07 16:59:08 +03: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 Sample that shows appSettings.json similar to Web.config appSettings (#278) 2017-08-07 16:59:08 +03:00
README.md Update react app settings (#442) 2018-03-09 01:34:33 +01:00
gulpfile.js Sample that shows appSettings.json similar to Web.config appSettings (#278) 2017-08-07 16:59:08 +03:00
package-lock.json Update react app settings (#442) 2018-03-09 01:34:33 +01:00
package.json Update react app settings (#442) 2018-03-09 01:34:33 +01:00
tsconfig.json Update react app settings (#442) 2018-03-09 01:34:33 +01:00
tslint.json Add tslint at the root of each SPFx project (#394) 2018-01-08 15:58:48 +02:00

README.md

SPFx React app settings webpart

Summary

This sample shows how appSettings.json 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 Continious Integration automation. Typescript module appSettings.d.ts is also added so it allows the json app settings to be imported to any webpart or react component with intellisense support.

SPFx React app settings webpart

Easy to replace values in appSettings.json if DEV, QA, PROD environments.

Since the appSettings.json is a known format, a DevOps guy can easily open it and add values according the environment then start gulp build process in an CI tool like VSTS, Jenkins.

Gulp task added to verity that the appSettings.json and appSettings.d.ts match.

I have added appSettingsGulp.js with one gulp task in it. The task starts just before solution build or on watch to verify that all the app settings match in both appSettings.json and appSettings.d.ts. If they not match, then error is thrown so the CI tool is aware that the build failed.

Keep the appSettings.json and appSettings.d.ts format as is.

Since the gulp task I created contains checks based on string operations, it is required that the appSettings.json and appSettings.d.ts are in format as provided and just key-pairs are added to the json file and respective just new properties are added to the IAppSettings interface in the appSettings.d.ts.

Used SharePoint Framework Version

drop

Applies to

Prerequisites

Solution

Solution Author(s)
react-app-settings Velin Georgiev (@VelinGeorgiev)

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

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.


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 Webpart web part.

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.