Projemizin Son Adımları
Projemizin son adımlarını tamamlayalım 🎉
React Composer Uygulaması
Uygulama dizinine gidip config/webpack.dev.js dosyasını açalım.
const { merge } = require('webpack-merge')
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin')
const commonConfig = require('./webpack.common')
const packageJson = require('../package.json')
const devConfig = {
mode: 'development',
devServer: {
port: 3000,
historyApiFallback: {
index: 'index.html',
},
},
plugins: [
new ModuleFederationPlugin({
name: 'react-composer',
remotes: {
react_fragment: 'react_fragment@http://localhost:3001/remoteEntry.js',
vue_fragment: 'vue_fragment@http://localhost:3002/remoteEntry.js',
},
shared: packageJson.dependencies,
}),
],
}
module.exports = merge(commonConfig, devConfig)
Şeklinde düzenleyelim. Oluşturmuş olduğumuz react-fragment ve vue-fragment uygulamalarımızı ekliyor ediyor gibi düşünebilirsiniz.
Src/App.js dosyamızı gidip eklemiş olduğumuz React fragment'ın Composer içinde çalışmasını sağlayalım.
import React, {lazy, Suspense} from 'react'
const ReactFragment = lazy(() => import('react_fragment/App'));
const App = () => {
return (
<div>
<h1>Welcome react-composer</h1>
<Suspense fallback={"Loading.."}>
<ReactFragment/>
</Suspense>
</div>
)
}
export default App
Ve son dokunuşu da yaptığımıza göre tekrardan bütün uygulamalarımızı npm start diyerek ayağa kaldıralım. Ayrı ayrı çalışan javascript projelerimizi tek bir kapsayıcı react-composer uygulamasında birleşmiş hali bizi aşağıdaki gibi karşılıcak.
İlk micro frontend uygulamamızı tamamlamış olduk.
NOT: Daha kapsamlı açıklamalar ve uygulamalar eklenecektir.
Projenin GitHub linki: https://github.com/fport/jrontend-fun
Last updated