Forem: Sabareeswaran Chandrasekar

MicroFrontend with Module Federation (Full Configuration)

Sabareeswaran Chandrasekar — Wed, 23 Jul 2025 11:39:19 +0000

MicroFrontend:

An architectural style where a frontend application is split into smaller, semi-independent "micro-apps", each built, tested, and deployed by independent teams. It's the frontend version of microservices.

Build Time Integration:

It to the approach where microfrontends are integrated into the main application at the time of compilation, typically using npm packages, monorepos, or direct imports. All microfrontends are bundled together during the build process before deployment.

Run Time Integration:

It means the main application loads microfrontends on the fly, usually from a remote URL, after the application starts in the browser.

The concept of Module Federation occurs here only.

Module Federation:

It is a feature introduced in Webpack 5 that allows multiple applications to share and load code from each other at runtime—without bundling all the code together during the build.

It is the core technology behind Runtime Integration in Microfrontends.

Configuration:

Create the host and remote apps.

Check here for how to create the apps:

https://dev.to/sabareeswaran_chandraseka/create-a-reactjs-webpack-project-manually-without-create-react-app-59p1

In Remote App,

webpack.config.js:

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // other config...
  plugins: [
    new ModuleFederationPlugin({
      name: 'remoteApp',
      filename: 'remoteEntry.js',
      exposes: {
        './LoginForm': './src/components/LoginForm',
      },
      shared: ['react', 'react-dom'],
    });
  ],
};

In Host App,

webpack.config.js:

const { ModuleFederationPlugin } = require('webpack').container;


module.exports = {
  // other config...
  plugins: [
    new ModuleFederationPlugin({
     remotes: {
      remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js',
     },
     shared: ['react', 'react-dom'],
    });
 ],
};

Use it anywhere like:

const LoginForm = React.lazy(() => import('remoteApp/LoginForm'));

<Suspense fallback={<div>Loading...</div>}>
  <LoginForm />
</Suspense>

That's it.

Create a ReactJs Webpack project manually without create-react-app

Sabareeswaran Chandrasekar — Tue, 22 Jul 2025 12:04:18 +0000

Step 01: Initialize the Project

mkdir RW
cd RW
npm init -y

Step 02: Install Dependencies

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

Step 03: Create Project Structure

mkdir public
cd public/
touch index.html
cd ..
mkdir src
cd src
touch index.js
touch App.js
cd ..
touch .babelrc
touch webpack.config.js
touch package.json

public/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>React App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

src/App.js:

import React from 'react';

const App = () => {
  return <h1>Hello React with Webpack!</h1>;
};

export default App;

.babelrc:

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

webpack.config.js:

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

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    clean: true,
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    })
  ],
  devServer: {
    static: path.join(__dirname, 'dist'),
    compress: true,
    port: 3000,
    open: true,
  },
};

Update package.json:

"scripts": {
  "start": "webpack serve --mode development",
  "build": "webpack --mode production"
}

Run:

npm start

Your React app will be available at http://localhost:3000

That's it.

React + Vite + TypeScript + TailwindCSS

Sabareeswaran Chandrasekar — Thu, 17 Jul 2025 06:26:20 +0000

A step-by-step guide to manually set up a React + Vite + TypeScript + TailwindCSS project without using create-react-app:

Step 1: Initialize a Project

mkdir RVTT
cd RVTT/
npm init -y

Step 2: Install Vite, React, TypeScript

npm install react react-dom
npm install -D vite typescript @types/react @types/react-dom @types/node
npm install -D @vitejs/plugin-react

Step 3: Create the Vite + TypeScript Setup

npx tsc --init

Once done edit like below,

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "jsx": "react-jsx",
    "moduleResolution": "Node",
    "esModuleInterop": true,
    "strict": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "include": ["src"]
}

After adding the above content you will get error in that file like something below, just ignore it at this level:

No inputs were found in config file '......./RVTT/tsconfig.json'. Specified 'include' paths were '["src"]' and 'exclude' paths were '[]'.ts
Windsurf: Explain Problem

JSON schema for the TypeScript compiler's configuration file

Step: 4 Create vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})

Step 5: Create Folder Structure

mkdir src
touch index.html
touch src/main.tsx src/App.tsx src/index.css

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>React Vite App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

src/main.tsx:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

src/App.tsx:

const App = () => {
  return (
    <div className="text-center mt-10 text-2xl text-blue-500">
      Hello from React + Vite + Typescript + TailwindCSS
    </div>
  )
}

export default App

Step 6: Configure TailwindCSS

npm install -D tailwindcss postcss autoprefixer @tailwindcss/postcss

Create tailwind.config.ts:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Create postcss.config.ts:

module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
    autoprefixer: {},
  },
};

Edit src/index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 7: Update Scripts in package.json:

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
}

Step 8: Run

npm run dev

Final package.json file:

That's it.

Create a ReactJs Vite project manually without create-react-app

Sabareeswaran Chandrasekar — Wed, 16 Jul 2025 09:53:06 +0000

Step:01 Create project folder
terminal: mkdir React19
terminal: cd React19

Step:02 Initialize package.json
terminal: npm init -y

Step:03 Install required Dependencies
terminal: npm install react react-dom
terminal: npm install --save-dev vite @vitejs/plugin-react

Step:04 Update Scripts in package.json

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
}

Step:05 Create index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Vite React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

Step:06 Create vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()]
});

Step:07 Create src/main.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(<App />);

Step:08 Create src/App.jsx

import React from 'react';

function App() {
  return <h1>Hello from Vite + React!</h1>;
}

export default App;

Step:09 Run
terminal: npm run dev

That's it. Enjoy!!