Build Micro frontends — Integrate Remote Pages as ReactJS overlay via iframe with postMessage API

Introduction

Thanks the component-based micro-frontend technologies, we‘re allowed to use the remote Angular or React component in our NextJS application directly.

What if we want to integrate an existed remote page into our application?

The iframe is the simplest and a traditional way to achieve that. It’s not elegant but useful because this way won’t be restricted by the framework we used for.

About this series

This series aims to learn different micro-frontend technologies to bridge the remote applications in different frameworks.

• Article 1 (React + Next.js): Build Micro frontends in NextJS and ReactJS with Webpack 5 Module Federation
• Article 2 (React + Angular): Aggregate Angular Components in NextJS/ReactJS Application with Custom Element
• Article 3 (React + pure HTML/NodeJS): Integrate Remote Pages as ReactJS overlay via iframe with postMessage API

Overview of this article

We will go through the following topics in this article.

• Create a controllable remote page in Node.js Express