SharePoint Framework app settings

App Settings PnP SharePoint Github sample is available

Here is the SharePoint Framework client-side web part sample. 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.

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 (through PowerShell or gulp script) and change values according the environment and then start "gulp build --ship" task in an CI tool like VSTS, Jenkins.

It is one file to serve all the web parts so keep it simple and consistent. If there is setting that should not change per environment and it is specific to just one webpart then, you should create a constants class within the SPFx webpart itself to avoid some noise into the global settings file which should be reserved for environment or shared settings only.

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.

PowerShell json parsing script can easily replace the key value pairs

A DevOps person can easily create string or json parsing script to change api url setting from the DEV to the PROD target url for example. This is how it is done in my organization and works great so far.

Conclusion

We used to have web.config file and config management helper classes in the ASP.NET world, I do not know why the SPFx doesn't. Maybe it is too early and they will implement it in the next versions. Until then, that sample shows a way to do it with custom implementation.

React app settings sample on Github