Skip to content

Commit a1dc1dc

Browse files
minimal updates to instructions
1 parent 602d056 commit a1dc1dc

File tree

1 file changed

+18
-24
lines changed

1 file changed

+18
-24
lines changed

docs/spfx/web-parts/get-started/hosting-webpart-from-office-365-cdn.md

Lines changed: 18 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -22,27 +22,27 @@ Enable public CDN in the tenant
2222
```
2323
Set-SPOTenantCdnEnabled -CdnType Public
2424
```
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".
2626

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.
2828

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.
3030

3131
![helloworld-webpart folder in CDN library](../../../../images/cdn-helloworld-folder.png)
3232

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.
3434
```
3535
Add-SPOTenantCdnOrigin -CdnType Public -OriginUrl sites/cdn/cdn
3636
```
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
3838
```
3939
Get-SPOTenantCdnOrigins -CdnType Public
4040
```
4141
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.
4242

4343
![List of public origins in tenant](../../../../images/cdn-public-origins.png)
4444

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.
4646
4747
## Creating a new Web Part project
4848

@@ -74,15 +74,15 @@ When prompted:
7474

7575
![Yeoman generator questions around the newly created web part](../../../../images/cdn-create-webpart-yo.png)
7676

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.
7878

7979
When the scaffold is complete, in the console, type the following to open the web part project in Visual Studio Code:
8080

8181
```
8282
code .
8383
```
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
8686
* Format of the CDN URL is as follows
8787
```
8888
https://publiccdn.sharepointonline.com/<tenant host name>/sites/site/library/folder
@@ -92,22 +92,22 @@ https://publiccdn.sharepointonline.com/<tenant host name>/sites/site/library/fol
9292

9393
Save your changes.
9494

95-
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.
9797

9898
```
9999
gulp bundle --ship
100100
```
101101

102-
Execute following to package your solution to prepare the files
102+
Execute the following task to package your solution
103103

104104
```
105105
gulp package-solution --ship
106106
```
107107

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.
109109

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.
111111

112112
![Installation popup from app catalog for the SPFx solution](../../../../images/cdn-upload-solution-to-app-catalog.png)
113113

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

120120
![helloworld folder in SPO tenant with the web part assets copied from the temp/deploy folder](../../../../images/cdn-web-part-files-in-folder.png)
121121

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
123123

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.
125125

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
131127

132128
![Adding web part solution to site](../../../../images/cdn-add-webpart-to-site.png)
133129

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
137131

138132
![HelloWorld web part visible in web part picker for modern page](../../../../images/cdn-web-part-picker.png)
139133

0 commit comments

Comments
 (0)