I'm getting ERR_SSL_PROTOCOL_ERROR on chrome Version 83.0.4103.116 (Official Build) (64-bit)

and on latest firefox

An error occurred during a connection to 01_pages_links.the-tractor.store:3001. 
SSL received a record that exceeded the maximum permissible length.

Error code: SSL_ERROR_RX_RECORD_TOO_LONG

It also does not work on latest safari

Yes, I know how that sounds.

The idea of splitting a codebase into smaller chunks isn't new. I think we can all agree on that. It originated way back in the desktop world where things like dynamically loaded libraries (be that .so, .dll, .jar or what have you) allow for sharing parts of the code between different projects but also allow parts of a single application to be developed independently (to a degree where the API still matches the user and the library). Please note that in all those cases, we're still talking about a single process which matches the way web applications are done.

That can be achieved, although not easily, with npm packages that can be separately deployed to the registry and then linked as a single application that runs in the single-process and single-threaded environment that the browser is. Of course there are separate threads that are being spawn by the browser itsel, but to the user (as in the developer) for all intent and purposes the environment is single threaded and single process.

In contrast, the idea of micro-services is very much different. Although living with just a single thread per process isn't all that unthinkable (if the platform you're running your code deals with it like e.g. node.js does) but running multiple processes inside the browser is just not doable in a performant way. The one and only way to simulate the microservices architecture in the browser is by using iframes. That's a fact.

Following what people think about micro-frontends and what has been proposed is very much different.

First of all, you don't want to have code duplication. Duplicating code makes the app load slower. We don't want that, because it will make our page/app rank lower. We definitely don't want that. This eliminates things like multiple copies of that same library.

Secondly, the idea of having the ability to deploy (we'll get to that what it means in just a second) separately is very tempting. After all, who wouldn't like to be able to deploy part of the system so that the rest of it is oblivious to the change, right? Well, the only problem is that you're not deploying anything at any time other than when the browser requests the resources and runs them. That is where the rubber meets the road. And so any and all ideas that you "deploy to npm registry" or "deploy to server" means absolutely nothing because that is no deployment whatsoever. That's just copying bytes around. They do nothing on the server.

To that end, any mirage of server-side includes and frontend code that stems from it is just the wrong thing to do. Instead of even thinking how to marry the two worlds together, it is much more beneficial to organize the system in a more homogeneous way so that it is not only easier to develop but also to maintain.

In the end it is just the wrong thing to do with all the server-side includes and web components (which nobody uses besides google). Today's FE world runs on frameworks (Vue.js, Angular, React). All of those frameworks are HUGE. Doing what has been proposed, that every team has a certain degree of freedom in choosing their own tool of choice is just not going to fly. Even in the microservices peope tend to standardize on a single language and framework because that way it is far easier to find developer replacement in this world where a typical timespan over which a developer works for a single project (or company) is about 6 months.

To bottom line this it is my humble request that you stop promoting this solution that (as time has shown) only works in hardly-working examples, all of which violate the primary rule of what architecture should provide: ease of development and maintenance. This is the take-away from my 5 years with the idea, trying to implement it in real-world scenarios. Not a single one has led to better DX nor to faster load times.

Working with FE is hard enough. Don't make it harder for no reason, selling dreams that never come true.

I have the following error when executing the books' code samples using Node.js version 14.16.0 with NPM version 6.14.11 on Powershell 7.1.3 Windows 10 :

`PS C:\Users\uzabu\dev\learn\microfrontend> npm run 01_pages_links

[email protected] 01_pages_links C:\Users\uzabu\dev\learn\microfrontend
concurrently --names "decide ,inspire" "mfserve --listen 3001 01_pages_links/team-decide" "mfserve --listen 3002 01_pages_links/team-inspire" "wait-on http://localhost:3001/product/porsche && opener http://localhost:3001/product/porsche"

[decide ] Error occurred when executing command: mfserve --listen 3001 01_pages_links/team-decide
[decide ] Error: spawn cmd.exe ENOENT
[decide ] at Process.ChildProcess._handle.onexit (internal/child_process.js:269:19)
[decide ] at onErrorNT (internal/child_process.js:465:16)
[decide ] at processTicksAndRejections (internal/process/task_queues.js:80:21)
[inspire] Error occurred when executing command: mfserve --listen 3002 01_pages_links/team-inspire
[inspire] Error: spawn cmd.exe ENOENT
[inspire] at Process.ChildProcess._handle.onexit (internal/child_process.js:269:19)
[inspire] at onErrorNT (internal/child_process.js:465:16)
[inspire] at processTicksAndRejections (internal/process/task_queues.js:80:21)
[2] Error occurred when executing command: wait-on http://localhost:3001/product/porsche && opener http://localhost:3001/product/porsche
[2] Error: spawn cmd.exe ENOENT
[2] at Process.ChildProcess._handle.onexit (internal/child_process.js:269:19)
[2] at onErrorNT (internal/child_process.js:465:16)
[2] at processTicksAndRejections (internal/process/task_queues.js:80:21)
[2] wait-on http://localhost:3001/product/porsche && opener http://localhost:3001/product/porsche exited with code -4058
[inspire] mfserve --listen 3002 01_pages_links/team-inspire exited with code -4058
[decide ] mfserve --listen 3001 01_pages_links/team-decide exited with code -4058
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] 01_pages_links: concurrently --names "decide ,inspire" "mfserve --listen 3001 01_pages_links/team-decide" "mfserve --listen 3002 01_pages_links/team-inspire" "wait-on http://localhost:3001/product/porsche && opener http://localhost:3001/product/porsche"
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 01_pages_links script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\uzabu\AppData\Roaming\npm-cache_logs\2021-04-27T07_42_34_137Z-debug.log`

When I run the Node examples using Nginx on Ubuntu 20.10 I get the following error (as a user in the terminal):

> [email protected] 04_routing /home/ian/dev/micro-frontends/micro-frontends-in-action-code
> concurrently --names "nginx  ,decide ,inspire" "node nginx.js 04_routing/webserver/nginx.conf" "mfserve --listen 3001 04_routing/team-decide" "mfserve --listen 3002 04_routing/team-inspire" "wait-on http://localhost:3000/product/porsche && opener http://localhost:3000/product/porsche"

[nginx  ] 📮 ERROR: Unable to start Nginx
[nginx  ] nginx: [alert] could not open error log file: open() "/var/log/nginx/error.log" failed (13: Permission denied)
[nginx  ] 
[nginx  ] 🦑 Is Nginx installed?
[nginx  ] Install it via your system's package manager.
[nginx  ] e.g. $ sudo apt-get install nginx

To get around the permission issue I ran as root (in IntelliJ IDEA) but then I get:

> [email protected] 05_ssi /home/ian/dev/micro-frontends/micro-frontends-in-action-code
> concurrently --names "nginx  ,decide ,inspire" "node nginx.js 05_ssi/webserver/nginx.conf" "mfserve --listen 3001 05_ssi/team-decide" "mfserve --listen 3002 05_ssi/team-inspire" "wait-on http://localhost:3000/product/porsche && opener http://localhost:3000/product/porsche"

[nginx  ] 📮 ERROR: Unable to start Nginx
[nginx  ] nginx: [emerg] open() "/dev/stdout" failed (6: No such device or address)
[nginx  ] 
[nginx  ] 🦑 Is Nginx installed?
[nginx  ] Install it via your system's package manager.
[nginx  ] e.g. $ sudo apt-get install nginx

The book advises just to install Nginx -- no configuration is necessary. I reinstalled it but to no avail.

Please advise.

Michael, first of all thanks a lot for putting up such a huge effort for the book and the examples here. They are greatly helpful to follow along the book. I am trying the examples one by one and made some observations on why you have written code in such a way by tweaking the code in many different ways and learning from it. Things such as :

• In 14_client_side_two_level_routing example in the app shell code here
  

  micro-frontends-in-action-code/14_client_side_two_level_routing/app-shell/index.html

  Line 19 in 31b23dc

  const routes = {

  
  The order of the route entry mappings is important such that the resolving is happening properly by putting the / path as the last entry.

• In the same chapter, we need to set the appHistoryinstance in the window object so that they can be accessed outside in the respective team-* pages components
  

  micro-frontends-in-action-code/14_client_side_two_level_routing/app-shell/index.html

  Line 46 in 31b23dc

  window.appHistory = window.History.createBrowserHistory();

• In the same chapter we can reuse the template function from the previous example in the following way instead of in-lining it.
  

  micro-frontends-in-action-code/14_client_side_two_level_routing/team-decide/pages.js

  Line 19 in 31b23dc

  this.innerHTML = `

const template = product => {
  return `
    <a href="/">&lt; home</a> -
    <a href="/checkout/cart">view cart &gt;</a>
    <h1>${product.name}</h1>
    <img src="https://mi-fr.org/img/${product.img}" width="200">
  `;
};

this.innerHTML = template(product);

These things can be in the form of simple comments within the example code would be of great help. I can create PRs with these documentation comments if possible.

Once again, thanks a lot for the book, it is the goto-guide for micro frontends and I am enjoying each and every line of it, the sections this chapter covers, summary , the graphics and the demo page are all phenomenal, and overall a great learning experience.

https://www.manning.com/books/micro-frontends-in-action

Look for resources and try to download the source code...