DEV Community: Ramesh Vishnoi

Mastering Project Maintainability with Module Resolver

Ramesh Vishnoi — Wed, 15 May 2024 15:36:30 +0000

Why you need Module Resolver?

Imagine working on a large-scale project containing numerous files such as components, screens, utils, etc.

Over time, the complexity of the project increases with multiple levels of imports. This eventually leads to a drop in developer productivity, making it difficult to onboard new developers. The impact is more pronounced on junior developers, who often get lost in the myriad of files.

With this project structure, importing components would look like this:



import Button from "../../components";
import Delete from "../../actions";
import utils from "../../utils";

To tackle all of the above issues, we can use the Module Resolver Babel plugin. This plugin helps simplify and manage your import paths, making your project more organized and maintainable.

What is Module Resolver?

Module Resolver is tool or mechanisms to covert relative paths to aliases for your entire Javascript/Typescript project.

How to setup project to use Module Resolver?

If you are using JavaScript, then make the following changes in the jsconfig.json file or create a new jsconfig.json file. If you are using TypeScript, either modify the existing tsconfig.json file or create a new tsconfig.json file with the following code:



{
    "compilerOptions": {
      "jsx": "react",
      "baseUrl": "./",
      "paths": {
        "@myapp/components": ["./src/components"],
        "@myapp/actions": ["./src/actions"],
        "@myapp/screens": ["./src/screens"],
        "@constants": ["./src/constants"],
        "@utils": ["./src/utils"]
      }
    },
    "exclude": ["node_modules"]
}

After making this change, restart your IDE for it to take effect. You can also replace @myapp with your project name to personalize your project setup.

Here’s how you can do it:

*Metro Bundler (React/React Native)

If your project is using Metro Bundler, which is the default bundler for React and React Native setups, modify the metro.config.js file with the following code:



const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */

const config = {
    resolver: {
        extraNodeModules: {
            "@myapp/components": `${__dirname}/src/components`,
            "@myapp/actions": `${__dirname}/src/actions`,
            "@myapp/screens": `${__dirname}/src/screens`,
            "@constants": `${__dirname}/src/constants`,
            "@utils": `${__dirname}/src/utils`
        }
    }
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

*Babel

If your project is using Babel, you can use the babel-plugin-module-resolver to manage your module paths. First, install the plugin:



npm install --save-dev babel-plugin-module-resolver

Then, update your babel.config.js file with the following code:



module.exports = {
  plugins: [
    [
      "module-resolver",
      {
        "root": ["./src"],
        "alias": {
          "@myapp/components": "./components",
          "@myapp/actions": "./actions",
          "@myapp/screens": "./screens",
          "@constants": "./constants",
          "@utils": "./utils"
        },
        "extensions": [".js", ".ios.js", ".android.js", ".json"]
      }
    ]
  ]
};

* Webpack

If your project is using Webpack, you can configure it to resolve custom module paths by modifying the webpack.config.js file as follows:



module.exports = {
  resolve: {
    alias: {
      "@myapp/components": path.resolve(__dirname,"src/components"),
      "@myapp/actions": path.resolve(__dirname,"src/actions"),
      "@myapp/screens": path.resolve(__dirname,"src/screens"),
      "@constants": path.resolve(__dirname,"src/constants"),
      "@utils": path.resolve(__dirname,"src/utils")
    },
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
};

After module resolver changes, you can import like this:



import Button from "@myapp/components";
import Delete from "@myapp/actions";
import utils from "@constants";

Feel free to tweak it according to your personal style or any additional points you might want to add!

Happy Coding!
Feel free to reach out to me on linkedin - https://www.linkedin.com/in/rameshvishnoi/

Debouncing Simplified

Ramesh Vishnoi — Sat, 08 Apr 2023 10:40:59 +0000

Another frequently asked question in interviews these days is Debouncing. Debouncing is important concept used in Javascript to improve performance, prevent unnecessary wastage of resource.

Debouncing is a mechanism in which a frequently called function is called once after some threshold time limit is reached.

Lets take example - you have a search input box in UI, now you want to display result on every keyinput by user (similar to how google display search result).

But fetching result from api on every input charater is expensive - there will be network calls, computation on backend and ui update multiple times.

If a user want to search for baking receipe then it comes to total 14 characters l.e 14 api call will be made to backend, but out of 14, only 1 or 2 are enough to display relevant result.

so on an average you make 12 api call which are not required, and if your application have 1000s of user then you multiply wasted api calls accordingly. Because resource wastage is on backend side, so 12 * 1000 api calls, this is only one search query. If your average user is making 10 search query on a day = 12 * 1000 * 10. You can see where i am going with this.

We can avoid making unnecessary api calls by using debouncing. We design frontend UI in a way that on every character input, system wait for some time (it can be 1 second or 500 millisecond depending on your application), and during this time if there is another input then we wait again and only make api call (with complete user input) if there is no further input.

Implementation -

Consider a React application

const HomeScreen = () => {
    const [searchQuery, setSearchQuery] = useState("")

    const triggerSearch = (e) => {
        setSearchQuery(e.target.value)
        fetchResult(e.target.value)
    }

    const fetchResult = () => {
        console.log("API called for following input :: ", input)
    }

    return (
        <div className="App">
            <label>Search for: </label>
            <input value={searchQuery} onInput={triggerSearch}/>
        </div>
    )
}

If we type for baking receipe the fetchResult function get called 14 times

Solution :

const HomeScreen = () => {
    const [searchQuery, setSearchQuery] = useState("")
    const timer = useRef();

    const triggerSearch = (e) => {
        setSearchQuery(e.target.value)
        debouncedFetchResult(e.target.value)
    }

    const fetchResult = (input) => {
        console.log("API called for following input :: ", input)
    }

    const debouncedFetchResult = (input) => {
        if (timer.current) {
            // if there was any pending api call then cancel it and request new
            clearTimeout(timer.current)
        }

        // here we are waiting for new input for 1second. you can change accordingly
        let timeoutInstance = setTimeout(() => {
            fetchResult(input)
        },1000)

        timer.current = timeoutInstance;
    }

    return (
        <div className="App">
            <label>Search for: </label>
            <input value={searchQuery} onInput={triggerSearch}/>
        </div>
    )
}

Here, on every input character, we call setTimeout and store its reference inside state variable. And if there is any old reference available then we cancel old setTimeout and create a new only.

Output -

Why micromanagement is good ?

Ramesh Vishnoi — Sat, 08 Apr 2023 03:35:54 +0000

I remember having discussion with one of newly joined colleague about general working style, company culture, timing, etc

Somehow we started on micro management and this person was very against it. He valued his freedom more than anything else.

Lot of young people who joined corporate world during COVID think on the same lines. (Think themself as master of their trade)

This generation usually do not know how to work efficiently, how to prioritise or communicate across different teams and also clear all blockers.

When junior engineers do not receive adequate supervision or mentorship from their senior colleagues, they may struggle to perform their tasks efficiently. They may face difficulties in understanding complex technical problems, or they may not have the necessary skills to complete their work in a timely manner. This can lead to frustration and a lack of motivation, which can further impact their productivity.

Getting micromanaged is not easy.

I remember my time, for 2 years - my tasks were getting prioritised by my manager, designs and flow finalized before development work.
Basically my next day was getting planned on the day before.
I was frustrated, had no choice or freedom over tasks, had to justify where I spend my time.

But this was the time, I was most productive, had very high learning curve. Understood difference between good code and bad code, learned about code standardisation, naming convention.
I was not running for next shiny framework, library or language.
It was pure grind.

Micromanagement puts constraints and Creativity comes from constraint.
Great teams are hungry for constraints, they want to understand all the aspects, restrict the space, start developing, feel each other, appreciate each other's aptitude and skills

Similarly time is constraint. You can timebox your project to force creativity flow.

So micromanagement is not a bad thing, instead it’s a must for junior engineers.

Memoization Simplified

Ramesh Vishnoi — Sat, 01 Apr 2023 15:22:26 +0000

One of the common interview question asked during interview is memoization.

Before starting on technical details, lets understand general definition -

Memoization is a programming technique that speeds up the execution of functions by caching the results of previous function calls and returning the cached result when the same inputs occur again.
This can be useful for functions that take a long time to compute and are called repeatedly with the same inputs. By caching the results of previous function calls, memoization avoids redundant computations and improves the overall performance of the function.

In simple words, memoization is a process where we cache the result of a function against function's input arguments and use cached value when same input arguments are used.

Implementation :
You can create generic function which coverts a normal function into memoized function.

Consider the following example - Assume you have a expensive function which multiply 2 big integers

const multiply = (a, b) => {
    return a * b;
}

There is no point in calling this function again and again with same arguments. You can just create a memoized version of same function which will save you execution time and computational space.

In order to achieve this, we need to use High Order Functions. Find more information on HOF here

const memoizedFunction = (func) => {
        let cache = {}
        return (...args) => {
            var stringifiedArgs = args.toString();
            if (cache[stringifiedArgs]) {
                return cache[stringifiedArgs]
            }

            var result = func(...args)
            cache[stringifiedArgs] = result;
            return result;
        }
}

Here memoizedFunction accepts function as argument and return a new funtion. It also maintain history of all the function call and its value inside cache which is then used to determine if it need to call the function or return value from cache.

const memoizedMultiply = memoizedFunction(multiply)


memoizedMultiply(314, 340) // calculated
memoizedMultiply(10, 340) // calculated
memoizedMultiply(314, 340) // cached

Voila! You have successfully memoized a function.

If you're interested in learning more about React, React Native and JS, check out my Linkedin profile here. And feel free to share it with anyone who might find it helpful!

Happy coding!

Common mistakes Web Developers make when they start with React Native

Ramesh Vishnoi — Thu, 30 Mar 2023 09:34:33 +0000

React Native is a popular framework among developers for building mobile applications. However, web developers who are new to React Native may make some mistakes due to their familiarity with web development. One of the common mistakes is related to navigation state.

In web development, when a user navigates from route A to route B, the component rendered in route A becomes inactive or unmounted, and a new component is mounted for route B. The history object is maintained to track the user journey, and the browser back button is usually not used as websites and web apps are designed to have their own back button inside the app.

On the other hand, in mobile development, the back button is placed at the bottom of the screen, making it easily accessible to the user. Due to this, web developers need to consider what happens when the mobile back button is pressed.

Here are some common patterns in React Native codebase that web developers may encounter:

Just pushing new screens into the stack - While there is nothing wrong with pushing new screens, there are cases where you need to replace the current screen with a new screen. For example, when a user successfully authenticates and you want to navigate to the app's home screen, you should clear the current stack and push a new screen or replace the login screen with the home screen, so that when the user presses the back button, they don't end up on the login screen again.
Unnecessary re-rendering - All the screens that are not cleared from the navigation stack remain active. Any global state change consumed in these screens will trigger a re-render. The ideal solution is to create Pure components or High-Order Components to avoid unnecessary re-rendering.
Not clearing the navigation stack - Some code may push the Login screen into the stack on logout. This is not desirable, as the user should not be able to go back to the app's home screen when they press the back button on the login screen. In this case, the navigation stack should be cleared, and only the Login screen should be pushed.

As cross-platform technologies like React Native and Flutter become more popular, more web developers are transitioning to mobile development. By understanding the differences between web and mobile development and being mindful of these common mistakes, web developers can avoid issues when starting with React Native.

Write your custom Hook

Ramesh Vishnoi — Mon, 20 Mar 2023 14:17:14 +0000

This is a step-by-step guide on how to create custom hooks in React. Custom hooks are a fantastic way to encapsulate logic and functionality that can be reused across multiple components in your application.

Creating custom hooks can make your code much more efficient, reusable, and easier to read. The article does a great job of breaking down the process into simple steps that anyone can follow, making it an excellent resource for React developers of all levels.

If you have common code used across multiple components. You must be wondering why need hook in the first place, why not use good old functions which are available from in Vanilla JS.

With Hooks you can listen to events, such as is device online or offline (very useful for mobile apps), listen for window resize events or create a hook which communicates between webview.

Some of rules for writing hooks.

Your hook name should shart with use. React have naming convention which it uses to differentiate between Components and Hooks. For ex - Component name should always start with Capital letter.
Hooks only work in Functional components.
Hooks do not work conditionally. For ex - you cannot put hook inside if else block.
Hooks re-render with components. Every time, props or state changes, it re-renders hooks l.e hook will have latest props and state value.

Lets build a hook which tracks cursor and returns its x and y coordinates.

Step 1: Declare hook

import { useState, useEffect } from 'react';

function useTrackCursor() {
  const [coord, setCoord] = useState({
    x: 0,
    y: 0
  })

  useEffect(() => {
    function handleResize(event) {
      setCoord({
        x: event.pageX,
        y: event.pageY,
      });
    }

    window.addEventListener('mousemove', handleResize);
    return () => window.removeEventListener('mousemove', handleResize);
  }, []);

  return coord;
}

export default useTrackCursor;

Step 2 : Consume Hook in components.

import useTrackCursor from "../hooks/trackCursor";

const HomeScreen = () => {
    const {x, y} = useTrackCursor();
    return (
        <div className="App">
            <header className="App-header">
                <p> X Co-ordinate : {x}</p>
                <p> Y Co-ordinate : {y}</p>
            </header>
        </div>
    )
}

export default HomeScreen;

Hooks let you reuse common stateful logic between different components.

If you're interested in learning more about React, React Native and JS, check out my Linkedin profile here. And feel free to share it with anyone who might find it helpful!

Happy coding!

State Management using Context API

Ramesh Vishnoi — Fri, 17 Mar 2023 15:44:04 +0000

In this article, we'll use Context API as State Management in our React App, same can be used in React Native app.

Context allows data to be passed down the component tree without having to pass props manually at every level.

Context is primarily used for sharing data that is global to the entire application.

Biggest advantage of using of Context is ease of onboarding into existing or new codebase without any unwanted boilerplate code. Redux comes with lot of boilerplate code and difficult to integrate.

How to Use the Context API for State Management

Step 1: Create a Context

export const AppStateContext = createContext()

Here AppStateContext is Context value used across the app. You can create multiple context for different parts of state. For now, lets stick with only one.

Step 2: Create a Provider

const AppStateProvider = (props) => {
    const [state, setState] = useState({isLoggedIn: false})
    const reducer = (action) => {
    }
    return (
        <AppStateContext.Provider value={[state, reducer]}>
            {props.children}
        </AppStateContext.Provider>
    )
}

Here we are making state and reducer values made available in all the components which consume this Context.

state will contain the app state (with default value as isLoggedIn = false), while reducer is function which will update state and it accepts action as a argument.

Now wrap up your app component at Root level, so that all components can access this Context.

return (
    <AppStateProvider>
        <HomeScreen />
    </AppStateProvider>
)

Step 3: Consume context in Components.

const HomeScreen = () => {
    const [state, reducer] = useContext(AppStateContext);

    return (
        <div className="App">
            <header className="App-header">
                Is User Logged In : {state.isLoggedIn}
            </header>
        </div>
    )
}

Step 4: Add update state logic in reducer

 const reducer = (action) => {
    let updatedState;
    switch (action.type) {
        case 'toggleLogin':
            updatedState =  {
                ...state,
                isLoggedIn: !state.isLoggedIn
            }
    }
    setState(updatedState);
}

Modify reducer function to accept action and update state. Here action object contain type which is used to differentiate between different actions and data as payload. for ex - pass data as api response

Step 5: Update state from component

const HomeScreen = () => {
    const [state, reducer] = useContext(AppStateContext);

    const loginNow = () => {
        reducer({type: 'toggleLogin'})
    }
    return (
        <div className="App">
            <header className="App-header">
                Is User Logged In : {state.isLoggedIn}
                <button onClick={loginNow}>Login</button>
            </header>
        </div>
    )
}

Voila! You have a working app state management mechanism. You can follow same steps for React Native as well.

Career Framework

Ramesh Vishnoi — Tue, 14 Mar 2023 13:47:23 +0000

You are mostly dependent on your manager for your promotion, which is limiting because it is now manager's skills, expertise and reach which determines your career.
You are lucky if your manager is capable of pushing you forward. Sometimes after putting time and effort with your manager, he/she decides to quit from company, then you have to repeat this with new manager.
Do these instead to take control of your career.

Don't get defined by your role. You might have more insights than executive team since you are on ground executing, share ideas, insights with your teammates, not only with your team but with other teams as well.
Do things proactively which will take you in front of people, create value for others and this will open up new opportunities for you. Do these things yourself instead of waiting for someone to give this to you.
Don't do things that will just support your manager, who in turn will promote you. Do this because it will be accelerator for yourself irrespective of your manager, also it will be accelerator for your manager as well. This is another way to bring back career momentum in your hands instead of relying on your manager.
Everybody is skilled at something which are not explicit to their role, taking initiatives outside your role will give you reach outside your team.
Growth mindset Vs Fixed mindset - Growth mindset is when you are open for learning instead of sticking with old approaches. It’s a belief that abilities and intelligence can be developed and improved over time through hard work, dedication, and learning from mistakes. People with a fixed mindset tend to avoid challenges, give up easily when faced with obstacles, view effort as fruitless, and feel threatened by feedback or criticism.
Victim mindset Vs Responsibility mindset - A victim mindset focuses on blaming external factors for one's problems and shortcomings, while a responsibility mindset takes ownership of one's actions and outcomes and seeks to find solutions and opportunities for growth.

useEffect Simplified

Ramesh Vishnoi — Sat, 11 Mar 2023 16:00:55 +0000

useEffect hook was introduced in functional class paradigm in React. useEffect is most used hook, you can use it to make network call, preform calculation, listen for a particular state change and for cleanup of component.

Let's understand useEffect function definition first -

useEffect(() => {

    return () => {
        // cleanup function
    }
},[])

This hook accepts callback function as 1st argument and dependency array as 2nd argument.
Inside callback function, you can return a function which will get triggered as cleanup function.

2nd Argument - Dependency array is tweak for different behaviour.

Before going to into useEffect, lets understand first when a component is mounted and unmounted.

A component is mounted when it is part of render logic.

const Profile = () => {
    return (
        <div>Profile Component</div>
    )
}

const App = () => {
    const mount = false;
    return (
        <div>
            {
                mount ? <Profile/> : null
            }
        </div>
    );
}

Here Profile component is mounted only when mount flag is true and unmounted only when it is removed from render.

Case 1 - Empty dependency array

useEffect(() => {
    return () => {

    }
},[])

Here, callback function will be triggered when component is mounted and cleanup function will be triggered with component is unmounted.

This is similar to componentDidMount and componentDidUnMount from class based components from pre React 16.

Case 2 - With Dependency array

const App = () => {
    const [count, setCount] = useState(0);
    const [streak, setStreak] = useState(0);

    useEffect(() => {
        // This will be triggered when count state is changed
        return () => {

        }
    },[count])

    useEffect(() => {
        // This will be triggered when count streak is changed
        return () => {

        }
    },[streak])


    useEffect(() => {
        // This will be triggered when count or streak streak is changed
        return () => {

        }
    },[count, streak])

    return (
        <div>
           <p>This is count : {count}</p>
           <p>This is streak : {streak}</p>
        </div>
    );
}

Case 3 - No Dependency array

const App = () => {
    const [count, setCount] = useState(0);

    useEffect(() => {
        // This will trigger on every render
        return () => {

        }
    })

    return (
        <div>
           <p>This is count : {count}</p>
           <p>This is streak : {streak}</p>
        </div>
    );
}

High Order Function Explained

Ramesh Vishnoi — Thu, 09 Mar 2023 15:32:07 +0000

One of the commonly asked question for Frontend Interview. This question is valid from Junior role to Lead role. Your answer determine if you have JS basics clear or not.

What is High Order Function ?

By Definition - A Function which accepts a function as argument or returns a function as value or Both.

Most of the candidates answers half correctly. In order to qualify a function as High Order Function it has to pass one of the 3 criteria -

Accept a function as a argument
Return a function as a value
Both of the above

Example of 1st Criteria :

Here getUser function accepts onSuccess and onError. These are functions as argument. In this example, getUser does not return anything.

Example of 2nd Criteria :

Here getSumFunc returns a new function as value.

Example of 3rd Criteria :

Here getConfidentialFunction is a funtion which converts a normal function into a function with access to confidential data. Here getConfidentialFunction accepts a fucntion as argument but also returns a new function.

Performance Review Tips

Ramesh Vishnoi — Sat, 04 Mar 2023 14:04:03 +0000

Performance Review Tips

If you are tasked with some project in outdated technology, instead of complaining about it. Start contributing, improving codebase. You are hired to deliver result it can be in latest technology or outdated.
Find ways to improve codebase - it can be migrating to new build process, adding listing or test cases.
You can use this time to improve your breadth of your knowledge. For example - For FE, you can try to understand how backend is interacting with different systems before returning your api call response. For BE, enquire about all the 3rd party libraries used for that api call or anything which peeks your interest.
Documentation - There is no such thing as over documentation, most of the projects I have worked in my 7 years of career, I have never came across well documented project (* few exceptions). Documentation is continuous process.
Let your Colleagues and manager know about your ideas on how to improve coding patterns or build processes or your eagerness to work on certain project.
Try to create wider impact - it can be origination level or team level. If you have idea on improving your or teammates time/life, spend sometime to come up with MVP and demo it to your team.

   Follow these tips well before your performance review meeting and you & your manager will have all the good things to talk about.

  Hopefully you’ll find these tips useful at your workspace.

Micro-frontend Pratical guide - Part 2

Ramesh Vishnoi — Thu, 08 Sep 2022 14:20:55 +0000

In previous post, we discussed what is micro-frontend architecture and its pros and cons. In this post, we'll go through the steps required in setting up the project - how to initialize the main container app and a sample module using React.

We'll assume that our complex app needs some booking functionality. let's start with one module (booking-module) and a container(or master) app

Initialize Booking module with

npx create-react-app booking-module

cd booking-module && npm start make sure everything is working as expected.

Create a Counter component which will be exposed to main container app.

// src/Counter.js
import React, { useState } from 'react'

const Counter = () => {
    const [count, setCount] = useState(0);
    const handleIncrement = () => setCount(count + 1);
    const handleDecrement = () => setCount(count - 1);
    return (
        <div className='counter'>
            <h3>This is Counter App Module</h3>
            <p><strong>{count}</strong></p>
            <div>
                <button onClick={handleIncrement} className='counter-btn'>+</button>
                <button onClick={handleDecrement} className='counter-btn'>-</button> 
            </div>

        </div>
    )
}
export default Counter;

Update your App.js

import './App.css';
import Counter from './Counter';

function App() {
  return (
    <div className="App">
      <h3>This is Booking module</h3>
      <Counter/>
    </div>
  );
}

export default App;

Next step: Introduce webpack
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin

Create webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require("webpack").container.ModuleFederationPlugin;
const deps = require('./package.json').dependencies

module.exports = {
    mode: 'development',
    devServer: {
        port: 8082,
    },
    output: {
        filename: 'main.js',
      },
      module: {
        rules: [{ 
            test: /\.jsx?$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            options: { presets: [
                '@babel/env',
                ["@babel/preset-react", {"runtime": "automatic"}]
            ] },
         }, { 
            test: /\.css$/, 
            use: [ 'style-loader', 'css-loader' ] 
        }],
      },
    plugins: [
        new ModuleFederationPlugin({
            name: "bookingModule",
            filename: "remoteEntry.js",
            remotes: {},
            exposes: {
              "./Counter":"./src/Counter.js"
            },
            shared: {
              ...deps,
              react: {
                singleton: true,
                requiredVersion: deps.react,
              },
              "react-dom": {
                singleton: true,
                requiredVersion: deps["react-dom"],
              },
            },
          }),
        new HtmlWebpackPlugin({
            template: './public/index.html'
        })
    ]
};

Here ModuleFederationPlugin will expose your components as a separate bundle. Note - name field inside ModuleFederationPlugin will be used while importing components, so make sure you have a unique module name.

We exposed Counter component like this

exposes: {
    "./Counter":"./src/Counter.js"
}

Multiple components can also be exposed just like

exposes: {
    "./Counter":"./src/Counter.js",
    "./Timer":"./src/Timer.js"
},

Next Step -
npx webpack serve - this will run your module instance on given port. 8082 in my case

Restructure your module's entry point file.
By default, src/index.js is the entry file and it contains multiple import which creates problem while building bundle
Modify src/index.js file as follow -

import('./bootstrap')

Create bootstrap.js file with following content -

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

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

Initialize Main Container app

npx create-react-app container
cd container

Install Webpack dependencies
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin

Create webpack.config.js file

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require("webpack").container.ModuleFederationPlugin;
const deps = require('./package.json').dependencies

module.exports = {
    mode: 'development',
    devServer: {
        port: 8080,
    },
    output: {
        filename: 'main.js',
      },
      module: {
        rules: [{ 
            test: /\.jsx?$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            options: { presets: [
                '@babel/env',
                ["@babel/preset-react", {"runtime": "automatic"}]
            ] },
         }, { 
            test: /\.css$/, 
            use: [ 'style-loader', 'css-loader' ] 
        }],
      },
      plugins: [
        new ModuleFederationPlugin({
            name: "container",
            remotes: {
               bookingModule:"bookingModule@http://localhost:8082/remoteEntry.js",
              },
            exposes: {
            },
            shared: {
              ...deps,
              react: {
                singleton: true,
                requiredVersion: deps.react,
              },
              "react-dom": {
                singleton: true,
                requiredVersion: deps["react-dom"],
              },
            },
          }),
        new HtmlWebpackPlugin({
            template: './public/index.html'
        })
    ]
}

We are now telling webpack to import module from this url and multiple modules can be imported similar to how we did in booking module.

remotes: {
               bookingModule:"bookingModule@http://localhost:8082/remoteEntry.js",
              },

Now you are ready to consume booking-module's component, but before we need to change the entry point of the project similar to how we did in booking module.

create a bootstrap.js file with content

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

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

modify index.js file as below

import('./bootstrap')

Now import Counter from booking module and consume component

import Counter from 'bookingModule/Counter';

function App() {
  return (
    <div className="App">
      <h3>This is Container App</h3>
      <Counter/>
    </div>
  );
}

Output:

DEV Community: Ramesh Vishnoi

Mastering Project Maintainability with Module Resolver

Why you need Module Resolver?

What is Module Resolver?

How to setup project to use Module Resolver?

*Metro Bundler (React/React Native)

*Babel

* Webpack

Debouncing Simplified

Implementation -

Solution :

Why micromanagement is good ?

Getting micromanaged is not easy.

Memoization Simplified

Common mistakes Web Developers make when they start with React Native

Write your custom Hook

Step 1: Declare hook

Step 2 : Consume Hook in components.

State Management using Context API

Step 1: Create a Context

Step 2: Create a Provider

Step 3: Consume context in Components.

Step 4: Add update state logic in reducer

Step 5: Update state from component

Career Framework

useEffect Simplified

Case 1 - Empty dependency array

Case 2 - With Dependency array

Case 3 - No Dependency array

High Order Function Explained

What is High Order Function ?

Performance Review Tips

Performance Review Tips

Micro-frontend Pratical guide - Part 2

Initialize Booking module with

Initialize Main Container app

Source code can be found here

Next steps - Deployment coming soon