Skip to content

Commit 82e0373

Browse files
nimishasatapathynimishasatapathy
committed
Updated
1 parent 803ec32 commit 82e0373

File tree

2 files changed

+375
-27
lines changed

2 files changed

+375
-27
lines changed

‎docs/spfx/sharepoint-2019-support copy.md

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
---
2+
title: SharePoint Framework development with SharePoint Server 2019 & SharePoint Server Subscription Edition
3+
description: SharePoint Server 2019 and SharePoint Server Subscription Edition (SE) both support SharePoint Framework client-side web parts in classic and modern pages, and extensions in modern pages.
4+
ms.date: 06/10/2022
5+
ms.localizationpriority: high
6+
---
7+
8+
# SharePoint Framework development with SharePoint Server 2019 & SharePoint Server Subscription Edition
9+
10+
SharePoint Server 2019 and SharePoint Server Subscription Edition (SE) both support SharePoint Framework client-side web parts in classic and modern pages, and extensions in modern pages.
11+
12+
> [!IMPORTANT]
13+
> SharePoint Server Subscription Edition (SE) has all the same dependencies and requirements for the SharePoint Framework as SharePoint Server 2019.
14+
15+
## Which version of the SharePoint Framework to use
16+
17+
Because SharePoint Online and SharePoint Server 2019 have different release cycles for new capabilities, they also have different capabilities when it comes to the SharePoint Framework. SharePoint Online always uses the latest version of the SharePoint Framework, but SharePoint Server 2019 only supports the version that matches the server-side dependencies of the deployed packages.
18+
19+
**SharePoint Server 2019 supports SharePoint Framework client-side web parts hosted on classic or modern SharePoint pages built by using the SharePoint Framework v1.4.1.** SharePoint Server 2019 also supports SharePoint Framework extensions hosted on modern SharePoint pages built using SharePoint Framework v1.4.1. This means that when you're targeting the SharePoint Server 2019 platform, you need to use the SharePoint Framework v1.4.1 because of the server-side version dependencies.
20+
21+
Starting from v1.3, the SharePoint Framework Yeoman generator supports scaffolding solutions that use both the latest version of the SharePoint Framework meant for use with SharePoint Online, and solutions that can be used with SharePoint on-premises based on the v1.1.0 or v1.4.1 of the SharePoint Framework. You don't need to install a separate version of the SharePoint Framework Yeoman generator to scaffold solutions meant for use with SharePoint on-premises.
22+
23+
## Development environment considerations
24+
25+
When you're developing SharePoint Framework client-side web parts, you need Internet connectivity to access npm packages. This is required when solutions are being scaffolded by using the SharePoint Framework Yeoman templates.
26+
27+
If Internet access isn't available for the development machines, you can set up a local on-premises registry for the required npm packages. However, this requires more software and a significant amount of work to set up and maintain local package versions with packages in the actual npm gallery.
28+
29+
The [Team-based development on the SharePoint Framework](team-based-development-on-sharepoint-framework.md) guidance document includes different options for development environment setup including when you might need to support multiple SharePoint Framework versions.
30+
31+
### Node.js, gulp-cli, and Yeoman versions
32+
33+
The dependencies for SPFx v1.4.1 frameworks, tools, and the associated versions don't match the same dependency matrix for the latest versions of SharePoint Framework. In these cases, you may need to install specific versions of the tools. We recommend you install Node.js v8.9.4, gulp v3.9.1, and Yeoman v2.0.6.
34+
35+
## Manuals for web part development and deployment with SharePoint Framework
36+
37+
Follow these steps for web part development and deployment with SharePoint Framework:
38+
39+
1. Prepare the environment for SharePoint Framework development
40+
1. Develop SharePoint Framework web part
41+
1. Verify SharePoint Framework web part on local SharePoint workbench
42+
1. Deploy SharePoint Framework solution to the SharePoint Server
43+
44+
### Prepare the environment for SharePoint Framework development
45+
46+
1. Install Node.js
47+
48+
Install **Node.js v8.9.4**; if you have **nvm** installed, use **nvm** to install **8.9.4**. Verify the version if you have **Node.js** installed.
49+
1. Install Yeoman and Gulp
50+
51+
Specify these versions:
52+
- **npm install -g [email protected]**
53+
- **npm install -g [email protected]**
54+
1. Install Yeoman SharePoint Generator
55+
56+
**npm install3 -g @microsoft/generator-sharepoint@1.9.1**. Although not the only option, version **1.9.1** can function appropriately.
57+
58+
### Develop SharePoint Framework web part
59+
60+
1. Create a directory for SharePoint Framework solution with **md spfx-webpart-onprem**.
61+
62+
1. Navigate to the above created directory with **cd spfx-webpart-onprem**.
63+
64+
1. Run Yeoman SharePoint Generator to create the solution with **yo @microsoft/sharepoint**.
65+
66+
The Yeoman SharePoint generator will allow you to provide details regarding the intended solution.
67+
68+
Ensure the following three baseline packages are available:
69+
70+
:::image type="content" source="../images/screenshot_1.png" alt-text="This is screenshot 1.":::
71+
72+
1. Select **SharePoint 2019 onwards, including SharePoint Online**.
73+
74+
Once the solution is created, select **package.json** to check if the SharePoint Framework version is 1.4.1.
75+
76+
:::image type="content" source="../images/screenshot_2.png" alt-text="This is screenshot 2.":::
77+
78+
### Verify SharePoint Framework web part on local SharePoint workbench
79+
80+
1. Browse to the **SPFx solution** directory.
81+
82+
1. Run **gulp serve**.
83+
84+
**workbench.aspx** opens, you can add your web part to the page.
85+
86+
:::image type="content" source="../images/screenshot_3.png" alt-text="This is screenshot 3.":::
87+
88+
### Deploy SharePoint Framework solution to the SharePoint Server
89+
90+
You can deploy the SharePoint Framework solution to the SharePoint Server in these steps:
91+
92+
1. Create service applications
93+
1. Prepare .sppkg package
94+
1. Create and configure app catalog site
95+
1. Add SharePoint Framework solution to modern SharePoint site
96+
1. Add SharePoint Framework web part to modern page
97+
98+
#### Create service applications
99+
100+
Ensure the following service applications are enabled on the SharePoint Server:
101+
- App Management Service
102+
- Microsoft SharePoint Foundation Subscription Settings Service
103+
- Managed Metadata Web Service
104+
105+
In Central Admin site, you can create App Management Service application and Managed Metadata Web Service application by selecting **Application Management --> Manage service applications**.
106+
107+
:::image type="content" source="../images/screenshot_4.png" alt-text="This is screenshot 4.":::
108+
109+
To create SharePoint Foundation Subscription Settings Service, use the following PowerShell command:
110+
111+
```powershell
112+
$sa = New-SPSubscriptionSettingsServiceApplication -ApplicationPool $applicationPoolName -Name $serviceApplicationName -DatabaseName $dataBaseName
113+
114+
New-SPSubscriptionSettingsServiceApplicationProxy -ServiceApplication $sa
115+
```
116+
117+
#### Prepare .sppkg package
118+
119+
1. Bundle the solution with **gulp bundle --ship**.
120+
121+
1. Package the solution with **gulp package-solution --ship**.
122+
123+
124+
#### Create and configure app catalog site
125+
126+
To create and configure App Catalog site, follow these steps:
127+
128+
1. From the **Central Administration** site, go to **Apps** and then select **Manage App Catalog**.
129+
130+
Create a local admin as user01.
131+
132+
:::image type="content" source="../images/screenshot_5.png" alt-text="This is screenshot 5.":::
133+
134+
1. Create the app catalog site by selecting **Web Application**.
135+
1. Select **Create a new app catalog site**, and then select **OK**.
136+
1. On the **Create App Catalog** page, enter site information.
137+
138+
> [!NOTE]
139+
> You need to use the above created local admin account as site collection administrator.
140+
> Ensure using no system account as site admin.
141+
142+
To configure App URLs, follow these steps:
143+
144+
1. From the **Central Administration** site, go to **Apps** and then select **Configure App URLs**.
145+
146+
:::image type="content" source="../images/screenshot_8.png" alt-text="This is screenshot 8.":::
147+
148+
1. Configure the App ___domain and App prefix.
149+
150+
#### Upload the package to app catalog
151+
152+
Follow these steps to upload the SharePoint Framework package to the app catalog to make it available on all sites:
153+
154+
1. From the SharePoint App Catalog site, select **Apps for SharePoint**.
155+
1. Select **Upload** to add SharePoint Framework package from *\sharepoint\solution* ___location.
156+
1. Select **Deploy**.
157+
158+
:::image type="content" source="../images/screenshot_9.png" alt-text="This is screenshot 9.":::
159+
160+
#### Add SharePoint Framework solution to modern SharePoint site 
161+
162+
Follow these steps to add your SharePoint Framework solution to modern SharePoint site:
163+
164+
1. From the Modern SharePoint site, select **Site Contents --> New --> App**.
165+
166+
167+
:::image type="content" source="../images/screenshot_10.png" alt-text="This is screenshot 10.":::
168+
169+
1. Add your SharePoint Framework solution to this site by selecting your **SPFx solution**.
170+
171+
:::image type="content" source="../images/screenshot_11.png" alt-text="This is screenshot 11.":::
172+
173+
You can view the web part in Site contents list after adding it to the site collection.
174+
175+
:::image type="content" source="../images/screenshot_12.png" alt-text="This is screenshot 12.":::
176+
177+
#### Add SharePoint Framework web part to modern page
178+
179+
Follow these steps to add your SharePoint Framework web part to the modern page:
180+
181+
1. Open an existing or a new modern page.
182+
1. Select **Edit**, and then select the **+** sign to add your SharePoint Framework web part to the page.
183+
184+
:::image type="content" source="../images/screenshot_13.png" alt-text="This is screenshot 13.":::
185+
186+
1. You can view the added web part on the page.
187+
188+
:::image type="content" source="../images/screenshot_14.png" alt-text="This is screenshot 14.":::
189+
190+
## Determine which version was used for a solution
191+
192+
If you have existing SharePoint Framework solutions and you'd like to confirm which version of the SharePoint Framework was used for them, you'll need to check the following locations:
193+
194+
- **.yo-rc.json**: File in the solution's root folder that stores the SharePoint Framework Yeoman template version used when the solution was created.
195+
- **package.json**: File in the solution's root folder that contains references to package versions used in the solution.
196+
- **npm-shrinkwrap.json**: File in the solution's root folder that contains information about the exact versions used (if you used the `npm shrinkwrap` command to lock down the exact versions of the solution).
197+
- **package.json**: File in the **node_modules/@microsoft/sp-webpart-base** folder that contains a `version` attribute matching the used SharePoint Framework version, if you have installed packages to your solution.
198+
199+
## Troubleshooting
200+
201+
### Impact of Node.js v6, Node.js v8, HTTP1, & HTTP2
202+
203+
Around this the time of the v1.1 release, Node.js was transitioning from Node.js v6.x to v8.x. In this update, Node.js introduced a change where the default HTTP protocol switched from HTTP1 to HTTP2. SPFx v1.1 was written for HTTP1, not HTTP2, so this change affected the local web server for SPFx v1.1 projects.
204+
205+
In Node.js v8.x, you can force HTTP1 by setting the following environment variable to instruct Node.js to use HTTP1 instead of the default HTTP2: `NODE_NO_HTTP2=1`. This environment variable only exists in Node.js v8.x. That's why if you're building SPFx solutions for SharePoint Server 2016, you should use Node.js v8.x.
206+
207+
This issue doesn't impact later versions of SPFx because they've been updated to support HTTPs.
208+
209+
For more information, see [issue #1002](https://github.com/SharePoint/sp-dev-docs/issues/1002).
210+
211+
## See also
212+
213+
- [SharePoint Framework Overview](sharepoint-framework-overview.md).
214+
- [SharePoint Server 2019 development platform](../general-development/sharepoint-2019-development-platform.md).
215+
- [Definitive guide for developers: SharePoint Framework for SharePoint Server 2019](https://www.voitanos.io/blog/definitive-guide-sharepoint-framework-sharepoint-server-2019/).
216+
- [Definitive guide for developers: SharePoint Framework for SharePoint Server SE](https://www.voitanos.io/blog/definitive-guide-sharepoint-framework-sharepoint-server-subscription-edition/).

0 commit comments

Comments
 (0)