What I built
I build noNPM (not only 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:
You can replace
reactwith any npm package
Go to 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. 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.
This exactly is the reason why I build noNPM. It should allow to serve immutable web applications for a micro frontend architecture, 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
Screenshots
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:
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
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 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.
Top comments (0)