SharePoint Framework (SPFx) Deployment Office 365 CDN

Artık SPFx ile development yapabiliyoruz. Şimdi deployment sürecine bir göz atalım 🙂

SharePoint Framework (SPFx) ile geliştirmiş olduğunuz applicationı Office CDN üzerinde kullanabilirsiniz. Varsayılan olarak pasif olmasından dolayı PowerShell script yazarak aktifleştirmeniz gerekmektedir.

Office 365 CDN Aktifleştirme

• SharePoint Online Management Shell ‘i linke tıklayarak bilgisayarınıza yükleyiniz.

SharePoint Online Management Shell sadece Window üzerinde çalışmaktadır. Farklı bir işletim sisteminiz mevcur ise Office 365 CLI kullanarak bu adımları gerçekleştirebilirsiniz.

• Aşağıdaki komutu yazarak, SharePoint tenant ortamınıza bağlanın

Connect-SPOService -Url https://contoso-admin.sharepoint.com

• SharePoint tenant hesabınızda CDN aktif edilip edilmediğini öğrenmek için aşağıdaki komutu kullanabilirsiniz.

Get-SPOTenantCdnEnabled -CdnType Public
Get-SPOTenantCdnOrigins -CdnType Public
Get-SPOTenantCdnPolicies -CdnType Public

• SharePoint tenant hesabınızı aktifleştirmek için aşağıdaki komutu çalıştırınız.

Set-SPOTenantCdnEnabled -CdnType Public

• Sizden ayarlar için onay isteyecektir. “Y” tuşuna basıp, enter deyiniz.

Aktifleştirilmesi biraz zaman alacaktır, Office 365 CDN için gerekli işlemlerimiz bu kadar 🙂

Solution settings

“config” folder içerisinde yer alan “package-solution.json” dosyasını açınız.

{
 "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
 "solution": {
   "name": "helloword-webpart-client-side-solution",
   "id": "3c1af394-bbf0-473c-bb7d-0798f0587cb7",
   "version": "1.0.0.0",
   "includeClientSideAssets": true
 },
 "paths": {
   "zippedPackage": "solution/helloword-webpart.sppkg"
 }
}

“includeClientSideAssets” varsayılan “true” olarak gelmektedir. Bu property ile statik assets “.sppkg” paketi içerisine otomatik dahil edilmektedir.

SharePoint Framework Deploy Süreci

• Aşağıdaki komutu çalıştırınız. “gulp bundle –ship” solution bundle etmenizi etmenizi sağlamaktadır.

gulp bundle --ship

• Solution paket haline getirmek için aşağıdaki komutu çalıştırınız. Komut işlemini tamamladıktan sonra config için belirtmiş olduğunuz path içerisine oluşturmaktadır. (solution klasörü)

gulp package-solution --ship

Paket içerisindeki görüntülemek isterseniz “solution/debug” klasörüne gidip, görüntüleyebilirsiniz.

• Paketleme işlemimiz bu kadar, şimdi ilgili “.sppkg” dosyasını SharePoint App Katalog içerisine yükleyiniz.

• Eğer daha önceden aynı isimde bir app mevcut ise size değiştirip değiştirilmeyeceğini soracaktır. “Replace it” butonuna tıklayıp uygulamayı upload ediniz.

• Başarı ile upload ettikten sonra “Deploy” deyiniz. (domain olarak SharePoint Online yazdığına dikkat ediniz.)

Tüm deploy işlemlerimiz bu kadar 🙂

SharePoint Framework Uygulama Yükleme

• Developer site ya da uygulamanızı kullanmak istediğiniz site collection ‘a gidiniz.
• Sağ üst nav bar üzerinde “Add an app” butonuna tıklayınız.

• Search box üzerinde kendi uygulamanızı aratıp, yükleyiniz.

• Uygulamanızı yükledikten sonra WebPart mevcut ise görüntülemek istediğiniz sayfayı açınız ve WebPart ekleyiniz.

• Local üzerinde node.js çalışmasa bile uygulamanız görüntülenmeye devam edecektir.

• F12 tuşuna basıp kontrol ettiğinizde “http://publiccdn.sharepointonline.com” adresi üzerinden yüklendiğini göreceksiniz.

SharePoint Online içerisinde CDN aktif değilse ve “includeClientSideAssets” config içerisinde “true” olarak işaretliyse app catalog içerisinde yer alan “ClientSideAssets” içerisine yüklenecektir. Bu durumda url: “https://sppnp.microsoft.com/sites/apps/ClientSideAssets/.” gibi olacaktır.

Tüm işlemimiz bu kadar, okuduğunuz için teşekkür ederim 🙂