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/web-parts/get-started/hosting-webpart-from-office-365-cdn.md
+78-86Lines changed: 78 additions & 86 deletions
Original file line number
Diff line number
Diff line change
@@ -34,92 +34,88 @@ You can also follow these steps by watching this video on the SharePoint PnP You
34
34
35
35
1. Ensure that you have the latest version of the SharePoint Online Management Shell by downloading it from the [Microsoft Download site](https://www.microsoft.com/en-us/download/details.aspx?id=35588).
36
36
37
-
> [!TIP]
38
-
> If you are using a non-Windows machine, you cannot use the SharePoint Online Management Shell. You can, however, manage these settings by using [Office 365 CLI](https://sharepoint.github.io/office365-cli/).
37
+
> [!TIP]
38
+
> If you are using a non-Windows machine, you cannot use the SharePoint Online Management Shell. You can, however, manage these settings by using [Office 365 CLI](https://sharepoint.github.io/office365-cli/).
39
39
40
-
2. Connect to your SharePoint Online tenant with a PowerShell session.
40
+
1. Connect to your SharePoint Online tenant with a PowerShell session.
3. Get the current status of public CDN settings from the tenant level by executing the following commands one-by-one.
46
+
1. Get the current status of public CDN settings from the tenant level by executing the following commands one-by-one.
47
47
48
+
```powershell
49
+
Get-SPOTenantCdnEnabled -CdnType Public
50
+
Get-SPOTenantCdnOrigins -CdnType Public
51
+
Get-SPOTenantCdnPolicies -CdnType Public
52
+
```
48
53
49
-
```powershell
50
-
Get-SPOTenantCdnEnabled -CdnType Public
51
-
Get-SPOTenantCdnOrigins -CdnType Public
52
-
Get-SPOTenantCdnPolicies -CdnType Public
53
-
```
54
+
SharePoint Framework solutions can automatically benefit from the Office 365 Public CDN as long as it's enabled in your tenant. When CDN is enabled, `*/CLIENTSIDEASSETS` origin is automatically added as a valid origin.
54
55
55
-
SharePoint Framework solutions can automatically benefit from the Office 365 Public CDN as long as it's enabled in your tenant. When CDN is enabled, `*/CLIENTSIDEASSETS` origin is automatically added as a valid origin.
56
+
1. Enable public CDN in the tenant.
56
57
57
-
4. Enable public CDN in the tenant.
58
+
```powershell
59
+
Set-SPOTenantCdnEnabled -CdnType Public
60
+
```
58
61
59
-
```powershell
60
-
Set-SPOTenantCdnEnabled -CdnType Public
61
-
```
62
+
1. Confirm settings by selecting `Y` and then Enter.
62
63
63
-
5. Confirm settings by selecting `Y` and then Enter.
64
+
64
65
65
-
66
+
Now the public CDN has been enabled in the tenant by using the default file type configuration allowed. This means that the following file type extensions are supported: CSS, EOT, GIF, ICO, JPEG, JPG, JS, MAP, PNG, SVG, TTF, and WOFF.
66
67
67
-
Now the public CDN has been enabled in the tenant by using the default file type configuration allowed. This means that the following file type extensions are supported: CSS, EOT, GIF, ICO, JPEG, JPG, JS, MAP, PNG, SVG, TTF, and WOFF.
68
+
SharePoint Framework solutions can automatically benefit from the Office 365 Public CDN as long as it is enabled in your tenant. When the CDN is enabled, the `*/CLIENTSIDEASSETS` origin is automatically added as a valid origin.
68
69
69
-
SharePoint Framework solutions can automatically benefit from the Office 365 Public CDN as long as it is enabled in your tenant. When the CDN is enabled, the `*/CLIENTSIDEASSETS` origin is automatically added as a valid origin.
70
+
> [!NOTE]
71
+
> If you have previously enabled Office 365 CDN, you should re-enable the public CDN so that you have the `*/CLIENTSIDEASSETS`entry added as a valid CDN origin for public CDN. If this entry is not present and the public CDN is enabled in your tenant, bundle requests will contain the token hostname `spclientsideassetlibrary` in their URL, causing the requests to fail. You can add this missing entry by using
72
+
>
73
+
>`Add-SPOTenantCdnOrigin -CdnType Public -OriginUrl */CLIENTSIDEASSETS`
70
74
71
-
> [!NOTE]
72
-
> If you have previously enabled Office 365 CDN, you should re-enable the public CDN so that you have the `*/CLIENTSIDEASSETS`entry added as a valid CDN origin for public CDN. If this entry is not present and the public CDN is enabled in your tenant, bundle requests will contain the token hostname `spclientsideassetlibrary` in their URL, causing the requests to fail. You can add this missing entry by using
73
-
>
74
-
>`Add-SPOTenantCdnOrigin -CdnType Public -OriginUrl */CLIENTSIDEASSETS`
75
+
1. You can double-check the current setup of your end-points. Execute the following command to get the list of CDN origins from your tenant:
75
76
76
-
6. You can double-check the current setup of your end-points. Execute the following command to get the list of CDN origins from your tenant:
77
+
```powershell
78
+
Get-SPOTenantCdnOrigins -CdnType Public
79
+
```
77
80
78
-
```powershell
79
-
Get-SPOTenantCdnOrigins -CdnType Public
80
-
```
81
+
Notice that when you enable the CDN for the first time, the default configuration to enable default origins will take a while (approximately 15 minutes). Configuration is completed when there is no **(configuration pending)** messages when you execute the `Get-SPOTenantCdnOrigins -CdnType Public` command.
81
82
82
-
Notice that when you enable the CDN for the first time, the default configuration to enable default origins will take a while (approximately 15 minutes). Configuration is completed when there is no **(configuration pending)** messages when you execute the `Get-SPOTenantCdnOrigins -CdnType Public` command.
83
-
84
-
85
-
86
-
> [!NOTE]
87
-
> When the origin is listed without the *(configuration pending)* text, it is ready to be used in your tenant. This is the indication of an on-going configuration between SharePoint Online and the CDN system.
83
+
88
84
85
+
> [!NOTE]
86
+
> When the origin is listed without the *(configuration pending)* text, it is ready to be used in your tenant. This is the indication of an on-going configuration between SharePoint Online and the CDN system.
89
87
90
88
## Finalize solution for deployment
91
89
92
90
1. Switch to the console and make sure you are still in the project directory that you used to set up your web part project.
91
+
1. End the possible `gulp serve` task by selecting Ctrl+C, and ensure that you are in your project directory:
93
92
94
-
2. End the possible `gulp serve` task by selecting Ctrl+C, and ensure that you are in your project directory:
95
-
96
-
```
97
-
cd helloworld-webpart
98
-
```
93
+
```shell
94
+
cd helloworld-webpart
95
+
```
99
96
100
97
## Review solution settings
101
98
102
99
1. Open the **HelloWorldWebPart** web part project in Visual Studio Code or your preferred IDE.
103
-
104
-
2. Open **package-solution.json** from the **config** folder.
105
-
106
-
The **package-solution.json** file defines the package metadata as shown in the following code:
The default value for the **includeClientSideAssets** is `true`, which means that static assets are packaged automatically inside of the *.sppkg* files, and you do not need to separately host your assets from an external system.
125
121
@@ -131,46 +127,42 @@ If *Office 365 CDN* is enabled, it is used automatically with default settings.
131
127
132
128
1. Execute the following task to bundle your solution. This executes a release build of your project by using a dynamic label as the host URL for your assets. This URL is automatically updated based on your tenant CDN settings.
133
129
134
-
```
135
-
gulp bundle --ship
136
-
```
137
-
138
-
2. Execute the following task to package your solution. This creates an updated **helloworld-webpart.sppkg** package on the **sharepoint/solution** folder.
139
-
140
-
```
141
-
gulp package-solution --ship
142
-
```
143
-
144
-
> [!NOTE]
145
-
> If you are interested in what actually got packaged inside of the sppkg file, you can look in the content of the **sharepoint/solution/debug** folder.
146
-
147
-
3. Upload or drag and drop the newly created client-side solution package to the app catalog in your tenant.
130
+
```shell
131
+
gulp bundle --ship
132
+
```
148
133
149
-
4. Because you already deployed the package, you are prompted as to whether to replace the existing package. Select **Replace It**.
134
+
1. Execute the following task to package your solution. This creates an updated **helloworld-webpart.sppkg** package on the **sharepoint/solution** folder.
5. Notice how the **___domain** list in the prompt says *SharePoint Online*. This is because the content is either served from the Office 365 CDN or from the app catalog, depending on the tenant settings. Select **Deploy**.
140
+
> [!NOTE]
141
+
> If you are interested in what actually got packaged inside of the sppkg file, you can look in the content of the **sharepoint/solution/debug** folder.
154
142
155
-
143
+
1. Upload or drag and drop the newly created client-side solution package to the app catalog in your tenant.
144
+
1. Because you already deployed the package, you are prompted as to whether to replace the existing package. Select **Replace It**.
156
145
157
-
6. Open the site where you previously installed the **helloworld-webpart-client-side-solution** or install the solution to a new site.
7. After the solution has been installed, select **Add a page** from the *gear* menu, and select **HelloWorld**from the modern page web part picker to add your custom web part to page.
148
+
1. Notice how the **___domain** list in the prompt says *SharePoint Online*. This is because the content is either served from the Office 365 CDN or from the app catalog, depending on the tenant settings. Select **Deploy**.
160
149
161
-
150
+
162
151
163
-
8. Notice how the web part is rendered even though you are not running the node.js service locally.
152
+
1. Open the site where you previously installed the **helloworld-webpart-client-side-solution** or install the solution to a new site.
153
+
1. After the solution has been installed, select **Add a page** from the *gear* menu, and select **HelloWorld** from the modern page web part picker to add your custom web part to page.
164
154
165
-
155
+
166
156
167
-
9. Save changes on the page with the web part.
157
+
1. Notice how the web part is rendered even though you are not running the node.js service locally.
168
158
169
-
10. Select **F12** to open up developer tools.
159
+
170
160
171
-
11. Extend **publiccdn.sharepointonline.com** under the source and notice how the **hello-world-web-part** file is loaded from the Public CDN URL pointing dynamically to a library located under the app catalog site collection.
161
+
1. Save changes on the page with the web part.
162
+
1. Select **F12** to open up developer tools.
163
+
1. Extend **publiccdn.sharepointonline.com** under the source and notice how the **hello-world-web-part** file is loaded from the Public CDN URL pointing dynamically to a library located under the app catalog site collection.
172
164
173
-
165
+
174
166
175
167
> [!NOTE]
176
168
> If you would not have CDN enabled in your tenant, and the `includeClientSideAssets` setting would be `true`in the **package-solution.json**, the loading URL for the assets would be dynamically updated and pointing directly to the ClientSideAssets folder located in the app catalog site collection. In this example case, the URL would be `https://sppnp.microsoft.com/sites/apps/ClientSideAssets/`. This change is automatic depending on your tenant settings and it does not require any changes in the actual solution package.
0 commit comments