SPFx Çözümlerinin Paketlenmesi ve Yaygınlaştırılması

SPFx ile çok çok basit birkaç kod örneği ile bu altyapıyı kullanmak için nasıl bir altyapıya sahip olmanız gerektiğini SPFx Merhaba Dünya , yerel ortamda yaptıklarınızı nasıl test edebileceğinizi ise SPFx SharePoint Verileriyle Çalışmak ve SharePoint Workbench Nedir? kısa yazılarımda anlatmaya çalışmıştım. Şimdi ise hazırladığımız webpartı SharePoint Online üzerinde nasıl çalıştırabileceğimizden bahsetmek istiyorum. Burada bir yanlış anlaşılmanın önüne geçmek adına kısa bir açıklama yapmak isterim. Daha önceki örneklerde zaten SharePoint Online üzerinde webpartımızı test etmiştik. Bunu Workbench’in sağladığı avantajı kullanarak aslında ön izlemesini yaparak sağlamıştık. Burada üzerinde durmak istediğim konu ise uygulamamızı paketlemek ve bir paket olarak SharePoint Online App Catalog içerisine yüklemek.

Paketleme işlemini tamamen temiz bir şekilde sağlayabilmek için aşağıdaki adımları sırasıyla uygulamaya çalışacağım.

  • Öncelikle daha önce gulp serve komutuyla uygulamanızı local workbench’de çalıştırmış durumdaysanız Ctrl + C ile bu işlemi durdurun. Kaydedilmemiş dosyalarınız varsa kaydedin.
  • Daha önce paketleme yaptıysanız veya ortamı derleme esnasında oluşan dosyalardan temizleyerek başlamak istiyorsanız aşağıdaki şekilde temizlik işlemini yapabilirsiniz.

  • Projenizin config > write-manifest.json dosyasının içerisinde pakete ilişkin kaynakları yüklediğiniz bir alan olmalıdır. Bu bölüme herhangi bir değer girmezseniz bu yerel kaynakları kullanacağınız anlamına gelir. İsterseniz bu bölüme bir Azure CDN EndPoint’inin adresini veya SharePoint Online üzerindeki bir varlık kitaplığı adresini belirtebilirsiniz. Aslında sadece bu iki CDN yapısı ile sınırlı değiliz, farklı CDN yapıları da kullanabilirsiniz. Aşağıdaki ekranda örnek olarak bir SharePoint varlık kitaplığının kullanıldığını görebilirsiniz.

 

 

Not: Varsayılan olarak, eğer paketiniz ile beraber gidecek dosyalar için bir path bilgisi vermezseniz yaygınlaştırmasını yaptığınız paket her ne kadar SharePoint Online üzerinde de olsa, kullanacağı sıkıştırılmış javascript dosyaları ve diğer tüm kaynaklar yerel adreslerden gelecektir. Bu nedenle bu şekilde kaynak dosyalarının yerini belirtmediğiniz bir yaygınlaştırma sonrası eğer webpartınızı test etmek istiyorsanız gulp serve ile uygulamanızı localde de başlatmış olmalısınız.

  • Ardından aşağıdaki komut ile kodunuzun sıkıştırılmış halinin debug modda oluşturulmasını ve paketinizde kullanılacak dist klasöründe oluşturulmasını sağlayabilirsiniz.

  • Son olarak paketimizi oluşturmak için aşağıdaki komutu yazmamız yeterli olacaktır.

 

Yukarıdaki ekran görüntüsünden de göreceğiniz üzere sharepoint\solution pathinde paket dosyalarımız oluşturuluyor. Kısaca bir göz atacak olursak proje dosya yapımız artık aşağıdaki hali almış oldu.

 

Burada paketleme anlamında bizim için en önemli klasörler temp ve sharepoint. temp klasörü içerisinde yukarıdaki bundle komutuyla paketlediğimiz sıkıştırılmış haldeki javascript dosyalarımızı ve kaynaklarımızı saklıyor. SharePoint Online veya Azure Blob Storage içerisinde saklamak istediğimizde dosyaları bu klasörden alabileceğiz / otomatik olarak atabilecek. SharePoint klasörü ise paketimizi içerisinde barındırıyor. Biraz daha detaylı bakalım ve içeriğinde neler var görelim.

 

 

Burada yer alan ve uzantısı .sppkg olan dosya paket dosyamız. App’larda .app, çözümlerde .wsp uzantısına alışmıştık genel kullanımda. Bunu da bir uzantı olarak hafızamıza almakta yarar var. debug klasörünün içerisinde ise paket içeriğimiz açık olarak duruyor.

 

 

Ayrıca isterseniz sppkg uzantısını zip yaparak da paket içerişinizi görebilirsiniz. Neticede çözüm paketleri aslında sıkıştırılmış dosya grupları sadece.

 

 

SharePoint Online’a yaygınlaştırmak ise son derece kolay. Öncelikle bir AppCatalog’unuz olmalı. Her tenantta en fazla bir tane yaratabiliyorsunuz zaten. App Catalog sitenizde “AppCatalog” isminde bir kütüphane yer alıyor. Bu, uygulama paketlerini yüklediğimiz ve bizi yönlendiren bir ekran. Bu kütüphane içerisine sppkg dosyasınızı sürükleyip bıraklamanız yeterli olacaktır.

 

 

İşlem sonrasında paketi deploy etmeden önce dikkatinizi çekmek istediği mesajların yer aldığı bir ekran ve deploy butonu görünecektir. Butonu tıklamanız durumunda bir sıkıntı olmadan uygulamanız yüklenecektir. Ben burada yine bir konuya dikkat çekmek istiyorum. Ekrandaki mesaş içerisinde ikinci paragraf bu istemci tabanlı çözümün aşağıda belirtilen adresten bazı içerikler alacağını belirtiyor. İşte burası yukarıda write-manifest.json’da düzenlediğimiz bir path farkındaysanız. Eğer write-manifest.json’da bir değer belirtmemiş olsaydık yerel kaynakları kullanmak üzere burada local Workbench’inizin adresi olan http://localhost:4321 yazıyor olacaktı. Yada bir başka örnek ile Azure CDN kullanmış olsaydık bu alanda Azure CDN EndPoint adresimiz yazıyor olacaktı.

 

 

Deneyebilmek için sitemin sağ üst köşesinde yer alan çark sembolüne tıklıyor ve “Add Page” komutunu veriyorum. Bu karşımıza Modern Layout kullanan bir sayfa getirecek. Sayfanın orta alanında ise Local Workbench’dekine benzer şekilde webpart seçimi yapabileceğiniz bir alanı.

 

 

Ve eklediğinizde webpartınız artık yerel herhangi bir kaynak kullanmaksızın SharePoint Online sayfanızdaki yerini almış olacak.

 

No Comments

Leave a Comment

Please be polite. We appreciate that.
Your email address will not be published and required fields are marked


This site uses Akismet to reduce spam. Learn how your comment data is processed.