Webpack Module Federation kullanarak ReactJS Mikro Frontend Proje Oluşturma

Mikro Frontend projelerini birbirleriyle iletişime geçirmek ya da shell uygulama dediğimiz ana bir uygulamada birleştirebilmek için bir paketleyiciye ihtiyaç duyarız. Webpack, JavaScript dosyalarını bir bütün haline getiren modül paketleyicisi olduğu için Webpack’in bize sunmuş olduğu hazır paketleri sayesinde yeni bir Mikro Frontend uygulama oluşturacağız.

Öncelikle ilk adım olarak kendimize bir workspace klasör oluşturalım. Ben MicroFrontendApp adında bir klasör oluşturdum. Daha sonra terminalde ilgili workspace alanımızın içine girelim.

Ardından terminalimize aşağıdaki npx komutunu kullanarak Mikro Frontend projemiz için gerekli olan dosyaları bizim için yüklemesini node versiyonumuza bildirelim.

npx create-mf-app

Not : Proje oluşturma aşamasında eğer Mikro Frontend proje oluşturmak için gerekli node paketi bilgisayarınızda yoksa indirmek için terminaliniz size aşağıdaki resimde olduğu gibi size geri bildirimde bulunacakdır. Gerekli paket yüklendikten sonra proje için gerekli bilgileri doldurma aşamasına geçilir. Eğer bu node paket sizde yüklü ise bu yükleme aşaması otomatikman geçilir.

Yükleme işlemi tamamlandıktan sonra paket bizden proje bilgilerini ve proje oluşturma aşamalarında kullanılacak teknojolojileri tanımlayacağımız bir form ekranı ile karşılar. Bu aşamada proje adı, proje türü, projenin çalışacağı portu, projede kullanılacak JavaScript framework’ü, kodlama esnasında kullanılacak typesafe dili, pure css mi yoksa css kütüphanesi kullanılıp kullanılmayacağının seçimi ve mikro komponentleri birleştiren paketleyici seçimi bilgileri doldurulur. En son adımdan sonra paket doldurulan bu bilgilerle Mikro Frontend proje oluşturma aşamasına geçer. Örnek resimdeki gibi yazımıza uygun niteliklerle proje tanımlamamızı yapalım.

Terminalde yukarıdaki resimde olduğu gibi;

Your ‘Mico-Shell-App’ project is ready to go

geri bildirimini gördükten sonra uygulama kurulum işlemimiz tamamlanmış demektir. Son olarak kurulumla beraber geri bildirimi yapılan alt kısımdaki Next steps: adımlarında verilen npm komutlarıyla projemizi ayağa kaldıralım.

Tarayıcımızda localhost:3000 portuna girdiğimizde alttaki örnek resim gibi html çıktıyı alabiliyorsak projemiz ayakta demektir.

Özetle, Webpack Module Federation’un bizler için hazırladığı alt yapıyı kullanarak Shell Mikro Frontend uygulamamızı kolay bir şekilde bir kaç adımla oluşturduk. Böylelikle bir Mikro Frontend uygulama oluşturmanın Webpack ile daha hızlı ve daha kolay bir hale getirilmiş olduğunuda gözlemlemiş olduk.