# Projemizin Son Adımları

## React Composer Uygulaması

Uygulama dizinine gidip config/webpack.dev.js dosyasını açalım.

```javascript
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.<br>

```jsx
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.\ <br>

<figure><img src="https://1650590317-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqlE5JgSZf8UcNyhUnkmX%2Fuploads%2FB7xU2YECJxnzdZRvwWJk%2FScreenshot%202023-05-07%20at%2020.55.35.png?alt=media&#x26;token=0e4c2891-5ea4-49d7-99e4-383b9aafe687" alt=""><figcaption></figcaption></figure>

### <mark style="color:red;background-color:orange;">İlk micro frontend uygulamamızı tamamlamış olduk.</mark>&#x20;

<figure><img src="https://1650590317-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqlE5JgSZf8UcNyhUnkmX%2Fuploads%2FW6JOGiP29Jck2DHoq42D%2FScreenshot%202023-05-07%20at%2020.55.59.png?alt=media&#x26;token=4622ddce-21bf-4745-a9af-a02e9ec0c54b" alt=""><figcaption><p>:)</p></figcaption></figure>

***NOT: Daha kapsamlı açıklamalar ve uygulamalar eklenecektir.***&#x20;

***Projenin GitHub linki:*** [***https://github.com/fport/jrontend-fun***](https://github.com/fport/jrontend-fun)