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
+18-24Lines changed: 18 additions & 24 deletions
Original file line number
Diff line number
Diff line change
@@ -22,27 +22,27 @@ Enable public CDN in the tenant
22
22
```
23
23
Set-SPOTenantCdnEnabled -CdnType Public
24
24
```
25
-
Now public CDN has been enabled in the tenant using default allowed file type configuration. This means that following file type extensions are supported: "CSS,EOT,GIF,ICO,JPEG,JPG,JS,MAP,PNG,SVG,TTF,WOFF".
25
+
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".
26
26
27
-
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 they CDN endpoint.
27
+
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.
28
28
29
-
Create new document library to your site collection called **CDN** and a folder called **helloworld** to it.
29
+
Create a new document library on your site collection called **CDN** and add a folder called **helloworld** to it.
30
30
31
31

32
32
33
-
Move back to your PowerShell console and add new CDN origin. Update provided URL to match your own environment.
33
+
Move back to your PowerShell console and add a new CDN origin. Update the provided URL below to match your own environment.
34
34
```
35
35
Add-SPOTenantCdnOrigin -CdnType Public -OriginUrl sites/cdn/cdn
36
36
```
37
-
Execute following to get list of CDN origins from your tenant
37
+
Execute the following command to get the list of CDN origins from your tenant
38
38
```
39
39
Get-SPOTenantCdnOrigins -CdnType Public
40
40
```
41
41
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 web part, which will be hosted from the origin, when the deployment is completed.
42
42
43
43

44
44
45
-
> When origin is listed without the *(configuration pending)* text, it is ready to be used in your tenant. This is indicating on-going configuration between SharePoint Online and CDN system.
45
+
> 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.
46
46
47
47
## Creating a new Web Part project
48
48
@@ -74,15 +74,15 @@ When prompted:
74
74
75
75

76
76
77
-
At this point, Yeoman will install the required dependencies and scaffold the solution files. This might take a few minutes. Yeoman will scaffold the project to include your custom web part as well.
77
+
At this point, Yeoman will scaffold the solution files and install the required dependencies. This might take a few minutes. Yeoman will scaffold the project to include your custom web part as well.
78
78
79
79
When the scaffold is complete, in the console, type the following to open the web part project in Visual Studio Code:
80
80
81
81
```
82
82
code .
83
83
```
84
-
Update the *write-manifests.json* file under *config* folder as follows to point to your CDN endpoint.
85
-
- You will need to use the publiccdn.sharepointonline.com as the prefix and then extend teh URL with the actual path in your tenant
84
+
Update the *write-manifests.json* file (under *config* folder) as follow to point to your CDN endpoint.
85
+
- You will need to use the publiccdn.sharepointonline.com as the prefix and then extend the URL with the actual path in your tenant
Execute following commands to bundle your solution
96
-
* 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 your the SharePoint folder acting as your CDN endpoint.
95
+
Execute the following tasks to bundle your solution
96
+
* 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.
97
97
98
98
```
99
99
gulp bundle --ship
100
100
```
101
101
102
-
Execute following to package your solution to prepare the files
102
+
Execute the following task to package your solution
103
103
104
104
```
105
105
gulp package-solution --ship
106
106
```
107
107
108
-
This command will create a **sphosted-webpart.sppkg** package to the **sharepoint/solution** folder and also prepare assets to be deployed to the CDN to the **temp/deploy folder**
108
+
This command will create a **sphosted-webpart.sppkg** package on the **sharepoint/solution** folder and also prepare the assets on the **temp/deploy folder** to be deployed to the CDN.
109
109
110
-
Upload or drag & drop the newly created client-side solution package to app catalog in your tenant.
110
+
Upload or drag & drop the newly created client-side solution package to the app catalog in your tenant.
111
111
112
112

113
113
@@ -119,21 +119,15 @@ Upload all files from **temp/deploy** folder to the **CDN/helloworld** folder in
119
119
120
120

121
121
122
-
At this point web part is ready to be used in page
122
+
At this point the web part is ready to be used on a page
123
123
124
-
Move to a site where you want to test the web part
124
+
Open a site where you want to test the web part and go the **Site contents** page of the site.
125
125
126
-
Move to **Site contents** page of the site
127
-
128
-
Choose **Add – App** from the toolbar
129
-
130
-
Choose the **sphosted-webpart-client-side-solution** to be installed on the site
126
+
Choose **Add – App** from the toolbar and choose the **sphosted-webpart-client-side-solution** app to be installed on the site
131
127
132
128

133
129
134
-
When solution has been installed, chose **Add a page** from the *gear* menu
135
-
136
-
Pick **HelloWorld** from the web part picker for modern page
130
+
After the solution has been installed, chose **Add a page** from the *gear* menu and pick **HelloWorld** from the modern page web part picker
137
131
138
132

0 commit comments