noNPM - node packages for micro frontends
Tags: atlashackathon22, microfrontend, npm
Published: 2022-12-07 19:47:14

## What I built
I build noNPM (**n**ot **o**nly NPM) a node package server that serves the content of any package. It's like unpkg.com, but tries to avoid the issues around it. 

Unlike unpkg.com, the packages need to opt-in by adding a `serve` property. Additional noNPM can be used in a local environment by running `npx @no-npm/cli` and serve all packages.
For demo purposes, also the cloud offering at noNPM.io serving currently all packages. Try for example:

[https://noNPM.io/react](https://noNPM.io/react) 

 > You can replace `react` with any npm package

Go to [https://noNPM.io](https://noNPM.io) and you can search for all already used packages. You might notice that the base URL redirects you to `https://nonpm.io/@no-npm/web/<<version>>/dist/web/`. That works, because I simply serve the web interface also directly from [npm](https://www.npmjs.com/package/@no-npm/web). You can change the version number of the package to see older versions. For example, to see the first (not working) iteration of the web interface open [https://nonpm.io/@no-npm/web@0.1.0](http://nonpm.io/@no-npm/web@0.1.0).

This exactly is the reason why I build noNPM. It should allow to serve immutable web applications for a [micro frontend architecture](https://martinfowler.com/articles/micro-frontends.html), so that teams can work better together on different features that get combined into one application without breaking them. With noNPM you can rely on the fact that **every package is versioned**, you can **resolve packages via tags or versions** and every **version does not change**. This allows to avoid running in a *"version-hell"* when using a micro frontend architecture.

### Category Submission:
Search No More: As npm host more then 2 million packages, we needed a fast search. We leverage MongoDB to store the package meta information and search for them.

### App Link
[noNPM.io](http://nonpm.io)

### Screenshots

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91yee9jm8gqiu7pr0t22.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n2tems6h5vzz5ds6q8tq.png)

### Description
While NPM is great, with upcoming micro frontends trend, NPM does not serve the necessary of remote modules. While one could argue, that anyone could serve simply static files, the ability of NPM to manage versions, tagging and disallow reusing versions is exactly what is needed to run a micro frontend architecture. The following examples all resolve different versions of the `@no-npm/example` package:

```js
import { remoteHello } from 'https://nonpm.io/@no-npm/example@1.0.1';
import { remoteHello } from 'https://nonpm.io/@no-npm/example@^1.0.1';
import { remoteHello } from 'https://nonpm.io/@no-npm/example@~1.0.1';
import { remoteHello } from 'https://nonpm.io/@no-npm/example@latest';
import { remoteHello } from 'https://nonpm.io/@no-npm/example@beta';
``` 
 

### Link to Source Code
[https://github.com/janhommes/noNPM](https://github.com/janhommes/noNPM)

### Permissive License
MIT

## Background
I work currently on a micro frontend architecture and was wondering if we could leverage NPM to simply reuse the versioning and tagging possibilities. 


### How I built it
The REST interface is build with nestjs and hosted on Google Kubernetes Engine. On first request to a package which is unknown to the platform it will be extracted to a file storage. The metadata of a package is stored into MongoDB. Atlas search is used to find the package in the web interface.

The web-interface is build in Angular. It is uploaded to [npm](https://npmjs.com/@no-npm/web) and as the REST interface can serve npm packages it also can serve this package. It queries the REST interface `browse/search` endpoint for showing the search-results in an auto-complete.

A CLI exist to use the same ability locally. If used locally, noNPM uses a simple JSON file to store the meta information of the packages.


### Additional Resources/Info
- [More information about microfrontends](https://martinfowler.com/articles/micro-frontends.html)
- [unpkg.com inspired this project](https://unpkg.com)