Vue Micro Frontend’inize React (veya başka bir framework) Nasıl Eklenir?
Önceki yazımda, componentleri çalışma zamanında entegre etmek için webpack ve Vue kullanımından yararlanan temel bir “use home” micro frontend uygulamasının nasıl oluşturulacağı konusunda size yol gösterdim.
Bu makale o makalenin devamı olacak, bu yüzden inceleme şansınız olmadıysa, yukarıdaki linki yeni bir sekmede açın ve işiniz bittiğinde buraya geri dönün.
Neden Vue tabanlı micro front-end’inize React (veya başka bir framework) eklemek istersiniz? Aklıma gelen birkaç sebep var:
- Takımlara teknoloji üzerinde özerklik vermek.
- Vue, sonunda geliştirme topluluğunun beğenisini kaybedebilir ve yeni, daha parlak bir şey olabilir. Uygulamamızı parça parça dönüştürebileceğimizi bilmek gelecek için bize güven veriyor.
- React (veya başka bir framework) size Vue’nun vermediği benzersiz bir şey verebilir.
helloReact Uygulaması
Kendi portunda çok basit bir “hello React” uygulaması oluşturarak başlayacağız. helloReact adlı yeni bir repo (veya alt klasör) oluşturun.
Bu sefer React kullandığımız için package.json’da bazı farklı bağımlılıklar var:
Bunu kopyaladığınıza emin olun ve npm install yapın. Ardından public/index.html dosyasını kopyalayacağız ve mount edeceğimiz id değerini değiştireceğiz.
Şimdi scr dosyalarımızı ekleyelim. Yeni bir scr klasörü oluşturun ve index.js, bootstrap.js ve App.js olmak üzere üç yeni dosya oluşturun.
helloVue uygulamasındakiyle aynı şeyleri burada yaptığımızı görebilirsiniz. Uygulamamızı bootstrap.js dosyasına yerleştiriyor ve webpack’in paylaşılan bağımlılıkları eşzamansız olarak yönetebilmesi için bu dosyayı index.js’ye aktarıyoruz. React dosyası, hızlı bir şekilde çalıştırdığım basit bir merhaba dünya örneğidir. Uygulamayı çalıştırmaya hazır olduğumuzu düşünüyorum, bu yüzden helloVue’den webpack yapılandırmamızı kopyalayalım ve birkaç küçük değişiklik yapalım.
Terminalimizi çalıştıralım ve helloReact klasörünüze npm start yazalım. Bir tarayıcıda http://localhost:8081 açtığımızda şöyle görünmelidir:
Micro Frontend Container Entegrasyonu
Harika, bağımsız bir şekilde çalışıyor! Şimdi bunu container uygulamamıza entegre edelim. Burada yapacağımız tüm değişiklikler container klasörümüzde olacak.
Öncelikle, webpack.dev.js dosyasına helloReact uygulamamız için yeni bir uzaktan kumanda ekleyelim:
Artık bunu container uygulamamızda kullanabiliriz. Container’da oluşturabileceğimiz yeni bir component oluşturalım. HelloVueApp’e oldukça benzemesi gereken yeni bir src/components/HelloReactApp.vue dosyası oluşturun, ancak navigasyonla ilgili herhangi bir şey yapmamız gerekmiyor, bu yüzden biraz daha basit:
Son olarak tek yapmamız gereken, bu component’i src/App.vue dosyamıza yükleyecek bir route eklemek.
Artık tüm micro frontend uygulamamızı çalıştırabilmeliyiz. Öncelikle iki alt uygulamanın çalıştığından emin olmanız gerekir, bu nedenle klasörlerine gidin ve her biri için npm start komutunu çalıştırın. Ardından container klasöründe npm start komutunu çalıştırabilirsiniz ve uygulamanız http://localhost:8080 yüklenmelidir. Şöyle görünmelidir:
Çok iyi görünmediğini biliyorum ama bu gerçekten heyecan verici! Vue micro Front-end’de bir React uygulaması çalıştırıyorsunuz.
Bu süreçte herhangi bir sorunla karşılaşırsanız, bu eğitimin kaynak kodunu GitHub’da bulabilirsiniz.
