Running the npm cli inside a browser?

[trusktr]

Literally googling for anything around this topic leads to results on how to run npm packages inside a browser (f.e. browserify, webpack, etc). The search is too ambiguous when compared to the massive amount of other similar searches for people wanting to run npm packages in a browser.

So I thought I'd ask here. I'm sure someone has tried!

Is there an example of running the npm cli itself in a browser?

I would like to get npm into a browser and run it against a fake filesystem. I'm sure I'm not the first person to think of trying this, and I'm sure someone has tried it already considering how giant the NPM ecosystem is.

The reason for doing this is it would be great for in-browser demos (input code into a text editor, see the result right in your browser, and the system would look at import statements to determine what to install).

I suppose another way to do it is by connecting to a server and having the server do all the setup, and sending a bundle (f.e.) back to the client. But having a server doesn't work with static deploys that don't have a server.

Think, for example, static documentation websites hosted on github.io: we'd want dynamic live demos, without a server, entirely static serving of the web app. Library authors could re-use this, so the system would need to not be aware of what packages a library's documentation would need, and it would fetch them. There could be an option to cache, of course, but first step would be to get it running.

[ljharb]

I don't see how a project that needs to make arbitrary network requests or modify the filesystem would make the slightest amount of sense in a browser, nor be remotely capable of working.

https://runkit.com is already linked from every npm package page, for quick demos, and codesandbox/jsfiddle/etc allow you to specify script URLs (which unpkg.com can provide for many packages).

Are those options not sufficient?

[petermetz]

@ljharb

Maybe too far off-topic, but here's how I got here: I have an API server that I want to be able to load web services as plugins (plugins = npm packages). So I pulled in npm as a dependency to that API server and it works perfectly (at app boot, I install the packages you configured as plugins and then require(...) them).

The problem comes with when I build the API server as a webpack bundle and try to minify it with terser, then it taps out with some C# code file not being processable. So I was wondering if that could be disappeared so that npm can be bundled by webpack and also minified by its terser plugin. :-)

For reference, here's the error the webpack build crashes with:

ERROR in ./node_modules/npm/node_modules/node-gyp/lib/Find-VisualStudio.cs 9:6
Module parse failed: Unexpected token (9:6)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| // This script needs to be compatible with PowerShell v2 to run on Windows 2008R2 and Windows 7.
| 
> using System;
| using System.Text;
| using System.Runtime.InteropServices;
 @ ./node_modules/npm/node_modules/node-gyp/lib/ sync ^\.\/.*$ ./Find-VisualStudio.cs
 @ ./node_modules/npm/node_modules/node-gyp/lib/node-gyp.js 41:13-36 190:36-53
 @ ./node_modules/npm/node_modules/node-gyp/bin/node-gyp.js 7:12-26
 @ ./node_modules/npm/node_modules/@npmcli/run-script/lib/make-spawn-args.js 5:28-71
 @ ./node_modules/npm/node_modules/@npmcli/run-script/lib/run-script-pkg.js 1:22-53
 @ ./node_modules/npm/node_modules/@npmcli/run-script/lib/run-script.js 2:21-51
 @ ./node_modules/npm/lib/publish.js 6:18-47
 @ ./node_modules/npm/lib/ sync ^\.\/.*\.js$ ./publish.js
 @ ./node_modules/npm/lib/npm.js 20:19-44
 @ ./src/main/typescript/api-server.ts 12:30-44
 @ ./src/main/typescript/public-api.ts 14:19-42
 @ ./src/main/typescript/index.ts 13:13-36

P.S.: I'm torturing myself with this because the API server should be very light-weight when it comes to deployment so that's why I'm bundling the API server even though it's a back-end only codebase (things like cloud functions/lambda has size limitations so that's one concrete example).

[ljharb]

Bundling is for the browser; trying to bundle for a node environment brings in a lot of complexity. In particular, you'd have to manually configure all the modules that need to remain "external", and that would include anything that needs to touch the filesystem. That's not something that's really possible for npm to handle at the scale of the entire registry.

Running npm prune --production and making an archive of your entire project, and deploying that, should be sufficiently lightweight.

[petermetz]

Bundling is for the browser;

That's what I'm hoping will change in the future. :-)

Thanks for the tip with npm prune, good to know npm itself now ships with a feature like this!

[ljharb]

I’m not aware of a time when npm lacked the feature.

[petermetz]

Ohh, I just never knew about that feature then I guess. My bad but thank you either way!

[MylesBorins]

At this time i don't think it would make sense for the CLI team to prioritize work to get the npm CLI to work in the browser.

One option if you want to do demos using codespaces to get a fully functional VM using the browser as an interface.

Alternatively products like jspm.dev and https://unpkg.com/ offer a CDN entry point to npm packages that can allow for using packages without requiring an install.

[petermetz]

@MylesBorins Do you know by any chance when codespaces is coming out of private beta?

[MylesBorins]

@petermetz this isn't the appropriate repo to ask about general GitHub questions.

You can track the GA of codespaces on the GitHub public roadmap

github/roadmap#55

[naruaway]

I created an npm package to run npm CLI in browser https://github.com/naruaway/npm-in-browser

So, It works! This is because https://registry.npmjs.org allows CORS (with some caveats)