SharePoint Framework SPFx Projesinin Paket Haline Getirilerek Yüklenmesi ve Sayfaya Eklenmesi

Merhaba arkadaşlar bugün sizlere SharePoint Freamwork SPFx ile oluşturulmuş bir projenin derlenerek paketin hazırlanması ve SharePoint Online sitesine yüklenerek nasıl kullanabileceğinizi göstereceğim.

İlk olarak oluşturmuş olduğunuz proje için nasıl paket oluşturabileceğinizi gösterelim.

Eğer projenizde npm paketleri yüklenmemişse aşağıdaki komut ile terminal üzerinden tüm npm paketlerini yüklemeniz gerekmektedir.

Yukarıdaki kodu her bir proje için bir defa sadece çalıştırmanız yeterli olacaktır. Onun dışında her değişiklikler de projenizdeki dosyaları kaydettikten sonra aşağıdaki adımları izleyerek paketinizi oluşturup yüklemesini yapabilirsiniz.

Bu komut başarılı bir şekilde çalıştıktan sonra aşağıdaki kodu çalıştırıyoruz.

Bu kodumuz da başarılı bir şekilde çalıştıktan sonra en son kodumuzu çalıştırıyoruz ve bu kodda tüm kodumuzu paket haline getiriyor.

En son bu kodumuzu çalıştırdığımız da projemizde “sharepoint” adında bir klasör oluşturarak bu klasör içinde de “solution” adında bir klasörün için de “.sppkg” uzantılı bir spfx dosya paketi oluşturduğunu göreceksiniz.

Yukarıda da gördüğünüz gibi hem proje dosyasında path oluştu hem de terminal tarafında son aşamada paket bilgisi görünmektedir.

Şimdi bu paketi sharepoint online sitemizde nasıl aktif edeceğimize bakalım.

İlk aşama olarak sharepoint online app sitemize gitmemiz gerekmektedir. Bu siteyi eğer bilmiyorsanız adresine ulaşmak için “SharePoint admin center” adresimize gidiyoruz.

Admin center ekranında yer alan “Sites” ana menüsü altında yer alan “Active sites” içerisinde yer alan genellikle default olarak adı “Apps” olarak geçen bir site bulunması lazımdır. Eğer bu farklı adlarla oluşturulmuşsa “Template” tipi “App Catalog Site” olan siteyi bulmanız gerekmektedir.

Açılan app sitesinde ya yukardan yeni uygulama yönetim sayfasına geçebilir ya da eskisinden devam ederek sol menüde yer alan “Apps for SharePoint” menüsüne tıklayabilirsiniz.

Bu sayfada eğer var ise daha önceki spfx paketlerinizi görüp yönetebilir veya yenisini yükleyebilirsiniz. Biz yenisini yüklemek istediğimiz için istersek üst menü de yer alan “Upload” butonu ile ya da tarayıcımız destekliyor ise sürükle bırak yöntemi ile “.sppkg” paketimizi buraya yüklememiz gerekmektedir.

Dosyayı yüklediğiniz zaman yukarıdaki gibi bir popup gelecektir. Burada sol tarafta yer alan checkbox seçmeden ilerlememiz gerekecektir. Eğer bunu seçerek ilerlersek bu paketin tüm sharepoint sitelerine yüklenmesini sağlamış oluruz ve bu işlem site sayısına göre uzun sürebilir. “Deploy” butonu ile paketimizi ortamımıza yüklüyoruz.

Eğer yeni tip uygulama yükleme ekranı ile bu işlemleri yapacaksanız aşağıdaki şekilde ilerlemeniz gerekmektedir.

Yeni ekran da “Manage apps” kısmında aynı şekilde daha önce yüklediğiniz uygulamaları görebilir ve yönetebilirsiniz. Burada da ya “Upload” butonu ile ya da sürükle bırak ile uygulamanızı buraya yükleyebilirsiniz.

Bu ekranda da sağ tarafta tam ekran bir popup çıkacaktır. Bunda da “App availability” kısmında “Only enable this app” seçmemiz gerekmektedir. Default olarak tüm sitelerde aktif etme gelecektir bunu değiştirmemiz gerekmektedir. Seçimi bu şekilde yaptıktan sonra “Enable app” butonu ile uygulamamızı aktif ediyoruz.

Eğer bu aktif etme işlemi sırasında uygulamanız da bir graph api izin yetkisi varsa kullanılan bunu da size bildirip onaylama sayfasına yönlendirme için buton çıkaracaktır.

Bu aşamadan sonra sitelerde aktivasyon işlemini otomatik yapmayacak şekilde seçtiğimiz için uygulamamızın aktif olmasını istediğimiz siteye giderek “Site Contents” geliyoruz.

Bura da üstte yer alan “+ New” menü butonu altında yer alan “App” seçeneğini seçiyoruz.

Açılan “SharePoint apps” sayfasında bu siteye eklediğiniz ve akleyebileceğiniz uygulamaları görebilirsiniz. Eklemek istediğimiz uygulamaya gelerek “Add” butonu ile uygulamamızı ekliyoruz.

Eğer yükleme işlemi başarılı bir şekilde tamamlanır ise yukarıdaki gibi üst bar kısmında bir yeşil bildirim verip görüntülemek içinde site contents sayfasına linkleme vermektedir ve bu linke giderek uygulamamızı görebiliriz.

Yukarı da göreceğiniz gibi uygulamam sorunsuz bir şekilde eklendi. Eğer bu alanda ikon ve isim kısmı gri ise daha yükleme tamamlanmamış olup mavi rengine yani tamamlanana kadar bekleyip sayfayı yenileyerek kontrol etmeniz gerekmektedir.

Tüm bu süreçleri sorunsuz bir şekilde tamamladığınız zaman sitenizde herhangi bir sayfaya gittiğiniz zaman uygulamanızı görebileceksiniz.

Yukarıda da gördüğünüz gibi modern page üzerinde uygulamalar arasında arattığım zaman uygulamam geliyor ve tıklayarak sayfaya bu uygulamayı ekleyebiliyorum.