Are you supposed to link to bower_components in production?

Question

I'm relatively new to using Bower and I can't tell if you're supposed to link to bower_components in production. Should I be using a grunt task to link or copy over the files I need from bower_components into a separate directory?

I'm asking this because I've never seen a website that has a directory called "bower_components," so I'm a bit scared to. All the beginner guides just link to 'bower_components/...', like the angular tutorial.

score 25 · Accepted Answer · answered Apr 29 '14 at 22:55

25

are you using Yeoman?

Depending on your Gruntfile.js you should have different tasks, one of these is 'bower-install': this task will read you index.html, find the following comment block

<!-- bower:js -->
<!-- endbower -->

and inject inside it all your dependencies specified in your bower.json. This means that the task will write for your all the <script src"/bower_components/.."> blocks.

You never noticed a website with "bower_components" references because your /app dir is your 'development' environment, your source project. From the source you will create the production application running the "build" task: this task is composed by different subtasks that makes different jobs, one of these is concatenating all scripts added by bower_install task in one single js file.

Then there is another task that will minify this file, another that will run tests, another that will create a "dist" directory where your production site resides and so on...

If you use Yeoman you have all these tasks already configured in the Gruntfile.js, just open it and try to understand what every task does.

At first glance it can be quite difficult to understand, for example the build task refers to 14 or 15 subtasks, I suggest you to register custom tasks that run only one task and see what happens.

Cheers

answered Apr 29 '14 at 22:55

Sergio Rinaudo

2,303
15
20

Awesome answer - thanks Sergio. I've also noticed [from the yeoman github comment thread](https://github.com/yeoman/generator-angular/issues/310) that /bower_components is indeed included in /dist , but I'm not sure I understand the logic if **everything** is eventually minified as you describe. Thoughts? – Chazbot May 08 '14 at 06:19
1

@Chazbot, actually you are right. I have ran grunt 'build' task on a project of mine and discovered that the compiled index.html is using bower components instead of the built vendor.js file. You can edit your compiled html by hand removing the bower_component script blocks and add the vendor.js, but I am looking for an automated solution. – Sergio Rinaudo May 08 '14 at 18:46
@SergioRinaudo What about images and fonts? The references to them exists only inside CSS resources, how do you handle it? I mean, without copy all bower_components to dist. – bruha Jun 09 '15 at 14:11
@bruha I don't know if this is a best practice or not but yes, I copy all the necessary resources using a copy task. – Sergio Rinaudo Jun 11 '15 at 12:03
Yoeman is a great tool but if you already started with a template outside of Yoeman how is this supposed to be helpful? Yes, there is a grunt task that will automatically add your dependencies to your HTML files but this is different than only having the required files needed for an app to save on space. Can you give us an example of a build file and what this would look like? – Coded Container Dec 22 '15 at 14:56

score 12 · Answer 2 · edited Jan 08 '16 at 21:33

12

You can give your bower installation directory a better name by creating a .bowerrc file (next to your bower.json file) and setting the directory property to something else. For instance, I have the following in my .bowerrc:

{
  "directory": "public/vendor"
}

Then there's also the closely related question of whether or not you should be checking in the contents of this directory to source control. For a much more in depth discussion of that question, see here.

And lastly, as others have already mentioned, it's recommended that you concatenate and minify your front-end dependencies.

edited Jan 08 '16 at 21:33

stites

4,903
5
32
43

answered Apr 29 '14 at 23:29

Lukas S.

5,698
5
35
50

This is a great idea however, Bower can sometimes bring over files that are unnecessary and just eat up space on the server. – Coded Container Nov 25 '15 at 01:34

score 5 · Answer 3 · answered Apr 29 '14 at 22:41

I don't see any problem with linking to it directly, but usually you will want to concatenate all of your scripts into one file and uglify it so the file size is reduced for production.

The grunt uglify task can handle both of these things for you quite easily. You just have to supply an array of files to join.

// Project configuration.
grunt.initConfig({
  uglify: {
    my_target: {
      files: {
        'dest/output.min.js': ['src/input1.js', 'src/input2.js']
      }
    }
  }
});

This is a great idea with JavaScript files, but if CSS is referencing images then things can get a little messy with link locations. — Coded Container, Nov 25 '15 at 01:35

score 3 · Answer 4 · answered May 15 '14 at 13:32

It's pretty common to start off by just using bower_components. You can see this in the angular-seed starter project's script references. Once you get to deploying a production application and load time and performance become critical, you should look at converting over to solution to merge and minify dependencies.

Are you supposed to link to bower_components in production?

4 Answers4

Linked