Updating structure for tutorials

This commit is contained in:
Vesa Juvonen 2017-06-28 15:41:39 +03:00
parent 8d85c6e5bb
commit afce98b92b
183 changed files with 91 additions and 86 deletions

View File

@ -1,88 +1,5 @@
# Getting started with client-side web parts
# SharePoint FrameWork client-side web part tutorials
## Summary
Tutorials around the SharePoint Framework client-side web parts to demonstrate different capabilities and possibilities on the framework. Each tutorial has it's own dedicated readme file to explain setup instructions and demonstrated capability.
This sub folders contains client-side projects includes the web parts detailed in the Getting Started walkthroughs. Technically these web parts could have remaind in one single solution, but to ensure that they match exactly what's in the tutorials, we have seperated them to dedicated solutions. Sub folders contains the following web parts:
| Solution | Getting Started Walkthrough | Video
| ------------- | ------------- | ------------- |
| hello-world | [Build your first web part](http://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/build-a-hello-world-web-part) | [video](https://www.youtube.com/watch?v=QbDtsMg88Js) |
| hello-world-sp | [Connect your client-side web part to SharePoint](http://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/connect-to-sharepoint) | [video](https://www.youtube.com/watch?v=9VMwjb2pbQ8) |
| jquery-webpart | [Add jQueryUI Accordion to your SharePoint client-side web part](http://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/add-jqueryui-accordion-to-web-part) | [video](https://www.youtube.com/watch?v=-3m__hRQxEI) |
| documentcardexample-webpart | [Use Office UI Fabric React components in your SharePoint client-side web part](http://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/use-fabric-react-components) | [video](https://www.youtube.com/watch?v=1N6kNvLxyg4) |
| asset-deployment-webpart | [Provision SharePoint assets from SharePoint Framework solutions](https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/provision-sp-assets-from-package) | coming |
You can also other SharePoint Framework releated videos from [SharePoint PnP YouTube Channel](https://aka.ms/SPPnP-Videos).
## Used SharePoint Framework Version
![GA](https://img.shields.io/badge/version-GA-green.svg)
## Applies to
* [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
## Solution
| Solution | Author(s) |
| ------------- | ------------- |
| web-part-tutorials | Microsoft SharePoint Framework Team |
## Version history
| Version | Date | Comments |
| ------------- | ------------- | ------------- |
| 0.3.0 | February 28th 2017 | Updated to GA level. |
| 0.2.0 | February 15th 2017 | Updated to RC0 level. |
| 0.1.0 | December 16th 2016 | Updated to drop 6 level. |
| 0.0.1 | August 31st 2016 | Initial release supporting SharePoint Framework developer preview. |
## 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.**
----------
## Build and run the tutorials
To build and run this client-side project, you will need to clone and build the tutorials project.
Clone this repo by executing the following command in your console:
```
git clone https://github.com/SharePoint/sp-dev-fx-webparts.git
```
Navigate to the cloned repo folder which should be the same as the repo name:
```
cd sp-dev-fx-webparts
```
Navigate to the `tutorials` folder:
```
cd tutorials
```
Navigate to the `specific web part` folder:
```
cd 'subfolder'
```
Now run the following command to install the npm packages:
```
npm install
```
This will install the required npm packages and depedencies to build and run the client-side project.
Once the npm packages are installed, run the command to preview your web parts in SharePoint Workbench:
```
gulp serve
```
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/tutorials" />
Since tutorials are build one-by-one to demonstrate the different capabilities, they are split with multiple folders demonstrating different stages of the tutorial progress.

View File

@ -0,0 +1,88 @@
# Getting started with client-side web parts
## Summary
This sub folders contains client-side projects includes the web parts detailed in the Getting Started walkthroughs. Technically these web parts could have remaind in one single solution, but to ensure that they match exactly what's in the tutorials, we have seperated them to dedicated solutions. Sub folders contains the following web parts:
| Solution | Getting Started Walkthrough | Video
| ------------- | ------------- | ------------- |
| hello-world | [Build your first web part](http://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/build-a-hello-world-web-part) | [video](https://www.youtube.com/watch?v=QbDtsMg88Js) |
| hello-world-sp | [Connect your client-side web part to SharePoint](http://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/connect-to-sharepoint) | [video](https://www.youtube.com/watch?v=9VMwjb2pbQ8) |
| jquery-webpart | [Add jQueryUI Accordion to your SharePoint client-side web part](http://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/add-jqueryui-accordion-to-web-part) | [video](https://www.youtube.com/watch?v=-3m__hRQxEI) |
| documentcardexample-webpart | [Use Office UI Fabric React components in your SharePoint client-side web part](http://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/use-fabric-react-components) | [video](https://www.youtube.com/watch?v=1N6kNvLxyg4) |
| asset-deployment-webpart | [Provision SharePoint assets from SharePoint Framework solutions](https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/provision-sp-assets-from-package) | coming |
You can also other SharePoint Framework releated videos from [SharePoint PnP YouTube Channel](https://aka.ms/SPPnP-Videos).
## Used SharePoint Framework Version
![GA](https://img.shields.io/badge/version-GA-green.svg)
## Applies to
* [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
## Solution
| Solution | Author(s) |
| ------------- | ------------- |
| web-part-tutorials | Microsoft SharePoint Framework Team |
## Version history
| Version | Date | Comments |
| ------------- | ------------- | ------------- |
| 0.3.0 | February 28th 2017 | Updated to GA level. |
| 0.2.0 | February 15th 2017 | Updated to RC0 level. |
| 0.1.0 | December 16th 2016 | Updated to drop 6 level. |
| 0.0.1 | August 31st 2016 | Initial release supporting SharePoint Framework developer preview. |
## 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.**
----------
## Build and run the tutorials
To build and run this client-side project, you will need to clone and build the tutorials project.
Clone this repo by executing the following command in your console:
```
git clone https://github.com/SharePoint/sp-dev-fx-webparts.git
```
Navigate to the cloned repo folder which should be the same as the repo name:
```
cd sp-dev-fx-webparts
```
Navigate to the `tutorials` folder:
```
cd tutorials
```
Navigate to the `specific web part` folder:
```
cd 'subfolder'
```
Now run the following command to install the npm packages:
```
npm install
```
This will install the required npm packages and depedencies to build and run the client-side project.
Once the npm packages are installed, run the command to preview your web parts in SharePoint Workbench:
```
gulp serve
```
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/tutorials" />

Some files were not shown because too many files have changed in this diff Show More