CODEWITHSUNDEEP
pythoncssgoogle-app-enginetwitter-bootstrap
KimJongTrill
KimJongTrill

Reputation: 35

Running into confusion try to integrate Twitter Bootstrap into a Google App Engine-driven webapp

I'm unsure of how to get the two to work together. I followed the instructions of how to set up Twitter Bootstrap but for some reason when I run the server locally I get 404s when I try to reference the css/js dirs.

I know that I could go and download Boilerplate but I was given this task of creating my own webapp by a boss/mentor as a general introduction to web development (I'm a noob), and I'd like to build as much of it from scratch as I can. Just to help solidify my understanding of it all.

So here's what I've done so far:

I took the bootstrap directories (css, js, img) and put them in a folder called 'static' that I created in my application directory - the directory where my app.yaml file is. Then, in my app.yaml file, I have:

handlers:
- url: /.*
  script: sorter.app

- url: /img/(.*\.(gif|png|jpg))
  static_files: static/img/\1
  upload: static/img/(.*\.(gif|png|jpg))

- url: /css
  static_dir: static/css

- url: /js
  mime_type: text/javascript
  static_dir: static/js

When I sync the app directory with google, it tells me that 8 static files were copied (there are 8 twitter bootstrap files). Yet in my sorter.py file (sorter.app), I get 404s from all three of these:

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen" >
<link type="text/css" rel="stylesheet" href="css/bootstrap-responsive.min.css" >
<script src="js/bootstrap.min.js"></script>

Upvotes: 0

Views: 719

Answers (2)

dlebech
dlebech

Reputation: 1839

You have a catch-all url in the beginning of your app.yaml so all requests will be routed through your app instead of being served directly by GAE. Move the handler to the end of your handler list:

handlers:
- url: /css
  static_dir: static/css
...
- url: /.*
  script: sorter.app

Also, you might want to use absolute urls instead of relative ones in your html. For example /css/bootstrap.min.css will probably work better than css/bootstrap.min.css.

Upvotes: 2

dansalmo
dansalmo

Reputation: 11686

I use bootstrap with app engine. My app.yaml file has a static handler. I will update this answer as I find more differences.

handlers:
- url: /static
  static_dir: static

My app.yaml file and static folder are in the root application directory. My directory structure has static/css for the css folder.

My path is also slightly different than yours:

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

Upvotes: 2

Related Questions