How to change bower's default components folder?

Question

I'm making a new project that uses bower from twitter. I created a component.json to maintain all my dependency like jquery. Then I run bower install that installs everything in a folder named components. But I need to install the components in a different folder, e.g. public/components.

I have tried editing my components.json into:

{
  "name": "test",
  "version": "1.0.0",
  "directory": "public/",
  "dependencies": {
    "jquery": "*"
  }
}

or:

{
  "name": "test",
  "version": "1.0.0",
  "componentsDirectory": "public/",
  "dependencies": {
    "jquery": "*"
  }
}

as shown in https://github.com/twitter/bower/pull/94 but it doesn't work.

score 931 · Accepted Answer · edited Mar 31 '15 at 22:31

931

Create a Bower configuration file .bowerrc in the project root (as opposed to your home directory) with the content:

{
  "directory" : "public/components"
}

Run bower install again.

edited Mar 31 '15 at 22:31

automatix

14,018
26
105
230

answered Dec 29 '12 at 10:00

Adam Ramadhan

22,712
28
84
124

4

I changelog I can only see `The value of the json property from .bowerrc is no longer used` and I guess everything is OK with `"directory"` property. Right? https://github.com/bower/bower/blob/master/CHANGELOG.md – Sergey Kishenin Jul 31 '13 at 03:30
1

Right. You just have to add it in `bower.json`. [Current specification of `bower.json` format](https://docs.google.com/document/d/1APq7oA9tNao1UYWyOm8dKqlRP2blVkROYLZ2fLIjtWc/edit#heading=h.9obwb54illsh) – vucalur Nov 03 '13 at 08:27
11

This doesn't work for me. Works in .bowerrc, but not bower.json. This seems like such a basic feature... – elliottregan Jan 27 '14 at 20:45
148

I am curious as to why this wouldn't be put in the bower.json file. Especially if it is a per project setting anyways. – Hayden Mar 02 '14 at 04:01
8

Based on the docs, it has to be in .bowerrc, not bower.json. Strange ... http://bower.io/#custom-install-directory – joemfb Mar 21 '14 at 15:29
Wasn't working for me until I realized I hadn't even created a bower.json file yet.. then it worked fine. – Ben Vitale May 12 '14 at 20:31
2

FYI, use `echo "" > .bowerrc` to create this file in Windows. http://stackoverflow.com/questions/20202202/how-do-i-name-the-bowerrc-file – Rich C Sep 18 '14 at 03:25
20

In Windows, to create a file that starts with ".", simply create the file with a trailing ".". In other words, just call it ".bowerrc." – PeteK68 Jan 04 '15 at 22:10
1

I'm packaging a web app that will require installing specific bower components into a specific path. I will need to include a `.bowerrc` file, because that is the only place where the **directory** config is honored. I will also need to include a `bower.json` because that is the only place where I can specify **dependencies**. Hence, both files are required when creating a package. That's a little silly. – Quinn Comendant Apr 14 '15 at 02:14
3

yeah its completely freaking ridiculous that it can't go in bower.json. The concept that you should dirty up your root directory for a *package manager* is maddening. Sigh. But I'm giving it a go anyways (despite this being like the 10th project I've used Bower on, I still am not really seeing a ton of benefit to using it). – dudewad Aug 07 '15 at 03:49
Is there a way to have a default directory, but then send a single dependency to another directory? Perhaps: "dependencies": { "special": { source: "http...git", directory: "./special-tools" } } – Cody Apr 08 '16 at 20:52
I think it needs a leading slash at the end (`public/components/`) – Peyman Mohamadpour Mar 04 '17 at 09:34

score 77 · Answer 2 · answered Feb 16 '14 at 23:19

77

In addition to editing .bowerrc to setup your default install path, you can also setup custom install paths for different file types.

There is a node package called bower-installer that provides a single command for managing alternate install paths.

run npm install -g bower-installer

Set up your bower.json

{
  "name" : "test",
  "version": "0.1",
  "dependencies" : {
    "jquery-ui" : "latest"
  },
  "install" : {
    "path" : {
      "css": "src/css",
      "js": "src/js"
    },
    "sources" : {
      "jquery-ui" : [
        "components/jquery-ui/ui/jquery-ui.custom.js",
        "components/jquery-ui/themes/start/jquery-ui.css"
      ]
    }
  }
}

Run the following command: bower-installer

This will install components/jquery-ui/themes/start/jquery-ui.css to ./src/css, etc

answered Feb 16 '14 at 23:19

random-forest-cat

33,652
11
120
99

4

This looks promising but the `bower_components` directory is still created and populated. :( – Ben Feb 27 '15 at 01:14
what version of bower? – random-forest-cat Feb 27 '15 at 03:12
appears to be the nature of the package. you could open an issue here http://github.com/blittle/bower-installer/issues/ or write a bash script to remove the directory post install. – random-forest-cat Mar 08 '15 at 20:07
1

I think there is no sense. I don't want package which still downloads full git repo and dependencies and then just copypastes specific files for me... I can press Ctrl+C myself. I hoped it will download only specific files for me. – Maksim Nesterenko Oct 15 '15 at 01:47
yeah I hear you. in this case I just a .bowerrc and point to public/bower or public/vendor to keep the project simple. – random-forest-cat Oct 15 '15 at 12:11
@Alendorff You can run `bower-installer --remove`. It will remove the `bower_components` directory after installation. – iNyar Mar 23 '17 at 05:07
Is it possible to user .bowerrc and bower-installer so that bower-installer will get the path of bower_components? – zygimantus Jun 29 '17 at 09:33

Tim Anishere · Answer 3 · 2016-02-07T13:54:46.603

64

I had the same issue on my windows 10. This is what fixed my problem

Delete bower_components in your root folder
Create a .bowerrc file in the root
In the file write this code {"directory" : "public/bower_components"}
Run a bower install

You should see bower_components folder in your public folder now

edited Feb 07 '16 at 13:54

answered Jan 23 '16 at 16:08

Tim Anishere

796
6
7

score 24 · Answer 4 · edited Jun 20 '20 at 09:12

24

Something worth mentioning...

As noted above by other contributors, using a .bowerrc file with the JSON

{ "directory": "some/path" }

is necessary -- HOWEVER, you may run into an issue on Windows while creating that file. If Windows gives you a message imploring you to add a "file name", simply use a text editor / IDE such as Notepad++.

Add the JSON to an unnamed file, save it as .bowerrc -- you're good to go!

Probably an easy assumption, but I hope this save others the unnecessary headache :)

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 19 '14 at 20:10

Cody

9,785
4
61
46

18

In Windows, to create a file that starts with ".", simply create the file with a trailing ".". In other words, just call it ".bowerrc." – PeteK68 Jan 04 '15 at 22:07
you can do it with git bash too, simply type: ```echo >> .bowerrc``` – Joe RR Jun 29 '16 at 13:50

score 7 · Answer 5 · answered Dec 29 '12 at 08:21

7

Try putting the components.json file in the public directory of your application, rather than the root directory, then re-run bower install ...try this in your app home directory:

cp components.json public
cd public
bower install

answered Dec 29 '12 at 08:21

hagope

5,523
7
38
52

1

yup that can be a way, is there a legit way to do it? but ill still count this as an answer. – Adam Ramadhan Dec 29 '12 at 08:31
2

you could write a bash script `bower.sh` to prepend the directory you want to install to, like `public-components.json' then it would generate the above commands.. – hagope Dec 29 '12 at 08:40
2

Both of those answers sound super hacky, definitely not desirable – Jay Jan 25 '16 at 17:35

score -3 · Answer 6 · answered Aug 17 '15 at 12:03

-3

Hi i am same problem and resolve this ways.

windows user and vs cant'create .bowerrc file.

in cmd go any folder

install any packages which is contains .bowerrc file forexample

bower install angular-local-storage

this plugin contains .bowerrc file. copy that and go to your project and paste this file.

and in visual studio - solution explorer - show all files and include project seen .bowerrc file

i resolve this ways :)

answered Aug 17 '15 at 12:03

Abdullah SARGIN

1,646
1
13
19

you can use `Cygwin` or `Cmder` terminal to create `.bowerrc` file. – Francis.TM Sep 30 '15 at 03:30
4

Just create the file with any name, then open up a PowerShell or Command Prompt and rename it. – TrueWill Dec 03 '15 at 16:27
You can create a dot file in windows by specifying the filename as '.name.' - still not many people know this after so many years of this being available :) – Alex Paven Jun 01 '18 at 13:50

How to change bower's default components folder?

6 Answers6

Something worth mentioning...

Linked