Importing JavaScript modules from URL

Michal Vyšinský
May 6 · 2 min read

What is microfrontend

I will not repeat what was already written somewhere else. Should you wonder what microfrontend is, take a short break with the excellent article written by Vinci Rufus and then come back.

Our vision

We want to be able to load our micro apps from the registry by URL. Therefore we need to make NodeJS able to import modules from some URL.

Loader hooks to the rescue

Since Node 11 there is an experimental API which makes you able to change NodeJS module resolution behaviour. As the API is really experimental, it is changing with Node 12 (API), which I will use in the examples.

Let’s show some code. We want to be able to do this:

It is just a simple Express server which renders tiny application. The file loads lodash from unpkg.com and app from own HTTP server:

Note that we import react and react-dom/server. We don't have it installed next to the application and in future, when we will be bundling the application we will mark those “platform” dependencies like externals. It will be provided by a renderer application.

Loader magic

Let's finally show some code which does the magic (check the comments in the code for explanation):

What is not solved yet

This module loading is really just an experiment. We need to make this work with Next.js which we use in our wrapper application that renders page layouts.

We did not have to solve these areas yet:

  • whitelisting domains to download from
  • redownload script on change — if there is file already downloaded, it does not download it again
  • Make it work with Next.js (via Webpack plugin)

Next steps

In the next article, I will show how we solved the integration to Next.js via Webpack plugin. Let me know, what do you think about our idea and about importing modules from some URLs in general.

Would you do micro-frontends in a better way?

Michal Vyšinský

Written by

JavaScript developer. Game Development enthusiast.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade