Adding MFE to an existing react project

If you have an existing React project and want to integrate Webpack into it, follow these steps:

1. Install Webpack and Related Packages

Navigate to your React project directory and install the necessary dependencies:

npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react

This installs:

Webpack and its CLI.
Development server (webpack-dev-server).
Plugins and loaders for handling React files and assets.

2. Set Up Webpack Configuration

Create a webpack.config.js file in the root of your project if it doesn’t already exist:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js', // Main entry point
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  mode: 'development', // Switch to 'production' for production builds
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/, // Handle JS and JSX files
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/, // Handle CSS files
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'], // Auto-resolve extensions
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html', // Use existing HTML file
    }),
  ],
  devServer: {
    static: './dist',
    port: 3000, // Development server port
  },
};

3. Configure Babel

If you don’t already have Babel set up, create a .babelrc file in the project root:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

4. Organize Your Project Structure

Ensure your project has the following structure:

project/
├── public/
│   └── index.html
├── src/
│   ├── index.js
│   ├── App.jsx
├── webpack.config.js
├── .babelrc
├── package.json
└── node_modules/

Make sure:

public/index.html is your main HTML file with a <div id="root"></div>.
src/index.js is the entry point where React renders the app.

5. Update `package.json` Scripts

Update the scripts section in your package.json to use Webpack:

"scripts": {
  "start": "webpack serve --open",
  "build": "webpack"
}

npm start: Launches the development server.
npm run build: Bundles the app for production.

6. Test Your Setup

Start the Development Server: npm start This will open your app in the browser at http://localhost:3000.
Build for Production: npm run build This creates a dist/ folder with your bundled app.

By following these steps, you’ll integrate Webpack into your existing React project, replacing any previous build system like Create React App’s default configuration.

The Architect

Adding MFE to an existing react project