在本篇文章中你將學習到如何部署你的client-side web part到SharePoint環境中，並且在傳統的 SharePoint server-side頁面中顯示。這篇文章是 SharePoint Framework系列(七)-構建第一個webpart(連接到SharePoint)的延續。
請確保你已經看過如下的兩篇文章
打包HelloWorld web part
在命令行窗口，訪問你之前創建的工程目錄，可以通過如下命令：
cd helloworld-webpart使用Visual studio code打開HelloWorldWebPart工程，然後打開config文件夾下面的package-solution.json，這個文件的內容如下：
{
"solution": {
"name": "helloworld-webpart-client-side-solution",
"id": "ed83e452-2286-4ea0-8f98-c79d257acea5",
"version": "1.0.0.0"
},
"paths": {
"zippedPackage": "helloworld-webpart.spapp"
}
}gulp package-solutionhelloworld-webpart.spapp包中內容
這個包是使用的SharePoint的Feature去打包你的web part，默認情況下gulp 任務會創建如下元素：
- 一個web part需要的feature。
- 一個.webpart文件，這個是 一個XML文件，主要用來描述web part。
部署HelloWorld 包到app catalog中
下一步你需要把包部署到App Catalog站點中，上傳helloworld-webpart.spapp到App Catalog中。
這樣就可以部署client-side 包，因爲這個是一個full trust的client-side的solution，SharePoint會彈出一個界面詢問你是否要trust這個client-side solution。
選擇Deploy。
注意：如果你的包部署失敗了，或者沒有提示，那麼很可能是因爲你用的是普通的tenant，請確保你已經給你的tenant環境開啓了First
Release或者你使用的是Office 365 Developer tenant。經過個人測試開啓First Release似乎不好用，所以建議申請Office 365 Developer tenant。
在站點中安裝client-side solution
進入developer 站點，點擊右上角的圖標，然後選擇Add an app，在Search 框中輸入helloworld，然後進行搜索。
選擇helloworld-webpart-client-side-solution app然後安裝。
client-side solution和web part此時就已經安裝到了你的developer站點中了。Site Contents頁面會顯示client-side solution的安裝狀態，在進行如下步驟之前 ，請確認已經安裝完畢。
在傳統的SharePoint頁面中預覽web part
到現在爲止，你已經部署和安裝了client-side solution，添加web part到SharePoint傳統的頁面中。請注意相關的資源(例如：JavaScript和CSS)在本地機器上是可用的。
打開\dist文件夾下面的<your-webpart-guid>.mainfest.json文件，注意LoaderConfig節點下面的internalModuleBaseUrls屬性是執行你本地機器的：
"internalModuleBaseUrls": [
"http://`your-local-machine-name`:4321/"
]gulp serve --nobrowser--nobrowser 不會加載Web
Part workbench。
添加HelloWorld web part到傳統頁面
在瀏覽器中訪問你的site collection。
在下一步中創建一個傳統的頁面，並且訪問你的SitePages文檔庫。
選擇右上角的齒輪圖標，然後選擇Site Contents。
選擇SitePages 文檔庫，然後進入SitePages。
選擇New 按鈕創建傳統的SharePoint Page
使用HelloWorld作爲頁面的名稱
選擇Create按鈕去創建web part頁面，SharePoint就會創建對應的頁面
在ribbon上面選擇Insert->Web Part打開Web Part文檔庫
在web part文檔庫中選擇Custom這個分類
注意：在預覽階段client-side web parts會顯示在Custom這個分類下面
你可以看到你的Hello World web part
選擇HelloWorld web part然後添加到頁面中
web part的相關資源會從本地的環境中進行加載，爲了能夠加載本地的腳本，你需要設置瀏覽器允許加載不安全代碼。取決於你用的是哪個瀏覽器，在本節中你需要確保你的瀏覽器允許加載不安全代碼。
你將會看到前一篇文章中的web part，但是這個web part是從當前站點中加載的數據。
編輯web part屬性
選擇編輯web part的菜單，然後選擇Edit Web part就可以打開web part的屬性面板。
屬性面板會打開server-side的web part屬性面板，但是這裏提供了一個可以設置client-side web part屬性的地方。
選擇Configure按鈕，可以加載client-side web part屬性面板，這個面板和你之前在workbench中測試和預覽的效果是一樣的，編輯Description屬性，你會看到web part上面會變化。
選擇X圖標可以關閉client-side的屬性面板，然後選擇server-side的屬性面板中的OK按鈕去保存Web part的屬性，因爲這個web part是運行在傳統的SharePoint頁面中的，選擇Ok或者Apply按鈕都會保存 web part的屬性。
在ribbon頁面中選擇Save按鈕，然後保存頁面
注意：SharePoint Framework目前正處於Preview階段，隨時會進行一些更改。SharePoint Framework Client-side web parts在Office 365的生產環境中暫時不支持。