brunos3d

bruno in next-mf-host-with-mandatory-libs/apps/remote on  main [!?] took 8.3s 
➜  npm run dev

> @demo/remote-app@0.1.0 dev
> next dev -p 3011

npm ERR! code ENOWORKSPACES
npm ERR! This command does not support workspaces.

npm ERR! A complete log of this run can be found in: /home/bruno/.npm/_logs/2023-11-24T19_33_46_944Z-debug-0.log

brunos3d

// remote
// uses xlib@10 as a singleton

import { generate } from 'xlib'; // hey, I'm a singleton and I will have only one global instance in memory =]

// the federated component
export default function GenerateSomethingButton() {
  const content = generate();
  return <h1>{content}</h1>;
}

brunos3d

const path = require('path');

/**
 * @type {import('webpack').Configuration & { devServer?: import('webpack-dev-server').Configuration }}}
 */
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),

brunos3d

This example shows abstracts the way Apollo Client creates its Context components to avoid context duplication, you can see the Apollo original code here

The main idea is to give you the ability to share a React Context between packages and applications, like Microfrontends with Module Federation.

// global-context.ts

import * as React from "react";

export function getGlobalContext<P = {}>(

brunos3d

Remote that shares the components defines a Sentry.hub instance defining some tags that will be used by the host during the dispatch of the logs to Sentry server

import * as Sentry from "@sentry/browser";

const hub = new Sentry.Hub();

hub.configureScope((scope) => {
  scope.setTag("Host", "shop");
 scope.setTag("Team", "shop-team");

brunos3d

const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  /**
   *
   * @param {import('webpack').Configuration} config
   * @returns {import('webpack').Configuration}

brunos3d

const { composePlugins, withNx } = require('@nx/webpack');
const Dotenv = require('dotenv-webpack');

const fs = require('fs');
const path = require('path');

// check for available env file using Nx conventions and return the path
function resolveEnvFile(basePath = __dirname) {
  const envFiles = [
    `.env.${process.env.NX_TASK_TARGET_CONFIGURATION}.${process.env.NX_TASK_TARGET_TARGET}`,

brunos3d

import MeiliSearch from 'meilisearch';

export type WaitForTaskOptions = {
  client: MeiliSearch;
  taskUid: number;
  retries?: number;
  retryDelay?: number;
  customErrorMessage?: string;
};

brunos3d

const hrefMonkeyPatch = () => {
  const originalCreateElement = React.createElement;

  React.createElement = function createElement () {
    const args = Array.prototype.slice.call(arguments);

    if (!args[1]) {
      args[1] = {};
    }

brunos3d

Images based on GitHub Theme