Effective PyCharm Transcripts
Chapter: Server-side Python web apps
Lecture: Static files
Login or
purchase this course
to watch this video and the rest of the course contents.
0:02
Now let's look at static files here. Notice there's a static file section and this is a Pyramid convention
0:10
but what I'm going to show you with static files has to do with basically all the web frameworks. The first thing is if you look over here
0:19
we are using bootstrap, but we're using it off the cdn. And I would kind of like to use a local version
0:28
so let's go over here and copy this path so we can get to it very easily, cd there, and now we have this, let's make some directories,
0:40
let's have one for css, one for Javascript and we'd put things in there, I guess we'd have one for images,
0:48
just I'd prefer to put things together like this. Now, the other thing I want to do is let's use npm to install bootstrap locally,
0:56
so npm install bootstrap. Okay, now if we look we have our node modules, there's bootstrap, there's the distribution, there's this let's say copy.
1:10
Now, if we say copy relative path, that almost works for us let's go over here and paste it, see what we get.
1:19
Notice it takes a little more than we wanted but that's pretty good. So there's our local file and we do get
1:24
really cool things around, intellisense related to css, so if I have say a hyperlink, and we'll just put # for now
1:31
this hyperlink represents like some kind of button looking thing so I can have a class and the class could be btn
1:37
notice all that stuff comes from our bootstrap so I could say btn and btn- primary so we get all this great intellisense or autocomplete there
1:49
and we could also have, let's go and add a new style sheet this will be ours, and we'll just have buttons-list and we'll have that as a class.
2:04
We'll just have, background is green, I have no idea what we are going to do with this. But if we go over here now, have back in our template
2:14
we also have buttons list. So we have really awesome support for css, but one problem here,
2:24
also by the way, notice we had great Intellisense inside our css file as well but one other problem, notice this,
2:30
if I hover here, it says cannot resolve directory static, and if I go over here and I type /static I get zero help node modules,
2:39
like if I didn't copy that I would never have gotten that right without just traversing the tree on the left.
2:46
So we go to the top of the website and we mark it at a resource route here and that tells PyCharm when you're looking for static files
2:56
this is kind of forward slash and then there's static and so on, and this is the way our web app maps, so this is perfect
3:03
so we say /static/node when we actually want to load this up. So now, notice first of all, the error is gone
3:09
and we should be able to recreate this super easy now /static/node_modules/bootstrap, what's in bootstrap
3:18
is there a dist, there is, /dist/css/bootstrap.min.css, how about that and let's just make sure everything looks good still.
3:28
Boom! This is all bootstrap, like this little style here for the block quote with a bar
3:37
that's bootstrap, so it is still completely working, how cool is that.