You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/spfx/extensions/overview-extensions.md
+19-24Lines changed: 19 additions & 24 deletions
Original file line number
Diff line number
Diff line change
@@ -1,46 +1,41 @@
1
1
# Overview of SharePoint Framework Extensions (preview)
2
2
3
-
SharePoint Framework Extensions let developers extend the user experience of SharePoint, providing ways to customize more facets of the SharePoint experience including notification areas, the toolbars of SharePoint, and the views of list data. SharePoint Framework extensions are available for testing through Office 365 Developer Tenants during preview and later across all tenants, when they reach GA.
3
+
You can use SharePoint Framework Extensions to extend the SharePoint user experience. With SharePoint Frameword Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SharePoint Framework Extensions are available for testing on Office 365 developer tenants during the preview period.
4
4
5
-
> You can get a free Office 365 Developer Tenant by subscribing to the [Office 365 Developer Program](http://dev.office.com/devprogram).
5
+
> **Note:**You can get a free Office 365 developer tenant when you subscribe to the [Office 365 Developer Program](http://dev.office.com/devprogram).
6
6
7
-
SharePoint Framework Extensions add new capabilities to extend the user experience of SharePoint within modern pages and document libraries, while leveraging the familiar tools and libraries for client-side development coming from the SharePoint Framework. Specifically, the SharePoint Framework includes three new Extension types:
7
+
SharePoint Framework Extensions enable you to extend the SharePoint user experience within modern pages and document libraries, while using the familiar SharePoint Framework tools and libraries for client-side development. Specifically, the SharePoint Framework includes three new extension types:
8
8
9
-
-**ApplicationCustomizers**allow developers to add script to the page, as well as access well-known HTML element placeholders and extend them with custom renderings
10
-
-**FieldCustomizers**can be used to provide modified views to data for fields within a list
11
-
-**CommandSets**let developers extend the command surfaces of SharePoint to add new actions, along with client-side code that can be used to implement behaviors
9
+
-**ApplicationCustomizers**- Adds scripts to the page, as well as access well-known HTML element placeholders and extend them with custom renderings.
10
+
-**FieldCustomizers**- Provides modified views to data for fields within a list.
11
+
-**CommandSets**- Extends the SharePoint command surfaces to add new actions, and provides client-side code that you can use to implement behaviors.
12
12
13
-
In addition to plain JavaScript projects, you can build extensions 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.
13
+
You can build extensions alongside common scripting frameworks, such as AngularJS and React, in addition to plain JavaScript projects. For example, you can use React along with components from Office UI Fabric React to create experiences based on the same components used in Office 365.
14
14
15
-
## Getting started
16
-
If you have not yet installed the SharePoint Framework, please have a look at the following tutorial to get ready for SharePoint Framework development:
15
+
## Get started
16
+
If you haven't installed the SharePoint Framework, follow the steps to [Set up your development environment](../set-up-your-development-environment).
17
17
18
-
*[Setup your development environment](../set-up-your-development-environment)
19
-
20
-
If you have already installed the SharePoint Framework, please execute the following command to update your Yeoman templates with the latest version:
18
+
After you install the SharePoint Framework, run the following command to update your Yeoman templates with the latest version:
21
19
22
20
```
23
21
npm install -g @microsoft/generator-sharepoint
24
22
```
25
23
26
-
Get started with the tutorials for SharePoint Framework Extension development:
27
-
28
-
*[Build your first SharePoint SharePoint Extension (Hello World part 1)](./get-started/build-a-hello-world-extension)
29
-
30
-
## Updates & Feedback
24
+
Next, you can [Build your first SharePoint Framework Extension (Hello World part 1)](./get-started/build-a-hello-world-extension).
31
25
32
-
To keep track of improvements to the SharePoint Framework, including extensions releases, please take a look at:
26
+
## Stay up to date
27
+
To keep track of improvements to the SharePoint Framework, including updates to extensions, see the following:
33
28
34
29
*[@SharePoint](https://twitter.com/sharepoint) and [@OfficeDev](https://twitter.com/officedev) on Twitter
SharePoint Framework Extensions preview release is available to provide SharePoint engineering feedback around the planned capabilities and functionalities. Please use the following resources to start discussions with SharePoint engineering:
32
+
## Provide feedback
33
+
We invite you to give us your feedback on the SharePoint Framework Extensions preview release. You can use the following resources to provide feedback directly to the SharePoint engineering team:
39
34
40
-
-[sp-dev-docs repository issue list](https://github.com/SharePoint/sp-dev-docs/issues) - Questions, Issues and comments
41
-
*[SharePoint StackExchange](http://sharepoint.stackexchange.com/)(please use [#spfx](http://sharepoint.stackexchange.com/tags/spfx/), [#spfx-extensions](http://sharepoint.stackexchange.com/tags/spfx-extensions/), and [#spfx-tooling](http://sharepoint.stackexchange.com/tags/spfx-tooling/) tags)
42
-
*[SharePoint Developer](https://techcommunity.microsoft.com/t5/SharePoint-Developer/bd-p/SharePointDev)group at Microsoft Tech Community
43
-
*[SharePoint Developer UserVoice](https://sharepoint.uservoice.com/forums/329220-sharepoint-dev-platform) - New capabilities and feature requests
35
+
-[sp-dev-docs repository issue list](https://github.com/SharePoint/sp-dev-docs/issues) - Questions, issues, and comments.
36
+
*[SharePoint StackExchange](http://sharepoint.stackexchange.com/)- Tag with [#spfx](http://sharepoint.stackexchange.com/tags/spfx/), [#spfx-extensions](http://sharepoint.stackexchange.com/tags/spfx-extensions/), and [#spfx-tooling](http://sharepoint.stackexchange.com/tags/spfx-tooling/).
37
+
*[SharePoint Developer](https://techcommunity.microsoft.com/t5/SharePoint-Developer/bd-p/SharePointDev)- Microsoft Tech Community group.
38
+
*[SharePoint Developer UserVoice](https://sharepoint.uservoice.com/forums/329220-sharepoint-dev-platform) - Request new capabilities and features.
Copy file name to clipboardExpand all lines: docs/spfx/toolchain/sharepoint-framework-toolchain.md
+15-16Lines changed: 15 additions & 16 deletions
Original file line number
Diff line number
Diff line change
@@ -1,15 +1,14 @@
1
1
# SharePoint Framework Toolchain
2
2
3
-
## Overview
4
3
The SharePoint Framework toolchain is the set of build tools, framework packages, and other items that manage building and deploying your client side projects. The toolchain helps you build client-side components like web parts. It also helps you test them in your local development environment with tools such as the SharePoint Workbench. And you can use the toolchain to package and deploy to SharePoint. The toolchain also provides you with a set of build commands that help you to complete key build tasks such as code compilation, packaging the client-side project into a SharePoint app package and more.
5
4
6
5
## npm
7
-
Before diving into the various toolchain components, it’s important to understand how the SharePoint Framework uses [npm](https://www.npmjs.com/), to manage different modules in the project. npm is one of the preferred open source package managers for JavaScript client-side development.
6
+
Before diving into the various toolchain components, it’s important to understand how the SharePoint Framework uses [npm](https://www.npmjs.com/) to manage different modules in the project. npm is one of the preferred open source package managers for JavaScript client-side development.
8
7
9
-
A typically npm package consists of one or more reusable JavaScript code files called modules along with a list of dependency packages that it depends on. When you install the package, npm also installs those dependencies. The official [npm registry](https://www.npmjs.com/) consists of hundreds of packages that you can download to build your application. You can also [publish your own packages](https://docs.npmjs.com/getting-started/what-is-npm) to npm and share them with other developers. SharePoint Framework not only uses some of the npm packages in the toolchain but also publishes its [own packages to the npm registry](https://www.npmjs.com/search?q=%40microsoft%2Fsp-).
8
+
A typical npm package consists of one or more reusable JavaScript code files, called modules, along with a list of dependency packages. When you install the package, npm also installs those dependencies. The official [npm registry](https://www.npmjs.com/) consists of hundreds of packages that you can download to build your application. You can also [publish your own packages](https://docs.npmjs.com/getting-started/what-is-npm) to npm and share them with other developers. The SharePoint Framework uses some of the npm packages in the toolchain and also publishes its [own packages to the npm registry](https://www.npmjs.com/search?q=%40microsoft%2Fsp-).
10
9
11
10
### SharePoint Framework packages
12
-
SharePoint Framework consists of several npm packages that work together to help developers build client-side experiences in SharePoint.
11
+
The SharePoint Framework consists of several npm packages that work together to help you build client-side experiences in SharePoint.
13
12
14
13
The following packages are in the SharePoint Framework:
15
14
@@ -29,10 +28,10 @@ The following packages are in the SharePoint Framework:
29
28
30
29
*[@microsoft/office-ui-fabric-react-bundle](https://www.npmjs.com/package/@microsoft/office-ui-fabric-react-bundle) - Provides a custom bundle of [office-ui-fabric-react](https://www.npmjs.com/package/office-ui-fabric-react) that is optimized for use with the SharePoint Framework's module loader.
31
30
32
-
### Common build tools packages
33
-
Along with the SharePoint Framework packages described previously, a common set of build tools are also used to perform build tasks such as compiling TypeScript code to JavaScript, and converting SCSS to CSS.
31
+
### Common build tool packages
32
+
Along with the SharePoint Framework packages, a common set of build tools are also used to perform build tasks such as compiling TypeScript code to JavaScript and converting SCSS to CSS.
34
33
35
-
The following list of common build tools packages are in the SharePoint Framework:
34
+
The following common build tools packages are in the SharePoint Framework:
36
35
37
36
*[@microsoft/sp-build-core-tasks](https://www.npmjs.com/package/@microsoft/sp-build-core-tasks) - A collection of tasks for the SharePoint Framework build system, which is based on gulp. The `sp-build-core-tasks` package implements operations specific to SharePoint such as packaging solutions and writing manifests.
38
37
@@ -46,7 +45,7 @@ The following list of common build tools packages are in the SharePoint Framewor
*[@microsoft/loader-cased-file](https://www.npmjs.com/package/@microsoft/loader-cased-file) - A wrapper for webpack's [file-loader](https://www.npmjs.com/package/file-loader) that can be used to modify the casing of the resulting filename. This is useful in some scenarios, such as when using a content delivery network (CDN) that only allows lowercase filenames.
48
+
*[@microsoft/loader-cased-file](https://www.npmjs.com/package/@microsoft/loader-cased-file) - A wrapper for webpack's [file-loader](https://www.npmjs.com/package/file-loader) that can be used to modify the casing of the resulting filename. This is useful in some scenarios, such as when using a content delivery network (CDN) that only allows lowercase file names.
50
49
51
50
*[@microsoft/loader-load-themed-styles](https://www.npmjs.com/package/@microsoft/loader-load-themed-styles) - A loader that wraps the loading of CSS in script equivalent to <code>require('load-themed-styles').loadStyles( /* css text */ )</code>. It is designed to be a replacement for style-loader.
52
51
@@ -60,14 +59,14 @@ The SharePoint generator scaffolds a client-side project with a web part. The ge
60
59
### Packages installation
61
60
The generator installs required npm packages locally in the project folder. npm allows you to install a package either locally to your project, or globally. There are benefits to both, but the [general guidance](https://nodejs.org/en/blog/npm/npm-1-0-global-vs-local-installation/) is to install the npm packages locally if your code depends on those package modules. In the case of a web part project, your web part code depends on the various SharePoint and common build packages, and thus requires those packages to be installed locally.
62
61
63
-
As the packages are installed locally, npm also installs the dependencies associated with each package. You can find the packages installed under the `node_modules` folder in your project folder. This folder contains the packages along with all of their dependencies. It is ideal that this folder contains dozens to hundreds of folders as npm packages are always broken down to smaller modules and thus resulting in dozens to hundreds of packages being installed. The key SharePoint Framework packages are located under the `node_modules\@microsoft` folder. The `@microsoft` is an npm scope that collectively represents [packages published by Microsoft](https://www.npmjs.com/~microsoft).
62
+
As the packages are installed locally, npm also installs the dependencies associated with each package. You can find the packages installed under the `node_modules` folder in your project folder. This folder contains the packages along with all of their dependencies. It is ideal that this folder contains dozens to hundreds of folders, because npm packages are always broken down to smaller modules, which results in dozens to hundreds of packages being installed. The key SharePoint Framework packages are located under the `node_modules\@microsoft` folder. The `@microsoft` is an npm scope that collectively represents [packages published by Microsoft](https://www.npmjs.com/~microsoft).
64
63
65
-
Every time you create a new project using the generator, the generator installs the SharePoint Framework packages along with its dependencies for that specific project locally. In this way, npm makes it easier to manage your web part projects without affecting other projects that are in the local dev environment.
64
+
Every time you create a new project using the generator, the generator installs the SharePoint Framework packages along with its dependencies for that specific project locally. In this way, npm makes it easier to manage your web part projects without affecting other projects in the local dev environment.
66
65
67
66
### package.json
68
67
The `package.json` file in the client-side project specifies the list of dependencies the project depends on. The list defines what dependencies to install. As described earlier, each dependency could contain several more. npm allows you to define both runtime and build dependencies for your package using the `dependencies` and `devDependencies` properties. The `devDependencies` property is used when you want to use that module in your code as in the case of building web parts.
69
68
70
-
Below is the `package.json` of the [helloworld-webpart](web-parts/get-started/build-a-hello-world-web-part):
69
+
The following is the `package.json` of the [helloworld-webpart](web-parts/get-started/build-a-hello-world-web-part).
71
70
72
71
```json
73
72
{
@@ -99,12 +98,12 @@ Below is the `package.json` of the [helloworld-webpart](web-parts/get-started/bu
99
98
}
100
99
```
101
100
102
-
While there are lot of packages installed for the project, they are required only for building the web part in the dev environment. It is with the help of these packages, you are able to depend on the modules, and build, compile, bundle & package your web part for deployment. The final minified bundled version of the web part that you deploy to a CDN server or SharePoint does not include any of these packages. That said, you can also configure to include certain modules depending on your requirements. For more information, see [Add an external library to a web part](web-parts/basics/add-an-external-library).
101
+
While there are lot of packages installed for the project, they are required only for building the web part in the dev environment. With the help of these packages, you can depend on the modules, and build, compile, bundle, and package your web part for deployment. The final minified bundled version of the web part that you deploy to a CDN server or SharePoint does not include any of these packages. That said, you can also configure to include certain modules depending on your requirements. For more information, see [Add an external library to a web part](web-parts/basics/add-an-external-library).
103
102
104
103
### Working with source control systems
105
-
As project dependencies increase, the number of packages to install also increases. You don’t want to check in the `node_modules` folder, which contains all of the dependencies, into your source control system. You should exclude the `node_modules` from the list of files to ignore during check-ins.
104
+
As project dependencies increase, the number of packages to install also increases. You don’t want to check the `node_modules` folder, which contains all of the dependencies, into your source control system. You should exclude the `node_modules` from the list of files to ignore during check-ins.
106
105
107
-
If you are using `git` as your source control system, the Yeoman scaffolded web part project includes a `.gitignore` file that excludes the `node_modules` folder among other things.
106
+
If you are using `git` as your source control system, the Yeoman scaffolded web part project includes a `.gitignore` file that excludes the `node_modules` folder, among other things.
108
107
When you check out, or clone, the web part project from your source control system the first time, run the command to initialize and install all the project dependencies locally:
109
108
110
109
```
@@ -114,7 +113,7 @@ npm i
114
113
npm will scan the `package.json` file and install the required dependencies.
115
114
116
115
## Build tasks
117
-
SharePoint Framework uses [gulp](http://gulpjs.com/) as its task runner to handle processes like the following:
116
+
The SharePoint Framework uses [gulp](http://gulpjs.com/) as its task runner to handle processes like the following:
118
117
119
118
* Bundle and minify JavaScript and CSS files.
120
119
* Run tools to call the bundling and minification tasks before each build.
@@ -159,7 +158,7 @@ Build target: DEBUG
159
158
160
159
If no parameter is specified, the commands target the BUILD mode. If the `ship` parameter is specified, then the commands target the SHIP mode.
161
160
162
-
Usually, when your web part project is ready to ship or deploy in a production server, you will target SHIP. For other scenarios like testing and debugging you would target BUILD. The SHIP target also ensures that the minified version of the web part bundle is built.
161
+
Usually, when your web part project is ready to ship or deploy in a production server, you will target SHIP. For other scenarios, like testing and debugging, you would target BUILD. The SHIP target also ensures that the minified version of the web part bundle is built.
163
162
164
163
To target SHIP mode, you append the task with `--ship`:
0 commit comments