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
# Hosting extension from Office 365 CDN (Hello world part 4)
2
2
3
-
>**Note:** The SharePoint Framework Extensions are currently in preview and is subject to change. SharePoint Framework Extensions are not currently supported for use in production environments.
3
+
>**Note:** The SharePoint Framework Extensions are currently in preview and are subject to change. SharePoint Framework Extensions are not currently supported for use in production environments.
4
4
5
-
In this article, you will learn how to deploy your SharePoint Framework Application Customizer to be hosted from Office 365 CDN and how to deploy that to SharePoint for the end users. This article continues with the hello world extension built in the previous article [# Deploy your extension to site collection (Hello world part 3)](./using-page-placeholder-with-extensions.md) where we hosted customizer still from localhost.
5
+
In this article, you will learn how to deploy your SharePoint Framework Application Customizer to be hosted from an Office 365 CDN and how to deploy that to SharePoint for the end users. This article continues with the hello world extension built in the previous article [# Deploy your extension to SharePoint (Hello world part 3)](./using-page-placeholder-with-extensions.md) where we were still hosting the customizer from localhost.
6
6
7
7
Be sure you have completed the procedures in the following articles before you start:
8
8
9
9
*[Build your first SharePoint Framework Extension (Hello world part 1)](./build-a-hello-world-extension.md)
10
10
*[Connect your client-side web part to SharePoint (Hello world part 2)](./using-page-placeholder-with-extensions.md)
11
-
*[Deploy your extension to site collection (Hello world part 3)](./serving-your-extension-from-sharepoint.md)
11
+
*[Deploy your extension to SharePoint (Hello world part 3)](./serving-your-extension-from-sharepoint.md)
12
12
13
-
## Enabled CDN in your Office 365 tenant
14
-
Office 365 CDN is the easiest way to host SharePoint Framework solutions directly from your tenant, but still taking advantages of the Content Delivery Network (CDN) service for faster load times of your assets.
13
+
## Using the CDN in your Office 365 tenant
14
+
Office 365 CDN is the easiest way to host SharePoint Framework solutions directly from your tenant while still taking advantage of the Content Delivery Network (CDN) service for faster load times of your assets.
15
15
16
-
## Enable CDN in your Office 365 tenant
17
-
Ensure that you have latest version of the SharePoint Online Management Shell by downloading it from [Microsoft Download site](https://www.microsoft.com/en-us/download/details.aspx?id=35588).
16
+
## Enabling the CDN in your Office 365 tenant
17
+
Ensure that you have 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).
18
18
19
-
Connect to your SharePoint Online tenant with PowerShell session.
19
+
Connect to your SharePoint Online tenant through PowerShell:
Get current status of public CDN settings from tenant level by executing following commands one-by-one.
24
+
Get the current status of public CDN settings from the tenant level by executing the following commands one-by-one.
25
25
```
26
26
Get-SPOTenantCdnEnabled -CdnType Public
27
27
Get-SPOTenantCdnOrigins -CdnType Public
@@ -33,35 +33,35 @@ Set-SPOTenantCdnEnabled -CdnType Public
33
33
```
34
34
Now public CDN has been enabled in the tenant 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,WOFF".
35
35
36
-
Open up a browser and move to a site collection where you'd like to host your CDN library. This could be any site collection in your tenant. In this tutorial, we create a specific library to act as your CDN library, but you can also use a specific folder in any existing document library as the CDN endpoint.
36
+
Open up a browser and move to a site collection where you'd like to host your CDN library. This could be any site collection in your tenant. In this tutorial, we will create a specific library to act as your CDN library, but you can also use a specific folder in any existing document library as the CDN endpoint.
37
37
38
-
Create a new document library on your site collection called **CDN** and add a folder called**helloworld** to it.
38
+
Create a new document library on your site collection called **CDN** and add a folder named**helloworld** to it.
39
39
40
40
41
41
42
-
Move back to your PowerShell console and add a new CDN origin. Update the provided URL below to match your own environment. In this case we are setting origin as `*/cdn`, which means that any relative folder with name of **cdn** will act as CDN origin.
42
+
Move back to the PowerShell console and add a new CDN origin. In this case, we are setting the origin as `*/cdn`, which means that any relative folder with the name of **cdn** will act as a CDN origin.
43
43
```
44
44
Add-SPOTenantCdnOrigin -CdnType Public -OriginUrl */cdn
45
45
```
46
46
Execute the following command to get the list of CDN origins from your tenant
47
47
```
48
48
Get-SPOTenantCdnOrigins -CdnType Public
49
49
```
50
-
Notice that your newly added origin is listed as a valid CDN origin. Final configuration of the origin will take a while (approximately 15 minutes), so we can continue by creating your test extension, which will be hosted from the origin, when the deployment is completed.
50
+
Notice that your newly added origin is listed as a valid CDN origin. Final configuration of the origin will take a while (approximately 15 minutes), so we can continue creating your test extension, which will be hosted from the origin once deployment is completed.
51
51
52
52
53
53
54
-
> When 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 CDN system.
54
+
> When 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.
55
55
56
56
## Updating your solution project for the CDN URLs
57
-
Move to previously created solution to perform needed URL updates.
58
-
57
+
Return to the previously created solution to perform the needed URL updates.
59
58
```
60
59
code .
61
60
```
62
-
Update the *write-manifests.json* file (under *config* folder) as follow to point to your CDN endpoint.
63
61
64
-
* You will need to use the publiccdn.sharepointonline.com as the prefix and then extend the URL with the actual path in your tenant
62
+
Update the *write-manifests.json* file (under the *config* folder) as follows to point to your CDN endpoint.
63
+
64
+
* You will need to use the publiccdn.sharepointonline.com as the prefix and then extend the URL with the actual path of your tenant
Execute the following tasks to bundle your solution
76
-
* This will execute a release build of your project using CDN URL specified in the **writer-manifest.json** file. Output of the execution will be located in the **./temp/deploy** folder. These are the files which you will need to upload to the SharePoint folder acting as your CDN endpoint.
76
+
77
+
* This will execute a release build of your project using the CDN URL specified in the **write-manifests.json** file. The output of this command will be located in the **./temp/deploy** folder. These are the files which you will need to upload to the SharePoint folder acting as your CDN endpoint.
77
78
78
79
```
79
80
gulp bundle --ship
@@ -85,12 +86,16 @@ Execute the following task to package your solution
85
86
gulp package-solution --ship
86
87
```
87
88
88
-
This command will create a**app-extension.sppkg** package on the **sharepoint/solution** folder and also prepare the assets on the **temp/deploy folder** to be deployed to the CDN.
89
+
This command will create an**app-extension.sppkg** package in the **sharepoint/solution** folder and also prepare the assets in the **temp/deploy** folder to be deployed to the CDN.
89
90
90
-
Upload or drag & drop the newly created client-side solution package to the app catalog in your tenant.
91
+
Upload or drag & drop the newly created client-side solution package to the app catalog in your tenant. Click the **Deploy** button.
0 commit comments