How to use one package manager for backend and frontend? (Yarn/NPM)

Question

Previously I would use NPM for server side stuff and Bower for frontend. NPM would install to the node_modules/ directory and I had a .bowerrc to install those packages to public/lib.

Now I've begun to use Yarn instead of NPM; and since they are pretty much 1:1 compatible it has been a smooth change.. However, now I'm wondering if I can ditch Bower and just use Yarn for everything. But I do not see a way (in either NPM or Yarn) to install normal packages to node_modules, but then have a sort of separate option to put some packages in public/... Something similar to the --dev option but instead it would be yarn add jquery --public. Does anything like this exist?

One option, of course, would be to install all packages to the public/ directory but I believe this is a bad practice (correct me if I'm wrong).

Another option might be to have a separate package.json in the public/ folder and run separate Yarn commands in there for frontend packages, but it's just a bit less convenient, I think; more error prone.

Answer 1

The norm pretty much is something like:

1. Install packages via yarn
2. Use a task runner such as gulp, or module loader & bundler such as webpack to create the bundles you need.
   • This all depends on your stack, there are obviously others, for example in the past I've used .NET's native bundling, which you can achieve the same as gulp/webpack... again this is for you to decide.

The gist of it is, install all the modules in a central place (using a package manager), then have a loader or other process grab and move the required assets to the location that you need to use them.

I'd suggest having a look at a kickstart project (pertaining to the stack that you're using) eg: I've used : Fountainjs in the past with success, or look into Yeoman if fountain doesnt strike your fancy (fyi. Fountain is built on top of Yeoman)

In pseudo commands:

1. yarn install     /// installs all assets
2. gulp build       /// cleans out current public folder, bundles & copies new
3. gulp serve       /// runs your app