What is the proper way to serve frontend dependencies managed by Yarn? - bower

With bower, we were able to specify the dependency folder location through .bowerrc, but there doesn't seem to be a way to do this with Yarn. Yarn appears to force the node_modules folder to be at the same level as package.json.
Say I keep my web application's static files in app/resources/static/. I'd like to serve some frontend assets out of here; which are managed by Yarn. I see two ways of doing this, but don't like either one:
1: Init the Yarn package in app/resources/static/. This works, but it also means that package.json will also be visible. No beuno.
2: Init Yarn package in app/, and symlink app/node_modules to app/resources/static. This works, but I'd rather not have this extra step for version control reasons.
What's the best way of doing this? Thanks in advance.
UPDATE: Found a near-solution in this thread: How to change Yarn default packages directory?
You can add --install.modules-folder "./resources" to a .yarnrc file
This works on yarn install, but yarn add packagename will still write the dependency to ./node_modules.

Related

How to build a new matching node environment using just a package-lock.json (no package.json) in docker

I'm not writing a node module or publishing, just wanting to use https://github.com/dataverity/chromehtml2pdf which is just a wrapper around google chrome puppeteer.
I have a working docker container which produced the package-lock.json and now I want to build another using the same versions of all the node tree. I am using npm 6.9.0.
If I try to use npm ci it complains about not having a package.json file. I create one with just a name and version, and it tells me 0 packages added.
I try using npm install and it replaces my package-lock.json with one just referring to my package.
Running npm init --y also seems to ignore the lock file despite some SO comments suggesting it should use the lock file to construct the tree.
How can I use the package-lock.json file to construct a matching node environment in docker?
UPDATE:
what a mess: see https://github.com/zkat/cipm/issues/61 and
https://github.com/npm/npm/issues/17979
it would seem that this area is a minefield. I see references to a separate barely-documented tool called cipm, but this may have been partially absorbed into npm ci but this is woefully documented.
Tried installing and running with a bare package.json but got error which is presumably from cipm as it's not in the package-lock.json file: Cannot find module 'validate-npm-package-name'

Webpacker creates huge node_modules

I created a new project with Rails 5.1 and I want to use webpacker to manage my react dependencies. The problem is after installing webpacker it creates a huge 130Mb+ dir node_modules with every possible node_package. This does not make sense as default behavior. How can I configure Webpacker to only keep the packages I'm actually using. I have searched for this issue in every way I could and I did not see any answers that made sense
Install what you need via yarn add, they will be listed in your package.json. Once you run assets:precompile (which will also run webpacker:compile) or just webpacker:compile, the public folder will be populated the compiled assets you are going to need to run the app.
Like Tamer says, node_modules should be in your .gitignore file. In dev, you will see all the node modules due to existing dependencies but that doesn't mean they are going to be used.
In summary, don't worry and rely on yarn.

how to Include&bundle css file from bower components

I am adding to my jhipster project a new dependency "tether-shepherd", and below was my steps:
bower install tether-shepherd --save
the dependency was successfully installed & added to 'bower.json', then to add it to 'index.html' I ran below command
gulp inject
the js files was successfully added to index.html but without any .css theme files, when I dig into installed bower components for installed dependency I found all themes there in 'bower_components/tether-shepherd/dist/css/' directory but not included to index.html file, to add it I manually placed its include below loading-bar.css in section but it is automatically removed when I re-run gulp inject!, and when I add it manually outside any block this was not good for production profile
any professional way to include and bundle css files located in bower_components?
This is probably because these CSS are not referenced in the main property of your dependencie's bower.json like here, see gulp/inject.js in your project to understand how they are used.
So, either you add an overrides.main property for these dependencies in your JHipster app's bower.json to add them like JHipster does for Bootstrap or you manage them manually and copy them to src/main/webapp/content/css, (you may have to add #import to your main.css I didn't test).

Is Bower only about automatically installing dependencies?

Does Bower actually do anything else than resolve dependecies? I'm trying hard to understand how it is meant to be used, but I guess I'm missing some points...
Say, I have Bower package A, which depends on Bower package B. In my application I'm just interested in package A, since that's what I'm going to use. Of course, that means that somehow both packages must be loaded into the Browser, so that package A can work.
Using Bower I can just do bower install a and will then find both packages A & B in my bower_components. So far, awesome.
But now? Am I forced to find out myself (manually) which files from A and B need to be loaded in my HTML page? I don't think that the full bower_components directly shall be accessible via web, so I have to configure myself manually my Grunt (or whatever) build-file to copy the relevant files?
What am I missing here? If what I wrote above is true, what's the point using Bower when I still need to be aware of all implicit dependencies?
Bower manages dependencies, and it will add the correct files into your HTML if you use it with the --save (or -S) flag. You would need appPath set in your bower.json if your index.html isn't in the same directory.
$ bower help install
Usage:
bower install [<options>]
bower install <endpoint> [<endpoint> ..] [<options>]
Options:
-F, --force-latest Force latest version on conflict
-h, --help Show this help message
-p, --production Do not install project devDependencies
-S, --save Save installed packages into the project's bower.json dependencies
-D, --save-dev Save installed packages into the project's bower.json devDependencies
Additionally all global options listed in 'bower help' are available
Description:
Installs the project dependencies or a specific set of endpoints.
Endpoints can have multiple forms:
- <source>
- <source>#<target>
- <name>=<source>#<target>
Where:
- <source> is a package URL, physical location or registry name
- <target> is a valid range, commit, branch, etc.
- <name> is the name it should have locally.
```
You're actually not missing anything. Bower doesn't deal with loading your dependencies, just installing them. Loading them is something you have to do on your own. Also, there are a lot various ways in which people load there dependencies; the most common probably being Require.JS, Browserify (have too few credits to post links) and plain script includes in an index.html page. So, basically you have a few options here
You can just deal with load registrations manually. This would mean adding <script src="..."></script> tags to your index.html page, or adding registrations for dependencies and similar to your app.js if you're using Require.JS. Note that this step would mean that you'd manually have to look at each dependency, read documentation or bower.json files to figure out transitive dependencies and file paths.
If you're using plain script includes, you can use Wiredep to have that done automatically for you through Wiredep's inspection of the bower.json files of dependencies.
If you're using RequireJS (or similar) you can look at Yeoman's grunt-require-js to do this automatically for you.
Note that both 2 and 3 relies on library authors provide the correct output files. You might e.g. have to declare overrides or explicitly declare if you want minified or non-minified versions.
As for publicly allowing access to "bower_components", I find that this is the most common approach. What things there would you like to prevent access to?
I'm a recent bower user myself. And as far as I know the short answer is: YES, bower is meant to download dependencies, however, apart from being able to configure the bower_components directory to anything you like, the idea is that bower installed components won't be edited by you at all, if you want to include them manually, you type
bower list --paths
and this will list all the files you need to include from the dependencies (in relative urls).
You can also use bower-installer (npm install -g bower-installer) which allows you to copy the files you need to any path you like. With a fine grained controll, or choose the minified versions, for example.
Here's an example output.
C:\Users\german\test>bower install bootstrap
bower bootstrap#* not-cached git://github.com/twbs/bootstrap.git#*
bower bootstrap#* resolve git://github.com/twbs/bootstrap.git#*
bower bootstrap#* download https://github.com/twbs/bootstrap/archive/v3.3.4.tar.gz
bower bootstrap#* extract archive.tar.gz
bower bootstrap#* resolved git://github.com/twbs/bootstrap.git#3.3.4
bower jquery#>= 1.9.1 not-cached git://github.com/jquery/jquery.git#>= 1.9.1
bower jquery#>= 1.9.1 resolve git://github.com/jquery/jquery.git#>= 1.9.1
bower jquery#>= 1.9.1 download https://github.com/jquery/jquery/archive/2.1.4.tar.gz
bower jquery#>= 1.9.1 extract archive.tar.gz
bower jquery#>= 1.9.1 resolved git://github.com/jquery/jquery.git#2.1.4
bower bootstrap#~3.3.4 install bootstrap#3.3.4
bower jquery#>= 1.9.1 install jquery#2.1.4
bootstrap#3.3.4 bower_components\bootstrap
└── jquery#2.1.4
jquery#2.1.4 bower_components\jquery
C:\Users\german\test>bower list --paths
jquery: 'bower_components/jquery/dist/jquery.js',
bootstrap: [
'bower_components/bootstrap/less/bootstrap.less',
'bower_components/bootstrap/dist/css/bootstrap.css',
'bower_components/bootstrap/dist/js/bootstrap.js',
'bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot',
'bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.svg',
'bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf',
'bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff',
'bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2'
]
after
bower list --paths
bootstrap[] shows all the files I need to include according to bower_components/bootstrap/bower.json
main:[]
part
Hope this helps! cheers.

Yeoman install component fails

When I execute yeoman install git://github.com/paperjs/paper.js.git, it fails. This is the output:
Running "bower:install:git://github.com/paperjs/paper.js.git" (bower)
task bower cloning git://github.com/paperjs/paper.js.git bower caching
git://github.com/paperjs/paper.js.git bower fetching paper.js bower
checking out paper.js#39f744de0c117e678b7c663dbf489c55def6f415 bower
copying
/Users/my-username/.bower/paper.js/58f9c1c5f33cae79df922c8fde57158c
GET https://bower.herokuapp.com/packages/canvas <FATAL> canvas not
found </FATAL>
Seems like it is looking for a 'canvas'-module which doesn't exists. Any ideas on how to resolve this?
It probably has to do with 'cavas' being defined as a dependency in package.json, but the package.json file is meant for NPM.
It probably has to do with 'cavas' being defined as a dependency in package.json, but the package.json file is meant for NPM.
That's correct. It's an invalid component since it's missing a component.json file, which is required if a component has dependencies. You can ask the author of Paper.js to add a component.json file, or fork the repo and add it yourself.
In addition their git tags, which yeoman install (Bower) uses, are invalid semver (v0.22 while the valid notation is 0.2.2). This will cause it to not work.

Resources