How can I register a local git package in bower?
My current component.json is as follows
{
"name": "myproject",
"version": "1.0.0",
"dependencies": {
"jquery": "1.8.0",
"twitter/bootstrap": "2.1.1"
}
}
However I also would like to add a package I have created at C:/mypackage which is a git repository with versions tagged.
When I do bower install --save C:/mypackage it properly adds it to project but it doesn't add it to my component.json.
I am trying bower register mypackage C:/mypackage but it keeps giving me
bower error Incorrect format
What am I doing wrong?
Option 1: Public Bower registration
Bower is built mostly to share public (client-side) code in a "non-opinionated" manner. The primary use case, then, is to have a publicly accessible repository (on GitHub) that is registerd with a name and git repository url. I just did this myself:
bower register linksoup git://github.com/automatonic/linksoup
This is just telling the bower server that when you install linksoup to go and grab the code at the git://github.com/automatonic/linksoup repository, and put it in the local project's component directory.
If this is what you want to do, then just set up a repository on github/etc., push your code there, and then register with the resulting repository info.
Option 2: Private dependency
There are many reasons not to post your code at a publicly accessible repository. It may not be open source, etc. if your mypackage code is not meant to be public, then you should probably not be registering it on the public bower server... Further, even if you could register a local directory, it would only work on your machine...which defeats the purpose of sharing the code via bower.
If you just want to have bower manage a local, private dependency, then I am going to riff off of blockhead's solution:
{
"name": "myproject",
"version": "1.0.0",
"dependencies": {
"jquery": "1.8.0",
"twitter/bootstrap": "2.1.1",
"mypackage": "file:///path/to/mypackage/.git"
}
}
This is just saying that myproject needs mypackage, and to use git clone to retrieve it. My guess is that this can use anything git can understand (including local repositories). But you should note that this may run into problems for anyone else working on this code that cannot access your local path.
Best Guess
It looks to me as if you may have assumed that bower register was a local operation (telling bower how to find a dependency via some sort of local registry). As far as I can tell, this is only a remote and public registration, which is why this is unsupported.
You may also be looking for a way to do something like a link operation with npm. That is, work on a dependency module without always having your dev cycle include a publish.
A little detail about how many people are involved and what you were trying to accomplish would facilitate a more targeted answer.
You can add any git repository as follows:
{
"name": "myproject",
"version": "1.0.0",
"dependencies": {
"jquery": "1.8.0",
"twitter/bootstrap": "2.1.1",
"myrepo":"git://myrepo.com/myrepo"
}
}
You can use bower link:
The link functionality allows developers to easily test their packages.
Linking is a two-step process.
Using bower link in a project folder will create a global link.
Then, in some other package, bower link <pkg> will create a link in the components folder
pointing to the previously created link.
This allows to easily test a package because changes will be reflected immediately.
Please note that bower will not fetch the linked package dependencies.
Bower will overwrite the link when installing/updating.
The big idea with bower is to easily share your projects' dependencies. So using local repo should be limited to testing.
Once you understand that, you should know that it is not –strictly– necessary to register your package in order to use it as a dependency.
This is due to the fact that bower depencency can specify either a version, a folder or a package. So you can use local repository.
Define as bower package
First you will need to define your dependency as a bower package:
# create the bower package
cd /path/to/you-need-me
bower init
# answer questions…
Add as project dependency
Then in your main project, the one that need the you-need-me dependency, edit bower.json file to add (or expand):
"dependencies": {
…
"you-need-me": "file:///path/to/you-need-me/.git/"
"you-need-me-windows": "C:/path/to/you-need-me-windows/.git/"
}
So you don't give a version, but an local git endpoint, i.e. the subdirectory .git/.
Install dependency
In the man project install bower dependencies with:
cd /path/to/main-project/
bower install
Failure
bower you-need-me#* ENOTFOUND Package /path/to/you-need-me/ not found
Check again your path and that you point to the .git/ directory of your dependency.
Success
You should get something like:
bower you-need-me#* not-cached file:///path/to/you-need-me/.git/#*
bower you-need-me#* resolve file:///path/to/you-need-me/.git/#*
bower you-need-me#* checkout master
bower you-need-me#* resolved file:///path/to/you-need-me/.git/#b18c753c6f
bower you-need-me#* install you-need-me#b18c753c6f
Write a blog entry about that: Testing bower.json locally before registering package.
Related
What i want is to have a library locally that when i change it those changes are reflected in the project that is using the library.
i have check out this library here in my local machine: https://github.com/manfredsteyer/angular-oauth2-oidc
So what i'm doing right now, is that i go to the library directory and then
npm link
And then get in my project directory and do
npm link angular-oauth2-oidc
The library folder appears inside my node_modules folder but i can't manage to use it, since when i start the app ng serve it says:
Cannot find module 'angular-oauth2-oidc'
I'm importing like this:
import { OAuthModule } from 'angular-oauth2-oidc';
I've tried to add the the path under the compilerOptions of the tsconfig.json file but haven't been sucessful.
Any ideas on what i'm missing here? I've tried several suggestions i've found on angular github issues but none solved my problem.
Thanks in advance
npm link in a package folder will create a symlink in the global folder {prefix}/lib/node_modules/ that links to the package where the npm link command was executed
Dont use npm link to add a library to your project, use npm install :
npm install angular-oauth2-oidc --save
You have to install it not just link it, so use this line to with flag --save to ensure that it will be saved in your package.json
npm install [package_name] --save
You can get the package name from the source website or from
https://www.npmjs.com/package/angular2
When you say:
So what i'm doing right now, is that i go to the library directory and
then npm link
Do you mean you are executing npm link in the folder you cloned the repository in? Because if so, that's likely your issue as that's the source directory and not what's actually published as a package. You must build the library, change directory into the distribution folder for the package, and then run npm link. Then when you run builds of that library, any Angular applications with that linked will automatically have the last version of your build in their node_modules.
Also, in your Angular applications where you are using the linked library you'll want to make sure you are setting preserveSymlinks to true in your angular.json.
While you can create multiple projects (e.g. an Angular app and an Angular library) under one Angular project to make this process a bit easier, I prefer to separating these two since I like one git repository to present one module.
First, you need to link your modules to your project's package.json file. Here's how to link files locally in general:
Local dependency in package.json
Linking a plain Typescript library is pretty straight forward as you just create an entry point (usually index.ts) file and export everything you want from there. This file needs to be in the same folder as the package.json file in your project.
An Angular library is a bit different as angular modules needs to be compiled before it can be properly exported. If you just import the module to your project without compiling you will get an error stating this: cannot read property 'ɵmod'. This happens at least at the time of writing this.
So we need to compile the library and then link it:
open two terminal windows
in the first terminal, go to your Angular library's root folder and run ng build --watch
check the output folder of the compiled module, usually something like dist/[library name]
change your Angular project's package.json to point to the output folder e.g. "my-angular-library": "file:../my-angular-library/dist/my-angular-library"
run npm install in the same folder
Add path to your Angular project's tsconfig.json e.g:
compilerOptions: {
"paths": {
"my-angular-library": ["./node_modules/my-angular-library"]
}
}
Otherwise you'll get errors like Error: Symbol MyComponent declared in /path/to/library/my.component.d.ts is not exported from my-angular-library
in the second terminal, go to your Angular project's root folder and run ng serve. Make sure you serve the project only after you have installed the local dependency.
You should now be able to use components, services etc. exported via your library module.
TL;DR
for the library ng build --watch
make the library dependency to point to the output folder e.g. "my-angular-library": "file:../my-angular-library/dist/my-angular-library"
npm i
Add path to your Angular project's tsconfig.json e.g:
compilerOptions: {
"paths": {
"my-angular-library": ["./node_modules/my-angular-library"]
}
}
ng serve
I am developing a library in tandem with a project. The project has the library as a dependency. Both are on my local machine and I have added the path to the lib's git file to the project's bower.json:
"devDependencies": {
"example": "/Users/me/Documents/path/to/example/.git"
}
This works fine, but every time I update the lib I have to:
Add and commit changed files in lib
Update the dependency in bower
How can I streamline this process? Is there a way to have the project always use the lib in its current state?
The URL you are currently using for the dependency is identified by Bower as a local git repository and so Bower uses the Git file system resolver. This means that your changes must be committed to the repository for Bower to resolve them (The resolver is checking out changes from the local repository).
You can change the URL to something in the form of: "example": "/Users/me/Documents/path/to/example/". You can use a path to a directory, file or an archive.
This will make Bower use the file system resolver instead which will simply copy the library files (according to the bower.json inside the folder).
Not sure if you can avoid the step of updating the dependency in Bower.
i want to include a custom file as one of the bower dependency.
I am have the following bower.json
{
"name": "xyz",
"version": "0.0.0",
"dependencies": {
"sass-bootstrap": "~2.3.0",
"requirejs": "~2.1.4",
"modernizr": "~2.6.2",
"jquery": "~1.9.1",
"beautify": "file:/path/to/beautify.js"
},
"devDependencies": {}
}
But when i do bower install
it gives error :
bower beautify#* ENOTFOUND Package file:/path/to/beautify.js not found
however when i open the same path in browser i get the right file.
I have also checked the case sensitive of the path.
Now can any one tell me what error i am doing? Is there any thing wrong with the syntax?
Also tell me what if i want to add the same via bower cache. Where the global bower cache is stored in mac? And how can we register the url of private package so that i just need to put name of the package in bower.json and bower finds the file from the cache?
The code below didn't work for me using Bower 1.2.8 on Ubuntu.
"beautify": "/path/to/beautify.js"
What did work was using: "beautify": "./path/to/beautify.js". This way the path is pointing to the file relative from the directory where bower.json resides.
It should be just /relative/path/to/beautify.js. No 'file:/'.
"beautify": "/path/to/beautify.js"
If you have bower installed you can do this from the commandline
bower install ../beautify.js -S
Assuming the local repo is a directory next to your current directory. This is just a testing approach and should be an available repo for general use
EDIT
It looks like you also need to tag your repo so you will pick up the latest changes too
git tag v0.0.2
I've started working with bower, and it seems really helpful. I come from a python background, and so I'm used to having virtualenv and requirements.txt.
Since I'd rather not store all my dependencies in source control if I can help it, I was wondering, how can I create a file like requirements.txt with bower?
After poking around a bit more, I have the solution.
bower uses a file called bower.json (formerly component.json) which is similar to a Gemfile or requirements.txt.
It can be created manually, and will look something like this...
{
"name": "<app name, defaults co current folder name>",
"version": "0.0.0",
"dependencies": {
"backbone": "~0.9.10",
"underscore": "~1.4.3"
}
}
However, the piece that I was missing was to include the --save flag when installing packages in bower:
bower install <package_name> --save
Unfortunately, I do not believe there is a way to set this behaviour by default using the .bowerrc file.
As an added tidbit, once you have a bower.json file, installing your dependencies is as simple as running bower install.
I love Bundler, it's great at dependency management. I love npm, installing node packages is easy! I have a nodejs app and would love to be able to specify my apps dependencies and easily install / update them wherever I deploy my app. This isn't a library I'm releasing, it's a full fledged web-app.
I'm aware of the npm bundle command, but that just seems to simply override the directory where packages are installed.
I'm used to using bundler in this fashion:
# Gemfile
gem "rails", "3.0.3"
Installs rails v3.0.3 and any other required gems on the host machine only if it doesn't already exist
> bundle install
How can I achieve something similar with npm?
As of npm 1.0 (which is now what you get by default if you follow the steps in the README file), "bundle" is no longer a segregated thing -- it's just "how it works".
So:
Put a package.json file in the root of your project
List your deps in that file
{ "name" : "my-project"
, "version" : "1.0.0"
, "dependencies" : { "express" : "1.0.0" } }
npm install Since you're calling this with no args, and not in global mode, it'll just install all your deps locally.
require("express") and be happy.
Edit: This only applies to npm versions < 1.0
It was quite difficult to figure this out, but NPM makes this possible.
You need three components
A subdirectory in your repository (i.e. deps/)
A package.json file in the above directory that lists dependencies
An index.js file in the above directory that requires your dependencies
Example
Imagine that express is your only dependency
deps/package.json
note: Increment the version # each time you modify the dependencies
{
"name": "myapp_dependencies",
"version": "0.0.1",
"engines": {
"node": "0.4.1"
},
"dependencies":{
"express": "2.0.0beta2"
}
}
deps/index.js
export.modules = {
express: require('express')
//add more
}
Now you should be able to install your dependencies using npm. You could even make this part of your deployment process
cd deps
npm install
Then within your app code you can get access to your specific version of express like this:
var express = require('myapp_dependencies').express;
You should read these two articles from Isaacs(author npm) blog. I think they are really good, and I believe tell you how to achieve your goal:
http://blog.izs.me/post/1675072029/10-cool-things-you-probably-didnt-realize-npm-could-do
http://foohack.com/2010/08/intro-to-npm/
I believe link #1(point #11) explains this:
11: Bundle all your dependencies into the package itself
When you use the
npm bundle command, npm will put all
your dependencies into the
node_modules folder in your package.
But it doesn’t stop there.
If you want to depend on something
that’s not on the registry, you can do
that. Just do this:
npm bundle install
http://github.com/whoever/whatever/tarball/master
This will install the contents of that
tarball into the bundle, and then you
can list it as a dependency, and it
won’t try to install it when your
package gets installed.
This also is handy if you have your
own fork of something, and would
prefer not to change the name.
In fact, you can run almost any npm
command at the bundle. To see what’s
inside, you can do npm bundle ls. To
remove something, do npm bundle rm
thing. And, of course, you can install
multiple versions and activate the one
you want.
As of Npm version 1.1.2 , there's a new command npm shrinkwrap which creates an npm-shrinkwrapped.json file, analogous to Gemfile.lock. It's important to make one, to prevent software rot (see Bundler's rationale). Particularly as Nodejs has such a fast moving community.
While bundle install creates a Gemfile.lock automatically, npm install won't create npm-shrinkwrapped.json (but will use it when it exists). Hence you need to remember to use npm shrinkwrap.
Read a full guide at http://blog.nodejs.org/2012/02/27/managing-node-js-dependencies-with-shrinkwrap/
It seems to me that the simplest solution is to use a package.json file with the private flag (added to npm just last month) set to true. That way, you can run npm install or npm bundle to grab your project's dependencies, but you prevent anyone from accidentally publishing your non-public project.
Here's an example package.json:
{
"name": "yourProject"
,"version": "1.0.0"
,"dependencies": { "express" : ">=2.1.0" }
,"private": true
}
Running npm install will install express on the local system if it doesn't already exist; running npm publish gives an error because of the "private": true.
You and your team can use the version tag internally to track dependency changes over time—each time you change a dependency, bump the version. To see which version you've installed, use npm ls installed.
Publish your app with npm as well, and list its dependencies in your package.json file.
When someone uses npm to install your package, npm will take care of resolving its dependencies.
Packages spec: http://wiki.commonjs.org/wiki/Packages/1.0