How to contribute?¶
You can contribute to this project at multiple levels:
- Help us with the issues list by:
- Answer questions from the community
- Fix issues in the code
- Improve documentation by:
- Correcting typos
- Clarify configuration and examples
- Add business scenario tutorials
- Add new reusable components or suggestions providers to the extensibility library.
- Add Web Part translations
As a result, we accept pull requests from the community. You can refer to this post by Hugo Bernier to know how make a PR on a GitHub repository.
Your PR must target the
Your PR will be automatically rejected if
- It alters too much the core architecture of the solution or the amount of code is to important to be reviewed properly.
- You don't provide any detailled steps to test it.
- It contains a new feature that was not discussed previously with the maintainers.
Setting up the solution locally¶
Before making any PR, you need to setup this project locally on your machine. This solution is composed of three distinct parts:
||SPFx Web Parts code|
||SPFx library component containing shared code between core Web Parts and extensibilty library.|
||Reusable components to extend capabilities of core Web Parts https://github.com/microsoft-search/pnp-modern-search-extensibility-samples.|
Setup the search-extensibility project¶
By default, the
search-extensibility-demo projects use the npm reference
Follow these steps only if you intend to perform some changes on the
Because this project is published as an npm reference, any change is critical.
Please do not commit changes if you are not sure about what you are doing.
search-extensibilty project is an SPFx library component containing all the shared interfaces for the
search-extensibility-demo other SPFx projects. As a result, a symbolic link must be build to these projects first before it can be used:
- Open the
search-extensibilityproject and install dependencies using
npm ior your favorite package manager.
- Build the project using the command
npm run buildor
- Run the command
npm linkto create a symbolic link.
You can also refer to the official SPFx documentation about library component usage.
A symbolic link is a shortcut that points to another directory or another project (in this case) on your system
Setup the search-parts and search-extensibility-demo projects¶
- From the
- Build the project using
npm run buildor
If you made local changes on the
search-extensibility project, after each
npm i, you must link your local
search-extensibility project using the command
npm link @pnp/modern-search-extensibility
Debug the solution¶
- From Visual Studio Code console or any other console, from the
search-partsfolder, use the
npm run servecommand to start the server. We use SPFx Fast Serve Tool from Sergei Sergeev to speed up development process.
- From Visual Studio Code, use the 'Hosted Workbench' debug configuration with your URL to debug the Web Parts. Any changes to the code will trigger a new build and refresh your page automatically within seconds.