Publishing a storybook as an npm package - npm

I have a component library which publishes via npm publish to a private registry, so consuming applications can install it via npm install mypackage#1.0.0 etc.
I have set up a storybook and would like to make the storybook static web app available on this private registry, without bloating the main package. I'd like users to be able to install either the main library itself or the storybook (not both). I'd also like each published version of the library to have a corresponding storybook i.e. npm install mypackage#1.0.0 gets you the main library and npm install mypackage-storybook#1.0.0 (or similar naming convention) gets you the corresponding storybook
How can I achieve this with npm publish?
PS I'm aware of hosted alternatives like https://www.chromatic.com/ but unable to use due to corporate constraints

Related

Does npm install have an equivalent to pip install --no-deps?

I'm more familiar with the Python ecosystem at this point and have a question about how I can do something with npm that I'm used to doing with pip.
Let's say I have a wheel for a particular Python package, as well as a wheel file for each of the Python package's dependencies. And let's say I have all these wheel files in a folder called /path/to/wheel/files. To install this package and all of its dependencies, I could run something like pip install /path/to/wheel/files/*.whl --no-deps, where --no-deps keeps me from having to install the various dependencies in the proper order.
Does npm have an equivalent to this? I'm using npm-offline-packager to create a tarball that contains a Node package (as its own tarball) and all of its dependencies (as their own tarballs). I know I can tell npm install to install a particular tarball. However, when I do this, it tries pulling in the required dependencies from the online NPM registry instead of pulling in the dependencies from the tarballs I already have.
Ideally, I'd like npm install to use the tarballs to add the main package to my project's package.json while adding the package's dependencies to my project's package-lock.json. And of course, I'd also like the main package and all its dependencies to be installed to my project's node_modules directory as well.
TL;DR Does npm have something equivalent to pip install /path/to/wheel/files/*.whl --no-deps?
I'm responding to my own question here, but note that my answer is only applicable to my particular use case and may not be applicable in general.
For my use case, I have access to two computers: one that has access to the internet and one that doesn't. For the machine that doesn't have access to the internet, I was attempting to use Verdaccio as a way of creating a self-hosted NPM registry. However, publishing packages to Verdaccio wasn't working because it kept trying to pull in the package's dependencies from the public NPM repository. The solution was to remove all references to "npmjs" in Verdaccio's config file (which, for me, Verdaccio created at ~/.config/verdaccio/config.yaml).
So, in case anyone needs to do development on a machine that doesn't have access to the internet, the process for setting up Verdaccio looks something like this:
On the machine that has access to the internet, create an NPM project using npm init (I called my project "verdaccio_runner"). The reason I did this is because, without already having an NPM registry on the machine that doesn't have access to the internet, it was hard doing a global install of Verdaccio.
Run npm install verdaccio to install Verdaccio to the NPM project that was created in the previous step.
Transfer this project over to the machine that doesn't have access to the internet.
Once it's transferred over, run Verdaccio from the project like this: npx verdaccio.
Quit out of Verdaccio.
Remove all references to "npmjs" from the config file that Verdaccio created (again, mine was at ~/.config/verdaccio/config.yaml).
Run Verdaccio again to pull in those changes.
Tell NPM where your private registry is: npm config set registry http://localhost:4873/.
Add yourself as a user by running npm adduser and by then filling out the information you're prompted for.
And the process for publishing packages to Verdaccio on a machine that doesn't have access to the internet looks like this:
For the package you want to install, on the machine that has access to the internet, run npo fetch <package name> --no-cache (assuming you've already done a global install of npm-offline-packager on the machine that has internet access).
Bring the tarball that npo created for you over to the machine that doesn't have internet access.
Untar the tarball.
From the directory that's created, run for file in ./*.tgz; do npm publish $file; done.
The published packages can now be npm installed to projects on the machine that doesn't have internet access.
Note: in order for Verdaccio to be accessible to other machines on the private network, I also had to add the following to Verdaccio's config file:
listen:
0.0.0.0:4873

Configure `.npmrc` to get one scoped package module from npm and the others from github packages

I'm using a scoped package in my application, some modules from it are stored on GitHub packages and the rest are in npm registry. Till now I was using only one module that is stored on GitHub, but now I need to install another one stored on npm.
Currently my .npmrc file looks like this:
registry=https://registry.npmjs.org/
#custompackage:registry=https://npm.pkg.github.com/
I want to inform npm to install specific scoped module from npm registry and keep installing others from GitHub packages. Updating .npmrc like this doesn't work (it continues looking the subpackage on GitHub):
registry=https://registry.npmjs.org/
#custompackage:registry=https://npm.pkg.github.com/
#custompackage/module1:registry=https://registry.npmjs.org/
Is it possible at all to configure .npmrc to get a part of scoped package modules from npm and the rest from GitHub pages?

Should we install a Package Locally or Globally with npm in React Native?

I am developing a React Native App, in which I have installed some Packages Locally and some Global and I can see Local and Global Packages via listing them with these Commands:
For Local Packages:
npm list
For Global Packages:
npm list -g
Right now, I am a bit Confused that whether I should install Packages Locally or Globally? What are the pros and cons of installing locally and globally? Also, which one is recommend?
The main difference is where the package is stored on the disk and re-usage.
Local packages are installed in your project directory (/node-modules) depending on your setup.
Global packages are stored somewhere in your user directory. (Varies per system)
Usually, modules used for building/generating files are usually installed globally, The rest are installed locally.
this might be a good read to learn the differences: https://nodejs.dev/learn/npm-global-or-local-packages

How to link a globally installed node package to a project with yarn?

I have just started using yarn and I can't figure out how to link a globally installed package to a project. With npm I would just run npm link <package-name> but it doesn't work with yarn.
when I run yarn link <package-name> it gives this error:
yarn link v1.22.4
error No registered package found called "express".
info Visit https://yarnpkg.com/en/docs/cli/link for documentation about this command.
The link functionality is not really meant for linking global packages to a project. It is meant to link a package that you are working on to another project that you are working on. The fact, that the npm link command can be used to link globally installed packages to the current project is just an implementation detail of npm. From the yarn docs:
For the vast majority of packages it is considered a bad practice to have global dependencies because they are implicit. It is much better to add all of your dependencies locally so that they are explicit and anyone else using your project gets the same set of dependencies.
So you should just add the dependencies via yarn add <package-name>.

Speeding up NPM package install

When I deploy my app to AWS, it's copied into a new directory, so NPM will install all the same packages, during each deploy, which can take a lot of time. Most of these packages haven't changed between builds (if at all), so having it do a full npm-install seems like a waste.
My app server runs a bunch of different Node apps, so installing globally isn't an option. Instead I'd like to have the app store it's node packages in a location that isn't wiped out during deployment, but have the option to update packages as necessary during npm install.
Does NPM have a concept of an app-specific module directory that isn't located in a subfolder of an app? That way I can delete the app folder, and not have to reinstall the same packages over and over again.
I could achieve this by using symlinks, or migrating the current node_module directory.
If you lock down your dependencies versions, NPM is likely to cache the packages. So the installation wouldn't take much longer.
If you prefer not to do this, you can install dependencies globally and link them with the npm link command (which is basically creating a symlink yourself!). Then, it'll be up to you update the globally installed packages regularly.