Python for Entrepreneurs Transcripts
Chapter: Build web apps with Pyramid: Part 1
Lecture: Installing with bower
Login or
purchase this course
to watch this video and the rest of the course contents.
0:01
In order to use Bower, you have to install it. And the way you get it installed is with npm, so you just "npm install -g" for global,
0:10
rather than local one, "bower". So here you can see it says it requires node, npm and git. I've already installed bower, so I don't need to do that
0:22
but you should follow these directions using node and npm, once you get them set up, we are going to work with installing our dependencies.
0:29
so over here, we have our web application, and you can see our code, this is our top level for a website, here is the egg-info from "setup.py develop"
0:41
and here is the actual logic of our application, and the static folder is where we would like to put things like JavaScript, CSS, images and so on,
0:51
so that seems like the right place for Bower to manage its dependencies which largely consists of those things.
0:57
So let's go over here, we can see that I am actually in that folder, in the static folder
1:02
and let's say "bower list", see if anything is here, nope, there is nothing here, and notice, there is no bower components folder here,
1:11
so you know there is actually nothing going on with bower. One of the things we want to replace, we saw the dependency on Bootstrap,
1:17
and we would like to replace that so why don't we install that? Your first inclination would be to do this:
1:24
And it's fine, you can totally "bower install bootstrap", but you are going to get all of the assets
1:29
and things, basically clone the entire bootstrap repo in GitHub, so you have all the building blocks,
1:36
not just the stuff you want to ship for your after work, so there is a shorter version you can use, so if you say "-css",
1:43
it just brings kind of non-intuitive, it brings a CSS, JavaScript and fonts but basically the distribution folder for bootstrap.
1:52
So I've already installed this, it doesn't need to download it,
1:54
you can see it's taking this straight from GitHub, it's validated it and it's installed it.
1:59
Now if we go back here, you can see we have bower_components, bootstrap-css,
2:03
little bower project file we've got the CSS that we need, minified, non-minified,
2:07
we've got the fonts and we've got the JavaScript, again minified and non-minified. What's so different about this?
2:14
Well, one we have it offline, we could have just gone and downloaded bootstrap and dropped it in here, unzipped it,
2:19
but then we couldn't upgrade it, we couldn't manage it, so for example I can come over here and say "bower update",
2:26
and if there was a new version of bootstrap, it would have actually upgraded it for us, so that's really cool.
2:32
You know, do that for all of our dependencies, We probably want jQuery, so let's go and install that, move this over so you can see them coming in,
2:41
so we have bower, we have jQuery, we saw Respond.js we also saw HTML5 Shiv let's put those in, so now we have those as well.
2:53
Another one that I think is great is Font Awesome. Font Awesome is really good for little widgets and icons in your site,
3:01
that are not actually images but are fonts so you can color them and resize them perfectly, so let's put that in there as well. Beautiful.
3:10
Now, all of our components are set up here, so Font Awesome for example, there are our fonts.
3:16
And the last thing to do is go to our template and start using these instead of the ones that are coming off the CDN.
3:23
Notice over here how this refreshed, let's go and find our bootstrap.css here copy the path, and let's update this.
3:35
Now you don't want the whole path of course, you just want from static down, because this is sort of the folder
3:41
containing our app, this down is our app, so let's just go back here and cut this off, like so, so now we have our Bootstrap.
3:49
Now, there is one little detail about this possibly getting cached and if we update it,
3:55
that could be a problem, it rarely is for Bootstrap, it much more likely is for our site. Let's do the same for HTML5 Shiv and Respond.js.
4:06
Great, so that should take care of things for the CSS and now we just have to do the JavaScript.
4:13
I have no intention of debugging these, so let's just keep using the min versions. All right, let's run the site, it better still look the same.
4:21
Oh, how interesting, this is worth pointing out, so when you create one of these projects in PyCharm,
4:26
notice there is two blue_yellow_apps running here, this one has little green dot that means it's still running,
4:32
this is one I tried to run, it crashed so it exited sadly with code 1, that makes it sad,
4:37
so what happened? Well, these web apps of course they listen on a port but you can only have one app or process bound to that port,
4:45
well, how do we solve that? We just go to PyCharm and say "PyCharm don't do that", say I would like a single instance only
4:52
so that way when you say "I want to run or rerun this app", it will shut down the old one, meaning there should be no problem running it.
4:59
Here notice I wasn't using my virtual environment, so let's set that back as well. Notice how it asks: "Do you want to rerun this?"
5:07
Just say "never ever show me that again", and it will automatically rerun it for us every time.
5:13
Wonderful, so it's up and running on localhost, let's have a look, see everything is still working.
5:19
Well that sure looks like Bootstrap, let's have a quick look; so here you can see our Bootstrap, if I click on this, great, we have Twitter Bootstrap.
5:29
And what else were we looking for? Response.js but of course, these are only brought in for IE8, I really hope no one is using IE8,
5:37
all right, let's check this out one more time, jQuery, OK, good, jQuery is good, and the bootstrap.js, perfect,
5:43
so it looks like we've successfully moved to Bower, managing our various dependencies, bootstrap distribution,
5:52
Font Awesome, HTML5 Shiv and Respond for old school IE support, and jQuery. Finally, if you ever wonder "well, what is installed here
6:01
what versions and so on", you can easily ask Bower. Say "list" and it will tell you if there is an upgrade or anything like that,
6:08
for our purposes we can ignore extraneous, this thing sort of manages this as if we are building a Bower package ourselves
6:16
and then these are the dependencies and then what it's saying is "you are not using this in your current package", no no, we are not using that way,
6:21
we are just simply installing them into our web app. If we wanted to set up a file with these dependencies
6:26
so we could regenerate them just from our bower.json, we could, but I don't really see a huge benefit to that.