how to add bootstrap, css, images ,js into google app engine?


Tags: javascript,css,twitter-bootstrap,google-app-engine,python-2.7

Problem :

I have created the web application using bootstrap.I uploaded it to the google app engine.My problem is ,it doesn't show any images,js or css i have added.Please help me. My folder structure is like below.

-myapp
  -css
  -js
  -images
  -fonts
  -index.html
  -otherfiles.html....

I edited the app.yaml as below

application: website-example
version: 1
runtime: python
api_version: 1

default_expiration: "7d"

handlers:
- url: /(.*\.(gif|png|jpg|ico|js|css|swf|xml))
  static_files: \1
  upload: (.*\.(gif|png|jpg|ico|js|css|swf|xml))

- url: /(.*\.html)
  static_files: \1
  upload: index.html

- url: /.*
  script: main.p

I edited the main.py as below.

from google.appengine.ext import webapp
from google.appengine.ext.webapp.util import run_wsgi_app

class IndexHandler(webapp.RequestHandler):
    def get(self):
        if self.request.url.endswith('/'):
            path = '%sindex.html'%self.request.url

        self.redirect(path)

    def post(self):
        self.get()

application = webapp.WSGIApplication([('/.*', IndexHandler)], debug=True)

def main():
    run_wsgi_app(application)

if __name__ == "__main__":
    main()

Please help me.I can't figure this out.



Solution :

For your case, I'd use something more like:

application: website-example
version: 1
runtime: python
api_version: 1

default_expiration: "7d"

handlers:
- url: /css
  static_dir: css

- url: /js
  static_dir: js

- url: /img
  static_dir: images

- /index.html
  static_files: index.html
  upload: index\.html

- url: /.*
  script: main.py

The basic idea behind the static dirs for css, js and images is that everything under those dirs will be served statically, whenever the request url starts with those urls (so, you can serve things like /img/sub_dir/foo.png)

For the static html, I used a single file example, but you could as well put them in a separate dir and serve statically from there


    CSS Howto..

    How to create a top-footer and footer using foundation, just like foundation website

    How to make a different flip animation using CSS?

    How to extend background CSS styling indefinitely along the x-axis?

    CSS how to target 2 attributes?

    How to override xhtml theme css?

    How to align CSS Input type Text Placeholder Image

    How to replace non-existing images with a default one in css?

    How to generate assets that match the html file of a rails application?

    how to style in css: product…(price)?

    How to remove CSS underline?

    How to remove hover effect from a column of a table

    How to get CSS pulsating effect to work in FireFox and Internet Explorer?

    How do I do image color blend in css?

    How can I get two buttons and textareas from separate forms to display inline?

    show/hide slider toggle for any number of IDs

    How to select children in CSS

    How to animate my header to slide in horizontally from left to page view on load?

    How can I remove hover style in CSS

    how to dynamically change the property of css using jquery

    How to create a css file in eclipse with e(fx)clipse plug in

    Show hidden image with jQuery

    how to: dynamically switch css page

    css: how to inherit whole class

    How to style Menu border/outline in JavaFX8 using CSS?

    How to vertically center more than one line of text (works only on chrome)?

    Centered CSS pages that are longer than one screen appear 5px~ further to the left than shorter ones - how do I stop this?

    How to calculate effective CSS for a DOM node using PHP

    How to make child element width 30 precent of parent elements width using css?

    how to fix menu bar css-adapter stuffs with IE

    How to format HTML/CSS to align with single word in sentence?