Birleştirilmiş Uygulamanızı Yerel Olarak Çalıştırma ve Hata Ayıklama
Ana makine ve uzak uygulamaları birlikte başlatmayı, tarayıcıda birleştirilmiş modülleri incelemeyi ve yerel geliştirme sırasında sık karşılaşılan sorunlarda hata ayıklamayı öğrenin.
Birleştirilmiş Uygulamanızı Yerel Olarak Çalıştırma ve Hata Ayıklama, CoddyKit'te ücretsiz bir Micro Frontends Architecture with Module Federation dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Micro Frontends Architecture with Module Federation öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Micro Frontends Architecture with Module Federation kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
Local Development Setup
A federated app is really several apps. To develop, you run each remote and the host at the same time, each on its own port.
Assigning Ports
Give every app a fixed dev-server port so the host can reliably reference each remote during development.
devServer: { port: 3001 } // remote
devServer: { port: 3000 } // hostRunning Everything at Once
Manually opening many terminals is tedious. A tool like concurrently starts all dev servers with one command.
"scripts": {
"dev": "concurrently \"npm:dev:host\" \"npm:dev:remote\""
}Pointing the Host at Remotes
During development the host references each remote by its dev-server URL plus the exposed entry file.
remotes: {
cart: "cart@http://localhost:3001/remoteEntry.js"
}Inspecting remoteEntry.js
Every remote exposes a remoteEntry.js manifest. Open it directly in the browser to confirm the remote is running and to see what modules it exposes.
Using Browser DevTools
In the Network tab, watch for remoteEntry.js and the exposed module chunks loading. A 404 here is the most common federation error.
Common Error: Module Not Found
The error Cannot find module cart/Widget usually means the exposed path in the remote config does not match what the host imports. Names must match exactly.
exposes: { "./Widget": "./src/Widget" } // remote
import Widget from "cart/Widget"; // hostCommon Error: Shared React Twice
If React hooks throw Invalid hook call, two React copies are loading. Confirm singleton: true on React in every app config.
Hot Reload Limitations
Changes inside a remote may not hot-reload in the host automatically. Refresh the host, or restart the remote dev server, after editing exposed modules.
Logging Federation Resolution
Set verbose webpack stats or add console logs in your bootstrap to confirm which remote and shared versions resolved at run time.
console.log("loading remote cart...");
import("cart/Widget").then(m => mount(m.default));A Local Debug Checklist
When something breaks, check in order:
- Are all dev servers running?
- Does
remoteEntry.jsload (no 404)? - Do exposed names match imports?
- Is React a singleton everywhere?
Quick Check
Test your local debugging knowledge.
Recap
You learned to run and debug federated apps locally:
- Run host and remotes together on fixed ports
- Use
concurrentlyfor one-command startup - Inspect
remoteEntry.jsand the Network tab - Fix module-not-found and double-React errors
- Follow a quick debug checklist
Smooth local debugging speeds up MFE development.
Yapay zeka eğitmeniyle JavaScript öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 12
- Dersler
- 48
Sıkça Sorulan Sorular
“Birleştirilmiş Uygulamanızı Yerel Olarak Çalıştırma ve Hata Ayıklama” dersi ücretsiz mi?
Evet — “Birleştirilmiş Uygulamanızı Yerel Olarak Çalıştırma ve Hata Ayıklama” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Micro Frontends Architecture with Module Federation kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Micro Frontends Architecture with Module Federation kursu toplamda 4 dersten oluşur.
“Birleştirilmiş Uygulamanızı Yerel Olarak Çalıştırma ve Hata Ayıklama” dersinde ne öğreneceğim?
Ana makine ve uzak uygulamaları birlikte başlatmayı, tarayıcıda birleştirilmiş modülleri incelemeyi ve yerel geliştirme sırasında sık karşılaşılan sorunlarda hata ayıklamayı öğrenin. Micro Frontends Architecture with Module Federation ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Micro Frontends Architecture with Module Federation öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Micro Frontends Architecture with Module Federation, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Birleştirilmiş Uygulamanızı Yerel Olarak Çalıştırma ve Hata Ayıklama” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Micro Frontends Architecture with Module Federation dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Micro Frontends Architecture with Module Federation dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Proje Kurulumu ve Yapılandırması
- Modülleri ve Bileşenleri Paylaşma
- Basit Bir Federasyon Uygulaması Oluşturma
- Birleştirilmiş Uygulamanızı Yerel Olarak Çalıştırma ve Hata Ayıklama