React-based Portal

Please note: This article is only available in English.
Experiences in building a simple React-based portal web app.

A week ago I released a repository on GitHub that contains sample code for a portal-like web app. This portal features side-by-side placement of mini applications (referred to as widgets), which may even interact with each other by emitting event or sharing data.

The repository is also a proof of concept to illustrate how an Angular-based application may be running inside a React container. Likewise, vanilla JS, or other frameworks (e.g., classic AngularJS, Vue, ...) could be run. There is definitely some overhead involved (the bundles for these non-React based mini applications need to contain the respective framework). Nevertheless, the portal itself is efficient and handles these mini applications within error boundaries.

The given code is obviously only a starting point. For a real application some things would be added, placed differently, or need to be modified. Most importantly, the already mentioned overhead would potentially be tackled with shared bundles, that would be required to load before running the respective widget.

My goal is to make that one simple example as deep as required to illustrate the full potential (and required workarounds, ...) of such a solution. Obviously, since the code was written in TypeScript, I still believe that TypeScript should be the language of choice.

I know that I still did not deliver the TypeScript series I've promised; in the upcoming weeks this will be (finally) delivered! At the moment I am not sure, though, if this series will be published here, or some other site (e.g., SitePoint).

If you have any comments, suggestions, ideas for improvement, or found a bug, please just open an issue at the GitHub repository or be so kind to make a pull request. Thanks, much appreciated!

Created . Last updated .

References

Sharing is caring!