Develop Reference

Installing NPM Package from Github for SAPUI5 WebIde

I want to install an NPM package from Github so that it can be used in SAPUI5, WebIde Framework.
Package: https://github.com/commenthol/date-holidays/blob/master/README.md#usage
First Problem In order to import a Library there should be a File with the Library so it can be copy-pasted in WebIde in the backend.
Second Problem The Usage - Part: should this piece of Text be part of the Frontend?
Third Problem: Copyright https://github.com/commenthol/date-holidays/blob/master/LICENSE: Author states that it can be used, unless the copyright notice and permission notice appear in all copies. Now if you inspect a Page created by SAPUI5 /NodeJS, you will never ever see any commentaries that were done in the WEBIDE, is it necessary to state it in the Code as a commentary if nobody will see it?
Fourth Thing on the side: For Example: npm install express, will Install data into package.json, how do i make it install for example express Pack into example.json instead of package.json?

Here you go, the package is available on npm as
date-holidays
you can do npm i date-holidays
If you want to install package from github you install it by
npm i git+https://github.com/commenthol/date-holidays
After that
var Holidays = require(date-holidays);
var hd = new Holidays();
hd.getStates('US');
and so on, you can use the library as may like.

Customizing bower packages

I am using several open source js libraries in my project. I recently moved to use bower for all the front-end dependencies. I liked how I can just provide a github url instead of a proper package name.
I have customized few libraries. So to manage them using bower, I created a single private repository called myLibs in an organization account on Github.
I am creating branches for each customized library. For example, customized angular-bootstrap library will be in angular-bootstrap branch and customized angular-material library will be in angular-material branch.
Now I am creating tags for each release in each library. The naming convention that I am using is branch-name/x.y.z For example, I have angular-bootstrap/1.0.0 and angular-material/1.1.1 tags.
This was good till I had to install these libraries using bower. To install the custom libraries I called the following command (It's a dummy url, don't try it)
bower install --save-exact library-patch=https://github.com/test_org/myLibs.git#branch-name/1.0.0
The library gets installed and I can see it in bower_components too, but in my bower.json the dependency entry turns up like this -
"library-patch":"https://github.com/test_org/myLibs.git#undefined"
This is not what I wanted. I wanted to have the proper tag name to be saved. I don't want to manually make changes in the bower.json file every time I want to add a custom library.
My first thought was that the naming convention of the tags will be a problem. So I changed it to branch-name-x.y.z from branch-name/x.y.z which allowed me to have the exact version in the bower.json to install it properly, but when trying to install the libraries using the terminal, instead of using bower.json, I am getting the#undefined` tag in the end of the dependencies.
Here's the log I am getting while installing the library from terminal.
bower install --save-exact library-patch=https://github.com/test_org/myLibs.git#branch-name-1.0.0
bower not-cached https://github.com/test_org/myLibs.git#branch-name-1.0.0
bower resolve https://github.com/test_org/myLibs.git#branch-name-1.0.0
bower download https://github.com/test_org/myLibs/archive/branch-name-1.0.0.tar.gz
bower retry Download of https://github.com/test_org/myLibs/archive/branch-name-1.0.0.tar.gz failed with EHTTP, trying with git..
bower checkout library-patch#branch-name-1.0.0
bower resolved https://github.com/test_org/myLibs.git#branch-name-1.0.0
bower install library-patch#branch-name-1.0.0
library-patch#branch-name-1.0.0 bower_components/library-patch
└── angular#1.4.8
Why am I getting undefined in the release/tag name? Am I making any mistake while naming the tags? Is there any way I can install those custom libs from terminal and save the exact tag in bower.json?

The solution for the problem was to use --save instead of --save-exact. I have no explanation for the same right now, but I'll update the answer as soon as I can.
As far as I can tell, it's because the package was getting installed from github directly, instead of from bower registry.

Frictionless development of multiple SystemJS/JSPM packages

I'm working on a set of JavaScript projects and some of these have dependencies between them. I've chosen JSPM as my package manager - which is all fine. But during development I want to have the most efficient frictionless way of working with this.
What is the best way for me to be able to have a dependency from one project to another in a totally transparent way - when I work on it locally, I get to just jump between projects without having to do any packaging or installation of packages and at the same time package information with its dependencies being what is expected to be for release (public package) and builds on the CI??
With NPM I could be doing npm link- anything similar I can be doing??

You could use jspm link
Running jspm link in a module will publish it into the locally global "link" repository.
Running jspm install --link will then install a project from the "link" repository.
The only functional difference between npm link is that (for the moment at least) jspm link will need to be run every time your local code changes. This can be automated with a watch task (see jspm-cli#481).

Developing an npm package and a project that depends on it at the same time

The setup/workflow:
Project A relies on a custom npm package in package.json.
As engineers work on Project A, they will inevitably be making changes to the custom npm package as well. This is streamlined by having them clone down both the project and custom package repos, then applying npm link.
(source: http://justjs.com/posts/npm-link-developing-your-own-npm-modules-without-tears)
The question:
Assume a developer has now finished making changes to both Project A and the custom npm package. Here are the next steps:
He or she must submit a Pull Request for the custom package and wait for it to be code reviewed and merged.
He or she must now open Pull Request for Project A, containing a bumped version number on the custom package in package.json.
This feels clunky and prone to blocking our other developers.
Does anyone have suggestions for a better workflow when building a custom npm package and a project that depends on it at the same time?

What I do is use username/repo#branch as the version in package.json. This causes npm to pull directly from my fork on GitHub, bypassing the npm registry. I tend to only do this when I cannot wait for the maintainer to publish a release to the npm registry (not that often for me).
When the maintainer publishes a release to npm then I update the version number to the new release. Also, I would not include the version number in a pull request, I would always let the maintainer(s) decide how to bump the version.

So you have project A depending on package B. First, if B is under rapid development, it does not make much sense to make A dependent on B (by listing it in package.json and 'npm install'-ing it): it'll bring you more pain than gain. Instead of this, copy B directly into the A and use it directly (without using any npm machinery).
Only when B's API gets stable enough, publish it as a separate module and depend on it npm way.
But this is not all! To keep things reasonably separated and decoupled, you should use git submodules.
https://git-scm.com/book/en/v2/Git-Tools-Submodules
This great feature of git allows you to put one git repo inside another git repo. This way, both of your projects are reasonably well decoupled; also this makes the process of publishing B as a separate unit much easier.
I've tried both approaches ( a) npm with git branch dependency vs. b) git submodules, no npm) on two separate middle-sized projects and I enjoyed the submodules way much more :)

I think one possible solution is to be more generic with the versioning in Project A's package.json.
Instead of explicitly maintaining the version number of the custom npm module dependency, we can use asterisks in the semvar statements.
Eg:
"#org/custom-node-module": "0.1.2" - requires manually changing everytime the npm package is updated.
"#org/custom-node-module": "0.*.*" - running npm install will always grab the most recent non-breaking version.

Sharing code between AngularJS and Nodejs

What is the best way of sharing code between frontend and backend using javascript, specifically saying between nodejs and angularjs?
Thing is that we are using same enums and constant values such as error codes in both backend and frontend. Right now we just copy&paste each change to both platform which isn't a good solution. There are also some services that could be shared.
I have seen libraries such as browserify; but thats not exactly what I am looking for. I am looking for a solution similar to maven dependency in java. In java, libraries can be shared easily using maven, whereas I can't find a similar way of doing that in javascript.
Is there a way to isolate these services and give them as dependency to nodejs using npm and to angularjs using bower independently? Or what are the ways for sharing the same code between frontend and backend?

There are several ways to do this. The first is that you can make a new package which is required via bower for the front-end code and via npm for the backend code. I have several packages published to both systems.
Install with Bower -- information on how to install modules that aren't in the registry
NPM Install docs -- all the ways to install with npm (private github with auth: git+ssh://git#github.com/[org]/[repo])
Just create a new module with your shared data and install it using both package managers. Both of them allow you to install an unpublished module so if it's private data you can keep it as such.
If your front end requires require.js you can use something like amdefine to make it available to your node backend, or if you're just using legacy window code you can do something like:
var mydata = {};
if(typeof window !== 'undefined'){
window.mydata = mydata;
} else {
module.exports = mydata;
}
If you are sharing a lot of data though I highly recommend looking into browserify to write your entire codebase in commonjs and using browserify to generate your client bundle. There is a laundry list of resources about using browserify, including stuff on how to use browserify and angular together

Disclaimer - I'm still developing this approach and it's a little manual.
I did this using npm, an npm cli called pac, and bower. Pac let's me avoid using npm install in production by keeping the modules as .tgz files (committed to project in source control). With pac, when someone checks out the node project, they run pac install then npm rebuild instead of npm install.
My shared code is kept in a directory (my-module). It has both package.json and a bower.json.
My consuming node app has a package.json dependency for:
"my-module" : "x.y.z"
My consuming client has a bower.json dependency for:
"my-module" : "../relative/path/to/my-module"
When I make updates to my-module, I update my node app by:
Making a tar.gz of the contents of my-module:
tar -czvf my-module.tar.gz -C my-module
Removing the old version from the node app's node_modules
Rerunning npm install path/to/my-module-tar.gz
Rerunning pac (this makes a .tgz of node_modules/my-module)
Committing the updated pac .modules/my-module.tgz
I update my client by:
Removing the old client/bower_components/my-module
Rerunning bower install or bower update