sp-dev-fx-webparts/samples/react-versiondisplay
Hugo Bernier 7ed51a0838 Updated sample JSON 2021-03-15 03:48:14 -04:00
..
assets Updated sample JSON 2021-03-15 03:48:14 -04:00
config Initial version 2020-04-10 15:27:14 -04:00
src Initial version 2020-04-10 22:40:52 -04:00
teams Initial version 2020-04-10 15:27:14 -04:00
.editorconfig Initial version 2020-04-10 15:27:14 -04:00
.gitignore Initial version 2020-04-10 15:27:14 -04:00
.yo-rc.json Initial version 2020-04-10 15:27:14 -04:00
README.md Update README.md 2020-11-08 22:47:22 -05:00
gulpfile.js Initial version 2020-04-10 15:27:14 -04:00
package-lock.json Initial version 2020-04-10 15:27:14 -04:00
package.json Initial version 2020-04-10 15:27:14 -04:00
tsconfig.json Initial version 2020-04-10 15:27:14 -04:00
tslint.json Initial version 2020-04-10 15:27:14 -04:00

README.md

page_type products languages extensions
sample
office-sp
javascript
typescript
contentType technologies platforms createdDate description
samples
SharePoint Framework
React
4/10/2020 12:00:00 AM Display your SharePoint solution version within your web parts

Version Display

Summary

Display your SharePoint solution version within your web parts.

Version Display

Used SharePoint Framework Version

1.10.0

Applies to

Prerequisites

There are no pre-requisites.

Solution

Solution Author(s)
react-versiondisplay Hugo Bernier (Tahoe Ninjas, @bernier)

Version history

Version Date Comments
1.0 March 31, 2020 Initial release

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
  • Set the version node in the package.json file, or by using npm version major, npm version minor or npm version patch
  • in the command line run:
    • npm install
    • gulp serve

Features

The sample uses a custom gulp task to synchronize the version node from the NodeJS package.json to the SharePoint solution's package-solution.json.

The solution demonstrates how to import the package-solution.json into a web part using a static import and a require statement.

Using npm version to set the version

To change the package.json version (which will also change your SharePoint solution version), use npm version, using one of the following parameters:

npm version major
npm version minor
npm version patch

The following table shows when you should call which npm version command, depending on the types of changes you're making to your solution:

Type of change Stage Versioning rule Example version NPM command
First release New solution Start with 1.0.0 1.0.0 npm version major
Backward compatible bug fixes Patch release Increment the third digit 1.0.1 npm version patch
Backward compatible new features Minor release Increment the middle digit and reset last digit to zero 1.1.0 npm version minor
Changes that break backward compatibility Major release Increment the first digit and reset middle and last digits to zero 2.0.0 npm version major

To use the custom gulp task in your solutions

NOTE: if you use the PnP SPFx Yeoman generator, there is already a built-in gulp command that will synchronize your version number when you use npm version. You only need to follow the steps below if you use the regular SPFx Yeoman generator.

If you'd like to use the custom gulp task in your solutions, copy the code from this solution's gulpfile.js between:

// BEGIN: Add custom version sync task

and

// END: Add custom version sync task

To your own gulpfile.js.

To use the version using the web part's manifest

The BaseClientSideWebPart class context property provides a manifest which contains a version property. To use it in your web part, simply use:

this.context.manifest.version

This approach provides a version number that follows the 1.0.0 format, instead of the usual 1.0.0.0 format. However, since the gulp tasks describe above append an additional .0 to the end of the package.json version number, you can choose to append .0 yourself when displaying the manifest version. For example:

this.context.manifest.version + '.0'

To use the version using a static import

  1. Copy the content of this solution's src\typings.d.ts to your own src folder in your own project.
  2. In the code where you want to insert the solution version, add the following import statement:
import * as packageSolution from '../../../config/package-solution.json';

Keep in mind that you may have to adjust the path to your package-solution.json depending on where you're adding the code within your solution.

To use the version using a require

In the code where you want to insert the solution version, add the following require statement:

const packageSolution: any = require("../../../config/package-solution.json");

Keep in mind that you may have to adjust the path to your package-solution.json depending on where you're adding the code within your solution.

For More Information

If you'd like to read more about the concepts illustrated in this sample, please refer to the following links: