Dynamically set remote origins at runtime within hosts

Overview

external-remotes-plugin

Host webpack.config

const config = {
   ...otherConfigs
  plugins: [
    new ModuleFederationPlugin({
      name: "app1",
      remotes: {
        app2: "app2@[window.app2Url]/remoteEntry.js"
      }
    }).
    new ExternalTemplateRemotesPlugin(),
  ]
}

or

plugins: [
    new ModuleFederationPlugin({
        name: 'my-app',
        remotes: {
            'my-remote-1': 'my-remote-1@[window.remote-1-domain]/remoteEntry.js?[getRandomString()]',
            ...
        },
        shared: {...}
    }),
    new ExternalTemplateRemotesPlugin(), //no parameter,
]

Host (app1) source somewhere before loading main entry file

window.app2Url = "//localhost:3002"; // Whatever the url/logic to determine your remote module is

import("./bootstrap");

Working example is also available in this PR: https://github.com/module-federation/module-federation-examples/pull/557.

Update: the PR was merged a example can be found under advanced-api/dynamic-remotes-synchronous-imports

Comments
  • Load window vars asynchronously

    Load window vars asynchronously

    Is there a way to set the window variables asynchronously after an AJAX call?

    E.g.

    // webpack.config
    remotes: {
      'remote': 'remote@[window.remoteUrl]'
    }
    
    // index.js
      async function setup() {
        try {
          const manifest = await fetch(`/apps/manifest.json`).then(res =>
            res.json()
          );
    
          // Setup MFE URL after the call
          window.remoteUrl = 'whatever';
    
        } catch (e) {
          console.error(e);
        }
      }
    
    setup().then(() => import('./bootstrap'));
    

    This do not work (just empty page) where if I set the var outside of setup() it works.

    opened by nkalinov 3
  • Configure Renovate

    Configure Renovate

    WhiteSource Renovate

    Welcome to Renovate! This is an onboarding PR to help you understand and configure settings before regular Pull Requests begin.

    🚦 To activate Renovate, merge this Pull Request. To disable Renovate, simply close this Pull Request unmerged.


    Detected Package Files

    • package.json (npm)

    Configuration Summary

    Based on the default config's presets, Renovate will:

    • Start dependency updates only once this onboarding PR is merged
    • Separate major versions of dependencies into individual branches/PRs
    • Do not separate patch and minor upgrades into separate PRs for the same dependency
    • Upgrade to unstable versions only if the existing version is unstable
    • Raise PRs immediately (after branch is created)
    • If semantic commits detected, use semantic commit type fix for dependencies and chore for all others
    • Keep existing branches updated even when not scheduled
    • Disable automerging feature - wait for humans to merge all PRs
    • Ignore node_modules, bower_components, vendor and various test/tests directories
    • Autodetect whether to pin dependencies or maintain ranges
    • Rate limit PR creation to a maximum of two per hour
    • Limit to maximum 20 open PRs at any time
    • Group known monorepo packages together
    • Use curated list of recommended non-monorepo package groupings
    • Ignore spring cloud 1.x releases
    • Ignore http4s digest-based 1.x milestones
    • Use node versioning for @types/node
    • Limit concurrent requests to reduce load on Repology servers until we can fix this properly, see issue 10133

    🔡 Would you like to change the way Renovate is upgrading your dependencies? Simply edit the renovate.json in this branch with your custom config and the list of Pull Requests in the "What to Expect" section below will be updated the next time Renovate runs.


    What to Expect

    It looks like your repository dependencies are already up-to-date and no Pull Requests will be necessary right away.


    ❓ Got questions? Check out Renovate's Docs, particularly the Getting Started section. If you need any further assistance then you can also request help here.


    This PR has been generated by WhiteSource Renovate. View repository job log here.

    opened by renovate[bot] 0
  • Dependency Dashboard

    Dependency Dashboard

    This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

    Open

    These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

    Detected dependencies

    npm
    package.json
    • webpack-sources ^2.2.0
    • webpack ^5

    • [ ] Check this box to trigger a request for Renovate to run again on this repository
    opened by renovate[bot] 0
  • webpack5 cache create failed

    webpack5 cache create failed

    Problem: When I set it up, I get an error.

    cache: {
     type: 'filesystem'
    }
    

    Error log:

     -> RawSource
        [webpack.cache.PackFileCacheStrategy] Error: No serializer registered for RawSource
    

    Thinking 🤔: I think it's because a new source has been replaced afterafterCodeGeneration. so can I modify it directly on the original source?

    sourceMap.set(
        'javascript',
        new RawSource(rawSource.source().replace(`"${urlTemplate}"`, urlExpression))
    );
    
    opened by OckhamRazor 3
  • Update dependency webpack-sources to v3

    Update dependency webpack-sources to v3

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | webpack-sources | ^2.2.0 -> ^3.0.0 | age | adoption | passing | confidence |


    Release Notes

    webpack/webpack-sources

    v3.2.3

    Compare Source

    v3.2.2

    Compare Source

    Bugfixes

    • Source Code is splitted into lines via custom code instead of using a RegExp
      • In weird edge cases the RegExp caused a Stack Overflow

    v3.2.1

    Compare Source

    Bugfixes

    • RawSources with Buffers can now be concatenated with ConcatSource
    • Source Code is splitted into lines via custom code instead of using a RegExp
      • In weird edge cases the RegExp caused a Stack Overflow

    v3.2.0

    Compare Source

    Performance

    • add SourceMapSource.buffer for better performance
    • more efficient serialization of source mappings

    Bugfix

    • avoid crashing when trying to compare the name with the original source, but there is no sourcesContent in SourceMap

    v3.1.2

    Compare Source

    Bugfix

    • improve handling of invalid mappings (like zero sized or negative)

    v3.1.1

    Compare Source

    equal to 3.1.0

    v3.1.0

    Compare Source

    Bugfix

    • improve handling of null sources and sourceContents

    Performance

    • faster streaming when only lines are mapped

    v3.0.4

    Compare Source

    Bugfix

    • fix invalid mappings when multiple lines with multiple chunks are replaced

    v3.0.3

    Compare Source

    Bugfix

    • restore backward-compat format for storing end position of replacements

    v3.0.2

    Compare Source

    Bugfix

    • fix incorrect offset sign when doing replacements

    v3.0.1

    Compare Source

    Bugfixes

    • fix ConcatSource off-by-1 bug

    v3.0.0

    Compare Source

    Performance

    • remove all dependencies
    • refactoring for performance
      • remove node() and listMap()
      • add streamChunks()

    Configuration

    📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, check this box

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • Is this going to be published to NPM?

    Is this going to be published to NPM?

    Couldn't find this plugin on npm and I'd like to use it in my project. Have just copied the source over for now but would be great if this package was published too.

    opened by manasb-uoe 2
Owner
Module Federation
Official plugins designed and developed by the authors of Webpack Module Federation
Module Federation
frida runtime (no python required, only a single file),One-click support for ios smashing shell

fd 简要介绍 要是你看不懂中文可以使用chrome翻译功能 frida 运行时(不需要python,只有单一个文件) fd 使用fd前请确认手机上有frida-server a brief introdction English can use chrome translation frida r

null 181 Dec 30, 2022
Small (0.5 Kb) react hook for getting media breakpoints state info in runtime

tiny-use-media Small (0.5 Kb) react hook for getting media breakpoints state info in runtime Usage npm i tiny-use-media --save Adn in your react code

Valeriy Komlev 51 Dec 13, 2022
A plugin that lets you override the Webpack modules public path in webpage runtime.

dynamic-public-path-plugin A plugin that lets you override the Webpack modules public path in webpage runtime. plugin : webpack-runtime-public-path-pl

dxh_vip 4 Jan 25, 2022
React Hooks library for remote data fetching

Introduction swr.vercel.app SWR is a React Hooks library for remote data fetching. The name “SWR” is derived from stale-while-revalidate, a cache inva

Vercel 25.2k Jan 4, 2023
Enable Fast Refresh for remote data in NextJS.

next-remote-refresh Utilize Fast Refresh for remote data in NextJS. ⚠️ This solution relies on undocumented APIs and may break in future NextJS update

Travis Arnold 153 Dec 23, 2022
This hook allows you to isolate and manage the state within the component, reducing rendering operations and keeping the source code concise.

React Hook Component State This hook allows you to isolate and manage the state within the component, reducing rendering operations and keeping the so

Yongwoo Jung 2 May 15, 2022
This project simulates the different Pokédex presented within the Pokémon franchise.

?? Pokédex is under construction... ?? ?? About the project Made with PokéAPI, this project simulates the different Pokédex presented within the Pokém

Anthony Davi 4 Oct 29, 2022
Set up a modern web app by running one command.

Create React App Create React apps with no build configuration. Creating an App – How to create a new app. User Guide – How to develop apps bootstrapp

Facebook 98.4k Jan 1, 2023
🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.

downshift ?? Primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components. Read the docs | See

Downshift 11.1k Dec 28, 2022
A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️

A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list Examples available here: http://claude

Claudéric Demers 10.3k Jan 2, 2023
A set of React components implementing Google's Material Design specification with the power of CSS Modules

React Toolbox is a set of React components that implement Google's Material Design specification. It's powered by CSS Modules and harmoniously integra

React Toolbox 8.7k Dec 30, 2022
nivo provides a rich set of dataviz components, built on top of the awesome d3 and Reactjs libraries

nivo provides supercharged React components to easily build dataviz apps, it's built on top of d3. Several libraries already exist for React d3 integr

Raphaël Benitte 10.9k Dec 31, 2022
A complete set up of the React application with Typescript, Webpack 5, Babel v7, SSR, Code Splitting and HMR.

Getting Started with react-final-boilerplate Clone the code npm install You are good to go with React Application. Open http://localhost:3000/ and you

null 24 Dec 22, 2022
This example represents SCORM-compliant question set (aka quiz)

HTML&JS SCORM 2004 Compliant Quiz This example represents SCORM-compliant question set (aka quiz) and was made with Bootstrap 5 and Vanilla JS. You ma

null 1 Dec 25, 2021
Vue-hero-icons - A set of free MIT-licensed high-quality SVG icons, sourced from @tailwindlabs/heroicons, as Vue 2 functional components.

vue-hero-icons For Vue3, install the official package @heroicons/vue A set of free MIT-licensed high-quality SVG icons, sourced from @tailwindlabs/her

Mathieu Schimmerling 97 Dec 16, 2022
Named slices with slice-scoped set and get functions for Zustand

Zustand Opine Opine Definition transitive verb To state as an opinion Purpose An opinionated Zustand store. Automates naming of actions for Redux Dev

Daniel Power 11 Oct 20, 2022
Minimal Design, a set of components for Angular 9+

Alyle UI Minimal Design, a set of components for Angular. Docs Install Alyle UI Installation Components Feature State Responsive Docs avatar ✔️ ✔️ Doc

Alyle 281 Dec 25, 2022
Chat with an AI that's powered by GPT-j. Talk with it, set parameters, ask questions, and twist words

AI Chat - Open Source | Powered by GPT-j with 6 billion neurons Chat with an AI that's powered by GPT-j. Talk with it, set parameters, ask questions,

Romelianism 3 Dec 29, 2022
Create Sonnat App - Set up a modern web app which is powered by Sonnat.

Create Sonnat App - Set up a modern web app which is powered by Sonnat.

Sonnat 2 Jan 31, 2022