B\u00fcy\u00fck \u00f6l\u00e7ekli web uygulamalar\u0131n\u0131 y\u00f6netmek giderek karma\u015f\u0131kla\u015f\u0131yor mu? Ba\u011f\u0131ms\u0131z ekipler, farkl\u0131 teknolojiler ve s\u00fcrekli de\u011fi\u015fen i\u015f gereksinimleri, monolitik mimarilerin s\u0131n\u0131rlar\u0131n\u0131 zorluyor. React Router v7, React Server Components (RSC) ve Module Federation gibi g\u00fc\u00e7l\u00fc ara\u00e7lar\u0131 bir araya getirerek mikro-frontend mimarisine ge\u00e7i\u015f yapmak, uygulama geli\u015ftirmede \u00e7evikli\u011fi, \u00f6l\u00e7eklenebilirli\u011fi ve ekip otonomisini nas\u0131l art\u0131rabilece\u011finizi ke\u015ffedin.<\/p>\n
Modern web uygulamalar\u0131, kullan\u0131c\u0131 beklentilerinin artmas\u0131yla birlikte giderek daha karma\u015f\u0131k bir hal almaktad\u0131r. Geleneksel monolitik mimarilerde, t\u00fcm uygulaman\u0131n tek bir kod taban\u0131nda toplanmas\u0131, geli\u015ftirme h\u0131z\u0131n\u0131 d\u00fc\u015f\u00fcrebilir, farkl\u0131 ekipler aras\u0131nda ba\u011f\u0131ml\u0131l\u0131klar\u0131 art\u0131rabilir ve yeni teknolojilerin entegrasyonunu zorla\u015ft\u0131rabilir. \u0130\u015fte tam da bu noktada, mikro-frontend mimarisi devreye giriyor ve adeta bir kurtar\u0131c\u0131 rol\u00fc \u00fcstleniyor.<\/p>\n
Mikro-frontend mimarisi, bir web uygulamas\u0131n\u0131 ba\u011f\u0131ms\u0131z olarak geli\u015ftirilebilen, da\u011f\u0131t\u0131labilir ve y\u00f6netilebilir daha k\u00fc\u00e7\u00fck par\u00e7alara (mikro-frontendlere) b\u00f6lme yakla\u015f\u0131m\u0131d\u0131r. Her bir mikro-frontend, uygulaman\u0131n belirli bir i\u015f alan\u0131n\u0131 veya \u00f6zelli\u011fini temsil eder. \u00d6rne\u011fin, bir e-ticaret platformunda \u00fcr\u00fcn listesi, sepet, \u00f6deme ve kullan\u0131c\u0131 profili gibi mod\u00fcller ayr\u0131 mikro-frontendlere b\u00f6l\u00fcnebilir. Bu yakla\u015f\u0131m, mikroservis mimarisinin backend d\u00fcnyas\u0131ndaki faydalar\u0131n\u0131 frontend d\u00fcnyas\u0131na ta\u015f\u0131yarak \u00f6nemli avantajlar sunar.<\/p>\n
Bu mimarinin en b\u00fcy\u00fck avantajlar\u0131ndan biri, ba\u011f\u0131ms\u0131z geli\u015ftirme ve da\u011f\u0131t\u0131m yetene\u011fidir. Her ekip, kendi mikro-frontend\u2019i \u00fczerinde izole bir \u015fekilde \u00e7al\u0131\u015fabilir, kendi teknolojisini se\u00e7ebilir ve ba\u011f\u0131ms\u0131z olarak da\u011f\u0131t\u0131m yapabilir. Bu durum, geli\u015ftirme s\u00fcre\u00e7lerini h\u0131zland\u0131r\u0131r, farkl\u0131 ekipler aras\u0131ndaki ba\u011f\u0131ml\u0131l\u0131klar\u0131 azalt\u0131r ve pazara \u00e7\u0131k\u0131\u015f s\u00fcresini k\u0131salt\u0131r. B\u00f6ylece, bir ekibin yapt\u0131\u011f\u0131 de\u011fi\u015fiklikler veya hatalar di\u011fer ekipleri do\u011frudan etkilemez, bu da hata izolasyonunu kolayla\u015ft\u0131r\u0131r.<\/p>\n
\u00d6rne\u011fin, b\u00fcy\u00fck bir bankac\u0131l\u0131k uygulamas\u0131n\u0131n mobil bankac\u0131l\u0131k, yat\u0131r\u0131m ve kredi ba\u015fvuru gibi farkl\u0131 departmanlar taraf\u0131ndan geli\u015ftirilen mod\u00fcllerini d\u00fc\u015f\u00fcn\u00fcn. Monolitik bir yap\u0131da, bu departmanlar ortak bir kod taban\u0131nda \u00e7al\u0131\u015ft\u0131\u011f\u0131 i\u00e7in herhangi bir de\u011fi\u015fiklik veya hata, uygulaman\u0131n tamam\u0131n\u0131 etkileyebilir ve da\u011f\u0131t\u0131m s\u00fcre\u00e7lerini geciktirebilir. Ancak mikro-frontend yakla\u015f\u0131m\u0131yla, her departman kendi mod\u00fcl\u00fcn\u00fc ayr\u0131 bir mikro-frontend olarak geli\u015ftirip da\u011f\u0131tabilir. Bu sayede, yat\u0131r\u0131m departman\u0131 yeni bir \u00f6zellik yay\u0131nlarken, mobil bankac\u0131l\u0131k mod\u00fcl\u00fc kesintisiz bir \u015fekilde \u00e7al\u0131\u015fmaya devam edebilir.<\/p>\n
Elbette, her mimari yakla\u015f\u0131m gibi mikro-frontendlere ge\u00e7i\u015fin de baz\u0131 zorluklar\u0131 bulunmaktad\u0131r. Artan operasyonel karma\u015f\u0131kl\u0131k, farkl\u0131 mikro-frontendler aras\u0131nda kullan\u0131c\u0131 deneyimi ve tasar\u0131m tutarl\u0131l\u0131\u011f\u0131n\u0131 sa\u011flama ihtiyac\u0131, ortak bir altyap\u0131 ve ileti\u015fim stratejisi belirleme gibi konular dikkatli planlama gerektirir. Ancak do\u011fru ara\u00e7lar ve stratejilerle, bu zorluklar\u0131n \u00fcstesinden gelmek ve uzun vadede s\u00fcrd\u00fcr\u00fclebilir, \u00f6l\u00e7eklenebilir uygulamalar olu\u015fturmak m\u00fcmk\u00fcnd\u00fcr. \u0130\u015fte bu noktada React Router v7, React Server Components ve Module Federation gibi modern web teknolojileri g\u00fc\u00e7l\u00fc \u00e7\u00f6z\u00fcmler sunmaktad\u0131r.<\/p>\n
Web geli\u015ftirme d\u00fcnyas\u0131 s\u00fcrekli bir evrim i\u00e7indedir ve bu evrim, kullan\u0131c\u0131 deneyimini ve uygulama performans\u0131n\u0131 en \u00fcst d\u00fczeye \u00e7\u0131karmay\u0131 hedefler. Bu hedefe ula\u015fmada React Router v7, React Server Components (RSC) ve modern web paketleme ara\u00e7lar\u0131 \u00f6nemli bir \u00fc\u00e7l\u00fc olu\u015fturur. Peki, bu kombinasyon mikro-frontend mimarilerine nas\u0131l bir de\u011fer kat\u0131yor ve uygulamalar\u0131m\u0131z\u0131 nas\u0131l daha verimli hale getiriyor?<\/p>\n
React Router, React uygulamalar\u0131nda y\u00f6nlendirme i\u015flemlerini y\u00f6netmek i\u00e7in vazge\u00e7ilmez bir k\u00fct\u00fcphanedir. React Router v7 ile birlikte gelen yenilikler, \u00f6zellikle daha sade bir API, performans iyile\u015ftirmeleri ve React’\u0131n en yeni \u00f6zellikleriyle uyum, y\u00f6nlendirme deneyimini \u00e7ok daha ak\u0131c\u0131 hale getiriyor. Mikro-frontend d\u00fcnyas\u0131nda, farkl\u0131 mikro-frontend’lerin kendi rotalar\u0131na sahip olmas\u0131 veya ana uygulaman\u0131n bu mikro-frontend’ler aras\u0131ndaki ge\u00e7i\u015fleri y\u00f6netmesi gerekti\u011finde React Router v7, esnek ve g\u00fc\u00e7l\u00fc bir \u00e7\u00f6z\u00fcm sunar. \u00d6rne\u011fin, bir e-ticaret uygulamas\u0131nda “\/\u00fcr\u00fcnler” rotas\u0131 \u00fcr\u00fcn listesi mikro-frontend’ine, “\/sepet” rotas\u0131 ise sepet mikro-frontend’ine y\u00f6nlendirilebilir. React Router, bu ge\u00e7i\u015fleri sorunsuz bir \u015fekilde y\u00f6neterek kullan\u0131c\u0131ya kesintisiz bir deneyim sunar.<\/p>\n
React Server Components (RSC) ise React ekosistemine getirilen en \u00e7\u0131\u011f\u0131r a\u00e7\u0131c\u0131 yeniliklerden biridir. RSC, client (taray\u0131c\u0131) taraf\u0131nda de\u011fil, sunucu taraf\u0131nda render edilen bile\u015fenlerdir. Bu sayede, sunucu taraf\u0131nda veritaban\u0131 sorgular\u0131 yapabilir, dosya sistemine eri\u015febilir ve a\u011f\u0131r hesaplama i\u015flemleri ger\u00e7ekle\u015ftirebilirsiniz. Bu yetenek, a\u011f y\u00fck\u00fcn\u00fc \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r, ilk y\u00fckleme s\u00fcresini k\u0131salt\u0131r ve dolay\u0131s\u0131yla uygulama performans\u0131n\u0131 art\u0131r\u0131r. Geleneksel olarak client’a g\u00f6nderilen b\u00fcy\u00fck JavaScript bundle’lar\u0131n\u0131n yerini, sunucu taraf\u0131nda i\u015flenmi\u015f ve yaln\u0131zca gerekli etkile\u015fimli client kodu i\u00e7eren daha k\u00fc\u00e7\u00fck paketler al\u0131r. RSC, \u00f6zellikle mikro-frontend’lerde payla\u015f\u0131lan layout’lar, statik i\u00e7erik mod\u00fclleri veya kritik ilk render bile\u015fenleri i\u00e7in m\u00fckemmel bir kullan\u0131m senaryosu sunar. Bir haber portal\u0131 uygulamas\u0131nda, ana sayfan\u0131n man\u015fet haberleri gibi s\u0131k g\u00fcncellenen ancak kullan\u0131c\u0131 etkile\u015fimi gerektirmeyen bile\u015fenler RSC olarak olu\u015fturularak, ana uygulaman\u0131n ilk y\u00fcklenme h\u0131z\u0131n\u0131 art\u0131rabilir.<\/p>\n
Bu iki teknolojiyi bir araya getirdi\u011fimizde, mikro-frontend uygulamalar\u0131 i\u00e7in inan\u0131lmaz bir potansiyel ortaya \u00e7\u0131kar. React Router v7, farkl\u0131 mikro-frontend’ler aras\u0131nda ak\u0131c\u0131 ve kontrol edilebilir bir navigasyon sa\u011flarken, RSC’ler bu mikro-frontend’lerin performans\u0131n\u0131 temelden iyile\u015ftirir. Sunucu taraf\u0131nda render edilen ve client’a sadece “serile\u015ftirilmi\u015f” HTML\/CSS ve minimal JavaScript g\u00f6nderen RSC’ler sayesinde, mikro-frontend’ler daha h\u0131zl\u0131 y\u00fcklenebilir ve daha iyi bir ilk etkile\u015fim (FID) performans\u0131 sunabilir. Bu, \u00f6zellikle farkl\u0131 ekipler taraf\u0131ndan geli\u015ftirilen ve farkl\u0131 performans profillerine sahip olabilecek mikro-frontend’lerin oldu\u011fu bir senaryoda kritik \u00f6neme sahiptir.<\/p>\n
K\u0131sacas\u0131, React Router v7, RSC ile birlikte, mikro-frontend geli\u015ftiricilerine hem esnek bir y\u00f6nlendirme hem de \u00fcst d\u00fczey bir performans optimizasyonu imkan\u0131 sunar. Bu kombinasyon, sadece teknik olarak \u00fcst\u00fcn uygulamalar in\u015fa etmekle kalmaz, ayn\u0131 zamanda son kullan\u0131c\u0131ya daha h\u0131zl\u0131, daha ak\u0131c\u0131 ve daha keyifli bir deneyim sunulmas\u0131n\u0131 sa\u011flar. \u0130\u015fte bu y\u00fczden modern web uygulamalar\u0131 ve \u00f6zellikle mikro-frontend mimarileri i\u00e7in bu \u00fc\u00e7l\u00fcn\u00fcn g\u00fcc\u00fcn\u00fc anlamak ve kullanmak b\u00fcy\u00fck \u00f6nem ta\u015f\u0131maktad\u0131r.<\/p>\n
Mikro-frontend mimarisinin temel ta\u015flar\u0131ndan biri, farkl\u0131 mikro-frontend’lerin birbirleriyle ve ana uygulamayla nas\u0131l ileti\u015fim kurdu\u011fu ve kodlar\u0131n\u0131 nas\u0131l payla\u015ft\u0131\u011f\u0131d\u0131r. Bu sorunu \u00e7\u00f6zmek i\u00e7in geli\u015ftirilen en g\u00fc\u00e7l\u00fc ara\u00e7lardan biri Webpack 5 ile gelen “Module Federation” \u00f6zelli\u011fidir. Module Federation, ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 gibi, farkl\u0131 uygulamalar\u0131n (mod\u00fcllerin) \u00e7al\u0131\u015fma zaman\u0131nda birbirleriyle federasyon kurmas\u0131n\u0131, yani mod\u00fclleri dinamik olarak payla\u015fmas\u0131n\u0131 ve kullanmas\u0131n\u0131 sa\u011flar.<\/p>\n
Geleneksel olarak, birden fazla uygulama veya k\u00fct\u00fcphane ayn\u0131 anda kullan\u0131ld\u0131\u011f\u0131nda, her birinin kendi ba\u011f\u0131ml\u0131l\u0131klar\u0131 ve kodlar\u0131 ayr\u0131 ayr\u0131 paketlenir. Bu durum, \u00f6zellikle b\u00fcy\u00fck projelerde, ayn\u0131 ba\u011f\u0131ml\u0131l\u0131klar\u0131n (\u00f6rne\u011fin React veya React Router gibi) birden fazla kopyas\u0131n\u0131n taray\u0131c\u0131ya indirilmesine neden olabilir. Bu da bundle boyutunu art\u0131r\u0131r, y\u00fckleme s\u00fcrelerini uzat\u0131r ve performans d\u00fc\u015f\u00fc\u015flerine yol a\u00e7abilir. Module Federation, bu soruna zarif bir \u00e7\u00f6z\u00fcm getirir.<\/p>\n
Module Federation’\u0131n temel prensibi olduk\u00e7a basittir: Bir uygulama “host” g\u00f6revi g\u00f6r\u00fcrken, di\u011fer uygulamalar “remote” olarak adland\u0131r\u0131l\u0131r. Remote uygulamalar, belirli mod\u00fcllerini (bile\u015fenler, helper fonksiyonlar\u0131, servisler vb.) “expose” eder, yani d\u0131\u015f d\u00fcnyaya a\u00e7ar. Host uygulama ise bu a\u00e7\u0131\u011fa \u00e7\u0131kar\u0131lan mod\u00fclleri “remote” olarak tan\u0131mlar ve kendi kodunda sanki lokal bir mod\u00fcl gibi Peki, bu mikro-frontendlere nas\u0131l k\u00f6pr\u00fc kurar? Module Federation sayesinde, her bir mikro-frontend (remote), kendi ba\u011f\u0131ms\u0131z geli\u015ftirme ve da\u011f\u0131t\u0131m ortam\u0131nda \u00e7al\u0131\u015fmaya devam ederken, ana uygulama (host) bu mikro-frontend’leri bir araya getirebilir. \u00d6rne\u011fin, bir e-ticaret sitesinde, \u00dcr\u00fcn Listesi mikro-frontend’i kendi “ProductCard” bile\u015fenini expose edebilir. Ana uygulama veya ba\u015fka bir mikro-frontend, bu “ProductCard” bile\u015fenini do\u011frudan kullanabilir. Ayr\u0131ca, React, React Router gibi ortak ba\u011f\u0131ml\u0131l\u0131klar da “shared” (payla\u015f\u0131lan) olarak tan\u0131mlanabilir. Bu sayede, taray\u0131c\u0131ya sadece bir kopyas\u0131 indirilir ve t\u00fcm mikro-frontend’ler bu payla\u015f\u0131lan kopyay\u0131 kullan\u0131r. Bu \u00f6zellik, bundle boyutunu dramatik bir \u015fekilde k\u00fc\u00e7\u00fclt\u00fcr ve uygulamalar aras\u0131 tutarl\u0131l\u0131\u011f\u0131 art\u0131r\u0131r.<\/p>\n <\/code><\/p>\n <\/code><\/p>\n Yukar\u0131daki \u00f6rneklerde g\u00f6r\u00fcld\u00fc\u011f\u00fc gibi, \u015eimdiye kadar mikro-frontend mimarisinin, React Router v7'nin, React Server Components'\u0131n ve Module Federation'\u0131n teorik temellerini anlad\u0131k. Art\u0131k bu g\u00fc\u00e7l\u00fc teknolojileri bir araya getirerek ger\u00e7ek bir mikro-frontend uygulamas\u0131 geli\u015ftirmeye ba\u015flayabiliriz. Bu b\u00f6l\u00fcmde, ad\u0131m ad\u0131m bir ana kabuk (host) uygulamas\u0131 ile bir veya daha fazla mikro-frontend (remote) uygulamas\u0131n\u0131 nas\u0131l entegre edece\u011fimizi ve React Router v7 ile bu uygulamalar aras\u0131nda nas\u0131l y\u00f6nlendirme yapaca\u011f\u0131m\u0131z\u0131 \u00f6\u011frenece\u011fiz.<\/p>\n \u0130lk olarak, ana kabuk uygulamam\u0131z ve en az bir mikro-frontend uygulamam\u0131z i\u00e7in temel React projeleri olu\u015ftural\u0131m. Bu projeler i\u00e7in Vite veya Create React App kullanabilirsiniz, ancak Webpack yap\u0131land\u0131rmas\u0131n\u0131 manuel olarak yapaca\u011f\u0131m\u0131z i\u00e7in sade bir ba\u015flang\u0131\u00e7 daha faydal\u0131 olabilir.<\/p>\n <\/code><\/p>\n Her iki uygulama i\u00e7in de host-app\/webpack.config.js:<\/b><\/p>\n <\/code><\/p>\n products-app\/webpack.config.js:<\/b><\/p>\n <\/code><\/p>\n \u015eimdi host uygulamam\u0131zda React Router'\u0131 yap\u0131land\u0131racak ve host-app\/src\/App.js:<\/b><\/p>\nimport<\/code> edebilir. En g\u00fczeli de, bu import i\u015flemi \u00e7al\u0131\u015fma zaman\u0131nda, yani uygulama taray\u0131c\u0131da \u00e7al\u0131\u015f\u0131rken ger\u00e7ekle\u015fir. Bu, kod payla\u015f\u0131m\u0131n\u0131 ve entegrasyonu son derece dinamik hale getirir.<\/p>\n\n\/\/ webpack.config.js (Host Uygulamas\u0131)\nconst { ModuleFederationPlugin } = require('webpack').container;\n\nmodule.exports = {\n \/\/ ... di\u011fer Webpack ayarlar\u0131 ...\n plugins: [\n new ModuleFederationPlugin({\n name: 'hostApp',\n remotes: {\n 'productsApp': 'productsApp@http:\/\/localhost:3001\/remoteEntry.js',\n 'cartApp': 'cartApp@http:\/\/localhost:3002\/remoteEntry.js',\n },\n shared: {\n react: { singleton: true, requiredVersion: '^18.2.0' },\n 'react-dom': { singleton: true, requiredVersion: '^18.2.0' },\n 'react-router-dom': { singleton: true, requiredVersion: '^6.x.x' },\n },\n }),\n ],\n};\n<\/pre>\n\n\/\/ webpack.config.js (Remote Uygulamas\u0131 - productsApp)\nconst { ModuleFederationPlugin } = require('webpack').container;\n\nmodule.exports = {\n \/\/ ... di\u011fer Webpack ayarlar\u0131 ...\n plugins: [\n new ModuleFederationPlugin({\n name: 'productsApp',\n filename: 'remoteEntry.js',\n exposes: {\n '.\/ProductList': '.\/src\/components\/ProductList',\n '.\/ProductDetail': '.\/src\/components\/ProductDetail',\n },\n shared: {\n react: { singleton: true, requiredVersion: '^18.2.0' },\n 'react-dom': { singleton: true, requiredVersion: '^18.2.0' },\n 'react-router-dom': { singleton: true, requiredVersion: '^6.x.x' },\n },\n }),\n ],\n};\n<\/pre>\nhostApp<\/code> iki farkl\u0131 remote uygulamay\u0131 (productsApp<\/code>, cartApp<\/code>) kendi i\u00e7ine entegre etmek i\u00e7in yap\u0131land\u0131r\u0131lm\u0131\u015ft\u0131r. Her iki uygulama da React, React DOM ve React Router DOM'u payla\u015f\u0131lan ba\u011f\u0131ml\u0131l\u0131k olarak tan\u0131mlam\u0131\u015f, b\u00f6ylece bu k\u00fct\u00fcphanelerin sadece bir kopyas\u0131n\u0131n y\u00fcklenmesi sa\u011flanm\u0131\u015ft\u0131r. Bu sayede Module Federation, mikro-frontend'ler aras\u0131ndaki entegrasyonu sadece teknik olarak kolayla\u015ft\u0131rmakla kalmaz, ayn\u0131 zamanda performans ve s\u00fcrd\u00fcr\u00fclebilirlik a\u00e7\u0131s\u0131ndan da \u00f6nemli avantajlar sunar.<\/p>\nAd\u0131m Ad\u0131m Mikro-Frontend Uygulamas\u0131 Geli\u015ftirme: React Router v7 ve Module Federation ile Entegrasyon Nas\u0131l Yap\u0131l\u0131r?<\/h2>\n
Ad\u0131m 1: Temel React Projelerini Olu\u015fturma<\/h3>\n
\n# Ana kabuk uygulamas\u0131 i\u00e7in\nmkdir host-app\ncd host-app\nnpm init -y\nnpm install react react-dom react-router-dom@latest webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel\/core @babel\/preset-react @babel\/preset-env style-loader css-loader\n\n# Mikro-frontend uygulamas\u0131 i\u00e7in\ncd ..\nmkdir products-app\ncd products-app\nnpm init -y\nnpm install react react-dom react-router-dom@latest webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel\/core @babel\/preset-react @babel\/preset-env style-loader css-loader\n<\/pre>\nAd\u0131m 2: Webpack ve Module Federation Yap\u0131land\u0131rmas\u0131<\/h3>\n
webpack.config.js<\/code> dosyalar\u0131n\u0131 olu\u015fturup Module Federation eklentisini eklemeliyiz. Host uygulamas\u0131 remote uygulamalar\u0131 tan\u0131mlayacak, remote uygulamas\u0131 ise bile\u015fenlerini expose edecektir.<\/p>\n\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst { ModuleFederationPlugin } = require('webpack').container;\nconst path = require('path');\n\nmodule.exports = {\n entry: '.\/src\/index.js',\n mode: 'development',\n devServer: {\n port: 3000,\n historyApiFallback: true, \/\/ React Router i\u00e7in gerekli\n },\n output: {\n publicPath: 'auto',\n },\n module: {\n rules: [\n {\n test: \/\\.jsx?$\/,\n loader: 'babel-loader',\n exclude: \/node_modules\/,\n options: {\n presets: ['@babel\/preset-react', '@babel\/preset-env'],\n },\n },\n {\n test: \/\\.css$\/,\n use: ['style-loader', 'css-loader'],\n },\n ],\n },\n plugins: [\n new ModuleFederationPlugin({\n name: 'hostApp',\n remotes: {\n productsApp: 'productsApp@http:\/\/localhost:3001\/remoteEntry.js',\n },\n shared: {\n react: { singleton: true, requiredVersion: '^18.2.0' },\n 'react-dom': { singleton: true, requiredVersion: '^18.2.0' },\n 'react-router-dom': { singleton: true, requiredVersion: '^6.x.x' },\n },\n }),\n new HtmlWebpackPlugin({\n template: '.\/public\/index.html',\n }),\n ],\n};\n<\/pre>\n\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst { ModuleFederationPlugin } = require('webpack').container;\nconst path = require('path');\n\nmodule.exports = {\n entry: '.\/src\/index.js',\n mode: 'development',\n devServer: {\n port: 3001,\n historyApiFallback: true, \/\/ React Router i\u00e7in gerekli\n },\n output: {\n publicPath: 'auto',\n },\n module: {\n rules: [\n {\n test: \/\\.jsx?$\/,\n loader: 'babel-loader',\n exclude: \/node_modules\/,\n options: {\n presets: ['@babel\/preset-react', '@babel\/preset-env'],\n },\n },\n {\n test: \/\\.css$\/,\n use: ['style-loader', 'css-loader'],\n },\n ],\n },\n plugins: [\n new ModuleFederationPlugin({\n name: 'productsApp',\n filename: 'remoteEntry.js',\n exposes: {\n '.\/ProductList': '.\/src\/components\/ProductList',\n },\n shared: {\n react: { singleton: true, requiredVersion: '^18.2.0' },\n 'react-dom': { singleton: true, requiredVersion: '^18.2.0' },\n 'react-router-dom': { singleton: true, requiredVersion: '^6.x.x' },\n },\n }),\n new HtmlWebpackPlugin({\n template: '.\/public\/index.html',\n }),\n ],\n};\n<\/pre>\nAd\u0131m 3: React Router v7'nin Host Uygulamas\u0131nda Kurulumu ve Remote Bile\u015fenlerinin Entegrasyonu<\/h3>\n
productsApp<\/code>'ten expose etti\u011fimiz ProductList<\/code> bile\u015fenini dinamik olarak y\u00fckleyece\u011fiz.<\/p>\n\nimport React, { Suspense } from 'react';\nimport { BrowserRouter, Routes, Route, Link } from 'react-router-dom';\nimport '.\/index.css'; \/\/ Ortak stiller\n\n\/\/ productsApp'ten ProductList bile\u015fenini lazy loading ile y\u00fckl\u00fcyoruz\nconst RemoteProductList = React.lazy(() => import('productsApp\/ProductList'));\n\nfunction App() {\n return (\n