micro-frontends-demo / container Goto Github PK

View Code? Open in Web Editor NEW

523.0 523.0 131.0 1.38 MB

Entry point and container application for a micro frontends demo

CSS 6.65% HTML 5.24% JavaScript 88.12%

container's People

Contributors

Stargazers

Watchers

Forkers

ravindermahajan890 orieken soluno bagshik lintaonz create-share paperscz alexrohleder sabaricg darrenmeehan myszon01 hellmy criverap ericwangdq juarezs obalcik cleophasmashiri anurtayev nskn mobaidr rpan-wp mitema und3f1ned lishuliang tonybasran tanveersingh926 dougneale oathkitchen micro-front karthigeyanvellasamy tridungle lsegovia-andreani ikondrat chenreuven badawik sudhirmunna diegoneemu alokkulkarni fff2139678 shovandhara pmbranco shantamazumder224 starwangx maestre3d lsegala yulinghsia zhang-wj godaprojects-microfrontends kmels jnyjxn flamingo09 shiyishuoshuo asiftechie akurasnow junior-g lcwlucky codezfq zshield-web sinvalmao dunnjed jerome-portier ajaypratap003 shenqiuhui rhinomangit piyushnitc brianloughnane fredrikoseberg kentk87 duxianwei520 rjpdeen charlie-maloney yangdm2015 kevmehta sagarbajpai ujlkr jackieyylei rahulnigam28 jatin162 chooseexpert zhang570751696 loveyedie arpagrawal hnguyenec abhijeet8900 violetrosez bespalov-vladyslav ahtrahdis7 wanganni1014 aneeshadsouza laotian youkefan18 arkangelofkaos lenadss charmingcheng elevenpassin chiboycalix qingbolove amandafanny bad199xqn phpagil

container's Issues

micro frontends- shared components

hello,

How using a shared component library make sense in terms of the micro frontends architecture?

Best regards,

Cannot start the react app

Hello,

I cannot start the react app by using "yarn start" command. Further details are mentioned in the screenshot below. What am i doing wrong ?

Subroutes

What if in Browser microsite I have a subroute '/browse/thank-you'. How to handle this situation, especially using for moving to this route.
I tried to do that, and it found 404: not found :(

Advice needed.

CORS Error on Demo Website

I am receiving the following error on the live demo site: https://demo.microfrontends.com. None of the links appear to work either.

This is all that is displaying:

I am using Brave Browser 1.39.111 (the issue happens with the Brave shields up or down).

RR_OSSL_EVP_UNSUPPORTED

Yarn install and and start is giving below error. I am using Node.js v18.13.0

Starting the development server...

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:133:10)
at module.exports (/Users/pranavc/Hacking/micro-front-end/container/node_modules/webpack/lib/util/createHash.js:90:53)
at NormalModule._initBuildHash (/Users/pranavc/Hacking/micro-front-end/container/node_modules/webpack/lib/NormalModule.js:401:16)
at handleParseError (/Users/pranavc/Hacking/micro-front-end/container/node_modules/webpack/lib/NormalModule.js:449:10)
at /Users/pranavc/Hacking/micro-front-end/container/node_modules/webpack/lib/NormalModule.js:481:5
at /Users/pranavc/Hacking/micro-front-end/container/node_modules/webpack/lib/NormalModule.js:342:12
at /Users/pranavc/Hacking/micro-front-end/container/node_modules/loader-runner/lib/LoaderRunner.js:370:3
at iterateNormalLoaders (/Users/pranavc/Hacking/micro-front-end/container/node_modules/loader-runner/lib/LoaderRunner.js:211:10)
at iterateNormalLoaders (/Users/pranavc/Hacking/micro-front-end/container/node_modules/loader-runner/lib/LoaderRunner.js:218:10)
at /Users/pranavc/Hacking/micro-front-end/container/node_modules/loader-runner/lib/LoaderRunner.js:233:3
at runSyncOrAsync (/Users/pranavc/Hacking/micro-front-end/container/node_modules/loader-runner/lib/LoaderRunner.js:130:11)
at iterateNormalLoaders (/Users/pranavc/Hacking/micro-front-end/container/node_modules/loader-runner/lib/LoaderRunner.js:229:2)
at Array. (/Users/pranavc/Hacking/micro-front-end/container/node_modules/loader-runner/lib/LoaderRunner.js:202:4)
at Storage.finished (/Users/pranavc/Hacking/micro-front-end/container/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:16)
at /Users/pranavc/Hacking/micro-front-end/container/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:79:9
/Users/pranavc/Hacking/micro-front-end/container/node_modules/react-scripts/scripts/start.js:19
throw err;
^

Node.js v18.13.0

Use different syntax defining ports for Mac and Windows

The original implementation will not work on Windows. It is for Mac OS and Linux:
"start": "PORT=3001 react-scripts start",

There could be commands for Windows and Mac:
"start-mac": "PORT=3001 react-scripts start",
"start-windows": "set PORT=3001 && react-scripts start", or start-win

ReferenceError: React is not defined when start project

Step:

yarn install
yarn start
On browser, show error ReferenceError: React is not defined

asset-manifest.json is not created in development mode

asset-manifest.json is not generated in development mode - it will be available after a build was created in production.
Thus, if the application is running locally, asset-manifest.json is not available and fetch fails.

I made the app working by adding this logic for development mode:

    const script = document.createElement('script');
    script.id = scriptId;
    script.crossOrigin = '';
    script.src = `${host.replace('http', 'https')}/static/js/bundle.js`;

    script.onload = this.renderMicroFrontend;
    document.head.appendChild(script);

Also, I had to handle the protocol issue host.replace('http', 'https').

To summarize, this issue might help someone resolve the same issues that I had or the code owners might consider this and update the application.

Can we integrate Angular or Vue services to the container?

This is not a bug related to the existing project, I tried integrating container with an angular app and have come across a few blockers. In Microfrontend component, we are fetching asset-manifest.json from host and setting src as script.src = ${host}${manifest[main.js]}. Application that I was using as an Angular service is a boilerplate project that has manifest.webmanifest already created like below (unlike React where asset-manifest gets created internally I assume)-

{
  "name": "ngX-Rocket",
  "short_name": "ngX-Rocket",
  "theme_color": "#488aff",
  "background_color": "#488aff",
  "display": "standalone",
  "scope": "./",
  "start_url": "./",
  "icons": [
    {
      "src": "assets/ngx-rocket-logo.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/[email protected]",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable any"
    }
  ]
}

Can you shed some light on how can we make the communication possible between container and services that are using platforms like Angular or Vue?

Can we do MF call another MF ?

Hi, how can do this.
For example in the restaurant MF call new MF when click button or link.
Thanks

This external link is broken.

container/src/registerServiceWorker.js

Line 8 in 44e1ad2

// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.

Advice in README needs a wee update

README currently says "You can run the container on its own", but I think it needs 'content' running (default port 5000) or else there's an immediate can't find React error.

After that though, there's a missing 'http://localhost:5000/restaurants.json' resource (same port) and now I'm confused to whether I'm correct with the above suggested advise.

Maybe shouldn't be looking at the chrome tab that 'yarn start' itself opens at all.

Question: CORS issue

Can the container repo be used to launch everything else?

If I try and run this repo as normal "start": "PORT=3000 react-scripts start", I get a cors error whenever loading another module. Does anyone else get an error trying to do the fetch in MicroFrontend.js:13

		const url =`${host}/asset-manifest.json`;
		fetch(url)
			.then(res => res.json())

Multiple bundles are not attached

I run in a case when my "browse" micro frontend has its own route and inside that project, I load bundles dynamically based on the route I select (lazy loading), however, it's not true in case I want my project to be included as a micro frontend.
For now, let's say my "Browse" app has the following inside its manifest.json:
{ "main.css": "/main.css", "main.js": "/main.5d78560c5d4d6ccb90a6.js", "main.css.map": "/main.css.map", "main.js.map": "/main.5d78560c5d4d6ccb90a6.js.map", "1.5d78560c5d4d6ccb90a6.js": "/1.5d78560c5d4d6ccb90a6.js", "1.5d78560c5d4d6ccb90a6.js.map": "/1.5d78560c5d4d6ccb90a6.js.map", "2.5d78560c5d4d6ccb90a6.js": "/2.5d78560c5d4d6ccb90a6.js", "2.5d78560c5d4d6ccb90a6.js.map": "/2.5d78560c5d4d6ccb90a6.js.map", "index.html": "/index.html" }

Based on the logic inside the Microfrontend component, I extract only main.js which represents my home page for "Browse" project, but once I get to the second "page" of "Browse" app, it throws an error that it cannot find 1.5d78560c5d4d6ccb90a6.js and so on...

window render

kindly you can advice about the below :

TypeError: window["render".concat(...)] is not a function

 34 |   window[`render${name}`](`${name}-container`, history);