Experimenting with Bower and Flask

This is another of those “just in case you’re Googling for it” posts…

Background:

  • Flask is a nice lightweight Python web framework – a handy way to create small web apps when you don’t need the power of something like Django.
  • Bower is a package manager for web components – a really easy way to get the latest versions of jQuery, bootstrap and anything else you might want.

Bower will put the packages into a folder called bower_components, with the idea that your deployment process will use something like Grunt to move the static bits from there into their final location. This is all well and good, but it seems like overkill if you’re just experimenting on your own machine.

Wouldn’t it be nice if Bower could just put the packages somewhere that they could be served directly as static files by Flask?

Well, it turns out that it can. If you create a file in the top level of your app called .bowerrc containing the following:

{
   "directory" : "static/bower_components"
}

then Bower will put its components in a subdirectory of the static folder and Flask then knows how to serve them up. You might do:

bower install jquery
bower install bootstrap

and then in your HTML you could use something like the following:

<link rel="stylesheet"
    href="/static/bower_components/bootstrap/dist/css/bootstrap.min.css" />

and for the Javascript:

<script src="/static/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/static/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

You could leave out the bower_components bit at each stage and make your URLs even tidier, but I felt it was still useful to separate those bits that were being managed by Bower from those that weren’t.

Hope that helps someone!

Enjoyed this post? Why not sign up to receive Status-Q in your inbox?

3 Comments

What happened to versioning via Git for each project? ๐Ÿ™‚

Ah, well, I wouldn’t normally check in the Bower components, in fact I include static/bower_components in my .gitignore ๐Ÿ™‚

But if, after doing the above, you run bower init, it creates a bower.json file which details the packages you’ve installed. You can be as specific as you want with the versions. Check that into git, and then in future, you can just do bower install and it will go and get the requisite versions and their dependencies.

It’s basically the equivalent of using pip, virtualenv and requirements.txt in Python.

Of course, you could include all of these dependencies as git submodules, and then symlink to the appropriate files from the static directory… assuming the distributable files you need are part of the git archive and not built from something else…

Q

Thanks, this is exactly what I was looking for since I’ve started using bower in my project!

Got Something To Say:

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

*

© Copyright Quentin Stafford-Fraser