ruslan.rocks Open in urlscan Pro
2a06:98c1:3121::3  Public Scan

Form analysis
0 forms found in the DOM

Text Content

Hey guys, I'm starting a   YouTube channel 🤾🏽‍♂️ please like and subscribe!
 * Unblocked Games
 * Free Games
 * Draw with Friends


 1. Home
 2. Blog
 3. Vite Module Federation (vite-plugin-federation) | Updated


VITE MODULE FEDERATION (VITE-PLUGIN-FEDERATION) | UPDATED

Vite Frontend Microfrontend
Updated June 9th, 2023
 * Vite compares to Webpack.
 * Vite Module Federation plugin
 * Install vite-plugin-federation
   * Install the package
   * Update the configuration
   * Import components asynchronous
   * Use remote component
 * Static import support
 * Usage of Vite Module Federation package
 * Module Federation For Next.js



Module Federation or Microfrontends is a relatively new pattern from the Webpack
team. They created a Module federation plugin to use different separate builds
as a single application.

Those builds should not have any dependencies on each other. That means
different teams or companies can develop them and deploy them separately.

This type of application we call now "micro frontends".

Advertisement



#VITE COMPARES TO WEBPACK.

Vite is a new front-end tool that helps developers run the application locally
using the development server and produce optimized builds using Rollup for the
production environment.

Vite was created by Evan You, the same man who gave us the Vue js framework.
People may think Vite is only for the Vue js application. It is an entirely
wrong assumption.

Vite was successfully used by React community as well. Here you can check the
article where I compare Vite vs Webpack. 

Advertisement



#VITE MODULE FEDERATION PLUGIN

The Vite ecosystem is growing up, and new plugins come often. One good news was
that the Module federation concept could be used with Vite too.

Let me introduce you to the Vite plugin Federation.

The guys from Originjs created this excellent plugin so that we can develop
micro frontend applications with Vite.

Please, have a look at the official repository when you are going to try it in
your applications.


#INSTALL VITE-PLUGIN-FEDERATION


#INSTALL THE PACKAGE

The installation has no surprise. You should use your favourite package manager
and install this plugin as a development dependency. This is the command if you
use NPM:

npm install @originjs/vite-plugin-federation --save-dev



#UPDATE THE CONFIGURATION

import federation from "@originjs/vite-plugin-federation"
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    federation({
      name: 'my-module-name',
      filename: 'remoteEntry.js',
      exposes: {
        './MyButton': './src/MyButton.vue',
      },
      remotes:{
          some: 'remote_some'
      },
      shared: ['vue']
    })
  ],
})



#IMPORT COMPONENTS ASYNCHRONOUS

<script>
export default {
  name: 'App',
  components: {
    RemoteMyButtonScoped: () => import('remote-simple/remote-button-scoped'),
  }
}
</script>



#USE REMOTE COMPONENT

<template>
  <div class="button-wrapper">
    <RemoteMyButtonScoped />
  </div>
</template>


As per official documentation, Federation relies on Top-level await, and you
have to set "build. target" to "next" or similar value. Always check if your
target browsers support top-level await.

Advertisement



#STATIC IMPORT SUPPORT

Vite module federation supports static import of your remote components.

If you use React:

// dynamic import
const myNewButton = React.lazy(() => import('remote/myNewButton'))

// static import
import myNewButton from 'remote/myNewButton'


If you use Vue:

// dynamic import
const myNewButton = defineAsyncComponent(() => import('remote/myNewButton'));
app.component('my-new-button' , myNewButton);
// or
export default {
  name: 'App',
  components: {
    myNewButton: () => import('remote/myNewButton'),
  }
}

// static import
import myNewButton from 'remote/myNewButton';
app.component('my-new-button' , myNewButton);
// or
export default {
  name: 'App',
  components: {
    myNewButton
  }



#USAGE OF VITE MODULE FEDERATION PACKAGE

Micro frontends are becoming more popular in big companies. Teams want to
develop small parts of applications and deliver changes faster and consistently.

With "originjs/vite-plugin-federation", you can easily create your micro
frontend system and start deploying your micro applications. It requires some
experiments and practice.

Once your dev team starts producing some output, you will notice that this
modern JavaScript ecosystem is a perfect way to work for distributed frontend
teams.

You might want to watch a video about mistakes or misconceptions that people
make when planning micro frontends.

If you are interested in how to build the architecture for Micro frontends, read
this post about pros and cons of using MFEs.


#MODULE FEDERATION FOR NEXT.JS

Here is also interesting examples from Zack Jackson about Module Federation
plugin for NextJS framework:

 * https://github.com/module-federation/nextjs-mf

At the moment its only for Client side only, SSR has a PR open. Looking forward
to see how SSR will be implemented.

If you are interested in [MFE's Pros and Cons of have a look at this
article]("Micro frontends pros and cons").

Happy coding!

Advertisement



RELATED VIDEO





FAQS


DOES VITE SUPPORT MODULE FEDERATION?



Yes, Vite supports module federation with vite-plugin-federation




WHAT IS MODULE FEDERATION



Microfrontend or Module Federation is a pattern in front-end development where a
single application can be built from different separate builds. It is analogous
to a microservices approach but for client-side single-page applications written
in JavaScript. It is a solution to de-composition and routing for multiple
front-end applications. These different builds should not depend on each other,
so they can be developed and deployed individually.




WHAT IS WEBPACK MODULE FEDERATION



Webpack Module federation is a Webpack plugin to build microfrontends.




DOES ROLLUP HAS MODULE FEDERATION?



Yes, Rollup has a module federation plugin




CAN I USE VUE WITH MODULE FEDERATION?



Yes, you can use Vue and module federation with Webpack or Vite bundler tool.




WHAT IS @ORIGIN/VITE-PLUGIN-FEDERATION?



@origin/vite-plugin-federation is a plugin for Vite to build microfronteds.




DOES ESBUILD SUPPORTS MODULE FEDERATION?



No, esbuild doesn't support module federation and doesn't have plans to include
it in the esbuild's core. You can use Vite with vite-plugin-federation to build
the microfrontends.




WHAT IS VITE MODULE FEDERATION?



Vite Module Federation is a plugin for Vite, a modern build tool for web
applications, that enables sharing of code between different applications. It
allows loading remote components and dynamically rendering them as part of the
local application.




HOW DOES VITE MODULE FEDERATION INTEGRATE WITH WEBPACK?



Vite Module Federation builds on top of webpack’s module federation feature,
making it easier to use for developers who are more familiar with Vite. It
allows Vite’s development server to work together with webpack’s dev server in a
seamless way.




WHAT IS THE BEST WAY TO CONFIGURE VITE MODULE FEDERATION?



The best way to configure Vite Module Federation is to use the plugin’s
configuration options. These options allow you to specify which modules should
be shared between different applications, as well as how they should be loaded
and rendered.




CAN YOU GIVE AN EXAMPLE OF A USE CASE FOR VITE MODULE FEDERATION?



One use case for Vite Module Federation is when you have multiple applications
that share some common functionality, but need to be deployed separately. By
using Vite Module Federation, you can create a shared library of components that
can be dynamically loaded and rendered by each application.




HOW DO I SPECIFY WHICH REMOTE MODULES TO USE?



You can specify which remote modules to use in your application’s configuration
file. You can also specify the format of the remote module entry file, and how
to handle local and remote modules that have the same name.




CAN I MODIFY REMOTE MODULES?



No, you cannot modify remote modules. Instead, you can use variable injection
and other techniques to customize their behavior.




WHAT IS THE LATEST VERSION OF VITE MODULE FEDERATION?



The latest version of Vite Module Federation is 1.1.9.




WHAT IS THE DIFFERENCE BETWEEN LOCAL AND REMOTE MODULES?



Local modules are modules that are part of your own application, while remote
modules are modules that come from external sources.




WHAT IS THE BENEFIT OF USING VITE MODULE FEDERATION?



The main benefit of using Vite Module Federation is the ability to dynamically
load and render externally provided components. This allows for greater
modularity and flexibility in application development.




HOW DOES VITE’S IMPORT FEDERATION WORK?



Vite’s import federation works by specifying the names of the remote components
that should be loaded, as well as the names of the local components that will
render them. This allows for greater flexibility in how components are loaded
and rendered within an application.




HOW DOES VITE MODULE FEDERATION WORK WITH WEBPACK?



Vite Module Federation can work with webpack by allowing you to consume remote
webpack modules and integrate them into your Vite application.




WHAT IS THE DIFFERENCE BETWEEN VITE MODULE FEDERATION AND WEBPACK’S MODULE
FEDERATION?



Vite Module Federation is a plugin that was developed specifically for Vite,
while webpack’s Module Federation is a built-in feature of webpack.




WHAT ARE THE BENEFITS OF USING VITE MODULE FEDERATION?



The benefits of using Vite Module Federation include faster build times,
improved performance, and easier maintenance of large-scale applications.




HOW DO I CONFIGURE VITE MODULE FEDERATION?



You can configure Vite Module Federation by adding a federation object to your
vite.config.js file.




WHAT IS THE `FEDERATION` OBJECT IN VITE MODULE FEDERATION?



The federation object is where you specify the remote modules that your
application will consume, as well as any other configuration options related to
Vite Module Federation.




HOW CAN I INTEGRATE VITE MODULE FEDERATION INTO MY APPLICATION?



You can integrate Vite Module Federation into your application by installing the
vite-plugin-federation plugin and adding it to your vite.config.js file.




RELATED ARTICLES

 * How to use Vite to build Vue or React micro-frontends
 * Vite vs Webpack. When speed matters. 2023 update
 * Download Aniyomi and Best Extensions to Watch Movies for Free in 2023
 * Osintgram is a hack OSINT tool on Instagram in 2023
 * Vite proxy - how to setup in 2023
 * 3 Methods to find a Kahoot game PIN
 * Vite vs Rollup in 2023

Author: Ruslan Osipov
Powered By



Video Player is loading.
Play Video
PlaySkip Backward
Unmute

Current Time 0:00
/
Duration 50:04
Loaded: 1.17%


00:00
Stream Type LIVE
Seek to live, currently behind liveLIVE
Remaining Time -50:04
 
1x
Playback Rate

Chapters
 * Chapters

Descriptions
 * descriptions off, selected

Captions
 * captions settings, opens captions settings dialog
 * captions off, selected

Audio Track
 * default, selected

Picture-in-PictureFullscreen

This is a modal window.



Beginning of dialog window. Escape will cancel and close the window.

TextColorWhiteBlackRedGreenBlueYellowMagentaCyanOpacityOpaqueSemi-TransparentText
BackgroundColorBlackWhiteRedGreenBlueYellowMagentaCyanOpacityOpaqueSemi-TransparentTransparentCaption
Area
BackgroundColorBlackWhiteRedGreenBlueYellowMagentaCyanOpacityTransparentSemi-TransparentOpaque
Font Size50%75%100%125%150%175%200%300%400%Text Edge
StyleNoneRaisedDepressedUniformDropshadowFont FamilyProportional
Sans-SerifMonospace Sans-SerifProportional SerifMonospace SerifCasualScriptSmall
Caps
Reset restore all settings to the default valuesDone
Close Modal Dialog

End of dialog window.

Advertisement










FOOTER


ONLINE GAMES

 * Free Games Online
 * Unblocked Games World
 * Roblox Unblocked


TROUBLESHOOTING

 * CreamAPI CreamInstaller
 * EA DLC Unlocker v2
 * Kahoot Game Pin
 * SteamUnlocked Games
 * Delta Executor for Roblox
 * Grabify IP Logger


FREE ONLINE TOOLS

 * Website Revenue Calculator
 * WiFi Password Generator Online


HELP & SUPPORT

 * Langchain Golang & more geek topics
 * Write for us
 * Privacy Policy
 * Terms of Use
 * About me

Instagram Twitter GitHub

© 2023 Ruslan.Rocks. All rights reserved.




Welcome!

SENTY PTY LTD values your privacy

We and our vendors (1346) store and/or access information on a device, such as
cookies and process personal data, such as unique identifiers to personalize
content and ads, provide social media features, analyze our traffic, and develop
and improve products.

We and our vendors may use precise geolocation data and identification through
device scanning with your permission. You may click to consent to our and our
partners’ processing as described above. Alternatively, you may access more
detailed information and change your preferences before granting or refusing
consent.

Please note that some processing of your personal data may not require your
consent, but you have a right to object to such processing. Your preferences
will apply to this website only. You can change your preferences at any time by
returning to this site. Scope of consent is service-specific.

Manage settings
Consent to All
Powered by