base on SharePoint Framework web part, Teams tab, personal app, app page samples # SharePoint Framework Client-Side Web Part Samples & Tutorial Materials    [](https://twitter.com/m365pnp?s=20) [](https://www.youtube.com/channel/UC_mKdhw-V6CeCM7gTo_Iy7w) [](https://github.com/pnp/sp-dev-fx-webparts/issues) [](https://github.com/pnp/sp-dev-fx-webparts/pulls) This repository contains community samples that demonstrate different usage patterns for the SharePoint Framework client-side web parts. > We do welcome community contributions to the samples folder in this repository for demonstrating different use cases with SharePoint Framework. Notice that if you use 3rd party libraries, please make sure that library license allows distributions of it as part of your sample. SharePoint client-side web parts are controls that appear inside a SharePoint page but run locally in the browser. They're the building blocks of pages that appear on a SharePoint site. You can build client-side web parts using modern script development tools and the SharePoint workbench (a development test surface), and you can deploy your client-side web parts to classic web part pages in Office 365 tenants. In addition to plain JavaScript projects, you can build web parts alongside common scripting frameworks, such as AngularJS and React. For example, you can use React along with components from Office UI Fabric React to quickly create experiences based on the same components used in Office 365. ## Have issues or questions? Please use following logic on submitting your questions or issues to right location to ensure that they are noticed and addressed as soon as possible. * You have general question or challenge with SPFx - use [sp-dev-docs repository issue list](https://github.com/SharePoint/sp-dev-docs/issues). * You have issue on specific web part or sample - use [issue list in this repository](https://github.com/pnp/sp-dev-fx-webparts/issues). ## Additional resources * [Overview of the SharePoint Framework](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview) * [SharePoint Framework development tools and libraries](https://learn.microsoft.com/sharepoint/dev/spfx/tools-and-libraries) * [Getting Started](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant) ## Using the samples To build and start using these projects, you'll need to clone and build the projects. Clone this repository by executing the following command in your console: ```shell git clone https://github.com/pnp/sp-dev-fx-webparts.git ``` Navigate to the cloned repository folder which should be the same as the repository name: ```shell cd sp-dev-fx-webparts ``` To access the samples use the following command, where you replace `sample-folder-name` with the name of the sample you want to access. ```shell cd samples cd sample-folder-name ``` Ensure that you are using the right version of node for the solution. You can do so by consulting the `README.md` file in the sample folder you are interested in. You will see a node version recommendation; you can also consult the SPFx Compatibility Matrix at <https://aka.ms/spfx-matrix> to find the supported versions of node for the version of SPFx used by the sample. The sample folder may also contain a `.nvmrc` file, which is a version specifier that can be used with a node version manager such as [nvm](https://github.com/coreybutler/nvm-windows) or [nvs](https://github.com/jasongin/nvs), ensure that you are using the right version of node for the project. To switch to the correct version of node using nvm, run the following command in the folder containing the `.nvmrc` file: ```shell nvm use ``` If using nvs, run the following command in the folder containing the `.nvmrc` file: ```shell nvs use ``` Once the correct version of node is in use, run the following command to install the npm packages: ```shell npm install ``` This will install the required npm packages and dependencies to build and run the client-side project. Once the npm packages are installed, run the following command to preview your web parts in SharePoint Workbench: ```shell gulp serve ``` ## Authors This repository's contributors are all community members who volunteered their time to share code samples. Work is done as an open source community project, with each sample contained in their own solution. ## Contributions These samples are direct from the feature teams, SharePoint PnP core team (<http://aka.ms/m365pnp>) or shared by the community. We welcome your input on issues and suggestions for new samples. We do also welcome community contributions around the client-side web parts. If you have any questions, just let us know. Please have a look on our [Contribution Guidance](./CONTRIBUTING.md) before submitting your pull requests, so that we can get your contribution processed as fast as possible. ## Code of Conduct This repository has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [[email protected]](mailto:[email protected]) with any additional questions or comments. > Sharing is caring! <img src="https://m365-visitor-stats.azurewebsites.net/sp-dev-fx-webparts/README.md" /> ", Assign "at most 3 tags" to the expected json: {"id":"7418","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"