I am new at this and am planning to move my stuff from a paid web service to GAE (nothing dynamic just static pages). Believe me I have spent countless hours trying to make this work but am at an impasse whereby I achieve one result at the exclusion of another and visa versa.
I am sure it is a simple answer and that I am violating some basic principles. What I want is that the app engine page (mygaeid.appspot.com) delivers a static landing page such that other pages are available with the addition of a suffix e.g. mygaeid.appspot.com/oranges.html mygaeid.appspot.com/grapes.html etc.
I am unable to achieve this such that I either am able to get the other pages when I add the suffix e.g. mygaeid.appspot.com/apples.html; mygaeid.appspot.com/oranges.html but not the landing page OR with a slightly different yaml the landing page (mygaeid.appspot.com) works but there is no access to the other pages (mygaeid.appspot.com/oranges.html etc) that have a suffix.
The py file (abcdefg.py) is below and is common to the two different yamls that follow:
import os
from google.appengine.ext import webapp
from google.appengine.ext.webapp import util
from google.appengine.ext.webapp import template
class MainHandler(webapp.RequestHandler):
def get (self, q):
if q is None:
q = 'htmdir/apples.html'
path = os.path.join (os.path.dirname (__file__), q)
self.response.headers ['Content-Type'] = 'text/html'
self.response.out.write (template.render (path, {}))
def main ():
application = webapp.WSGIApplication ([('/(.*html)?', MainHandler)], debug=True)
util.run_wsgi_app (application)
if __name__ == '__main__':
main ()
Using the following yaml the landing page (mygaeid.appspot.com) works perfectly (delivering the content of apples.html), but I cannot access the page if I add a suffix e.g. mygaeid.appspot.com/apples.html or mygaeid.appspot.com/static/htmdir/apples.html etc, as soon as I add the suffix it does not work. In the directory (htmdir) I have placed apples.html along with other html pages e.g. oranges.html etc and I cannot access any of them with this yaml.
application: mygaeid
version: 1
runtime: python
api_version: 1
handlers:
- url: /(.*\.(html))
static_files: static/htmdir/\1
upload: static/htmdir/(.*\.(html))
- url: /css
static_dir: css
- url: /js
static_dir: js
- url: /images
static_dir: images
- url: .*
script: abcdefg.py
If I modify the yaml as follows then the landing page (mygaeid.appspot.com) does not work but when I add the suffixes then it works perfectly e.g. mygaeid.appspot.com/apples.html; mygaeid.appspot.com/oranges.html etc deliver the appropriate pages:
- url: /(.*\.(html))
static_files: htmdir/\1
upload: htmdir/(.*\.(html))
Finally if I dispense with the directories altogether and using the same abcdefg.py (without the directory) the following very simple yaml actually delivers the results I want but is very unruly as all the files are stuffed in the root directory.
application: mygaeid
version: 1
runtime: python
api_version: 1
handlers:
- url: /(.*\.(png|js|css))
static_files: \1
upload: (.*\.(png|js|css))
- url: .*
script: abcedfg.py
any help would be much appreciated on figuring this out.
thanks
thanks wooble and thanks dave I went back yet again and carefully read the logs Wooble's solution works but I needed to put the htmdir (that contains the html) inside a directory called static. GAE is a great (and free) solution for static websites
your help and feedback is very much appreciated
SiteDirectory
-mygaeid
-static
-htmdir
-js
-css
-images
app.yaml
index.yaml
(py file was removed)
If you declare files as static in app.yaml, they are not available to your application's handlers.
However, if they're really static, using the django template engine to "render" them is kind of silly; just add mappings in app.yaml to display the static files, including one to display apples.html for /:
application: mygaeid
version: 1
runtime: python
api_version: 1
handlers:
- url: /(.*\.html)
static_files: static/htmdir/\1
upload: static/htmdir/.*\.html
- url: /css
static_dir: css
- url: /js
static_dir: js
- url: /images
static_dir: images
- url: /
static_files: static/htmdir/apples.html
upload: static/htmdir/apples\.html
(no python files needed)
Woobie has the right answer. Let me phrase it differently.
When you put .html in static_files, they're served by separate services that are dedicated to serving static content. Your app will not be able to see those files. The app can only see files that are resources.
Django templates must be resources, not static files. Otherwise, the application can't see them, and the template.render(path, ... will fail.
A next step to getting your problem solved is (if you haven't done so aleady) is to update your post to show your current app.yaml, and also to show us what's being reported up in the application's logs.
There are technical reasons why it works this way
The app.yaml config functions in a very simple top->bottom procedural manner.
Matching happens in the following order:
1. - url: /(.*\.(html))
static_files: static/htmdir/\1
upload: static/htmdir/(.*\.(html))
2. - url: /css
static_dir: css
3. - url: /js
static_dir: js
4. - url: /images
static_dir: images
5. - url: .*
script: abcdefg.py
To put it simply, if the file has a .html suffix it gets matched in step 1 and reroutes that request from mygaeid.appspot.com/.html to mygaeid.appspot.com/htmdir/.html. The *.html handler in step 5 never gets hit because all *.html routes are already spoken for.
In addition -- as the answers have already covered -- directories marked as static will not be available locally to your app handlers. I'll try to address the technical reasons why.
app.yaml acts as a configuration file for GAE's reverse proxy. Static files only change when they're uploaded so they're ideal for caching. By immediately pushing the static files to a cache server when they're deployed, GAE increases loading performance and removes unnecessary load from the app servers.
There's a good reason that static requests are counted separately and cost less than regular app requests. Every time you request a static file you're essentially pulling fetching the file from GAE's CDN. If you were to only fetch static files, then your server would have no reason to spool up in the first place.
The obvious downside to that approach is that those files don't physically exist on the same server as your app so you can't fetch or upload them directly in your app.
Note: Also following what other answers have covered. Don't mark your template folder as static. When your app goes to load the template -- instead of grabbing it from an adjacent directory -- it'll have to send out a web request and fetch the file from a remote location. Obviously, fetching a remote file instead of a local file is going to increase load time and latency.
Related
There are already a lot of post dealing with this issue but I wasn't able to find a solution to my problem. I am using the Google App Engine Launcher to create a small web application using python. I need to display a picture (/images/chartname.png) on my page. I am using the following line of html code <img width=150 src="/images/chartname.png"> but the picture does not show up. Additionally when I open http://localhost:8080/images I get an error 404.
Here's the content of my .yaml file:
application: app
version: 1
runtime: python27
api_version: 1
threadsafe: false
handlers:
- url: /.*
script: app.my_app
- url: /images
static_dir: images
I don't understand why the picture doesn't show up and why http://localhost:8080/images returns an error 404.
I've tried the suggestion in this post: Google App Engine add image to page with static folder but it didn't do it for me.
Try reordering the handlers:
- url: /images
static_dir: images
- url: /.*
script: app.my_app
Patterns are evaluated in the order they appear in the app.yaml file, from top to bottom. The first mapping whose pattern matches the URL is the one used to handle the request.
I made a website which I am temporarily hosting in app engine. I am able to navigate through the pages when I open the HTML files on my computer. It only fails when I head to http://www.alshafarconstruction.appspot.com/index.html.
Error Message:
Error: Not Found
The requested URL /contact.html was not found on this server
app.yaml:
application: alshafarnew
version: 1
runtime: python
api_version: 1
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.py
main.py:
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()
I've checked the dashboard and find that the HTML files are there. I am new to website deployment and design. Can anyone suggest possible errors? I have already visited many sites for a solution.
The documentation hints that static and application files are uploaded separately, so while the files may be there, it might be that they're being uploaded in the application-files part.
You currently have an upload directive telling it to only upload index.html:
- url: /(.*\.html)
static_files: \1
upload: index.html
(actually, it's a regular expression, so it would also upload, for example index#html if it existed)
This suggests that you might want to make that regular expression match all HTML files:
- url: /(.*\.html)
static_files: \1
upload: .*\.html
I'm building an app on the webapp2 framework in Google App Engine in Python. I've been using Jinja2 as my template engine and Twitter Bootstrap for styling purposes. After building a nice "layout.html" and having all other templates inherit from the "layout.html", I deployed. All pages render property, except one, the one whose url is dynamic.
Here is what the WSGI handler looks like:
webapp2.WSGIApplication = ([('/login', LoginPage),
('/updates', Update),
('/updates/.*', Individual)],
debug = True)
# as you can see I'm using the catchall regex for Individual
Functionally, each dynamically generated url handled by Individual operates properly. Here is the handler, again, everything within this handler is getting executed.
class Individual(Handler):
def get(self):
url_u = str(self.request.url)
posit = url_u.find('updates')
bus1 = url_u[posit+8:]
bus = bus1.replace('%20', chr(32))
b = BusUpdates.all()
this_bus = b.order('-timestamp').filter('bus = ', bus).fetch(limit=10)
name = users.get_current_user()
user = None
if name:
user = name.nickname()
logout = users.create_logout_url(self.request.uri)
self.render("individual.html", bus=bus, user=user, this_bus=this_bus, logout=logout)
A typical url will look like:
http://www.megabusfinder.appspot.com/updates/St%20Louis,%20MO-Chicago,%20IL-4-12-930AM-310PM
Here is my app.yaml file
application: megabusfinder
version: 1
runtime: python27
api_version: 1
threadsafe: no
handlers:
- url: /favicon\.ico
static_files: favicon.ico
upload: favicon\.ico
- url: /static/stylesheets
static_dir: static/stylesheets
- url: /twitter-bootstrap-37d0a30
static_dir: twitter-bootstrap-37d0a30
- url: /static/xml
static_dir: static/xml
- url: .*
script: main.app
builtins:
- remote_api: on
libraries:
- name: webapp2
version: "2.5.1"
- name: jinja2
version: latest
Now, I previously had the "individual.html" inheriting from my "layout.html". As of about an hour ago, I no longer am doing that and I've manually added all the necessary bootstrap that I use in "layout.html" to "individual.html". Even with this, no styling is in effect.
Thanks in advance.
The issue is you are using relative URL paths for your stylesheets, rather than absolute paths. You are doing this:
<link href="styles/bootstrap.css" rel="stylesheet">
When you should be doing this:
<link href="/styles/bootstrap.css" rel="stylesheet">
The issue is that the browser will make a request for a relative URL like that one by combining the existing URL with the relative URL provided in your href (or src for a JavaScript file).
On your root pages the browser makes a request for megabusfinder.appspot.com/styles/bootstrap.css. On your non-root pages it makes a request for megabusfinder.appspot.com/some/sub/path + styles/bootstrap.css ... which doesn't exist, resulting in a 404 (and an unstyled page).
Providing a leading slash ensures that the browser will replace the current path with the href path, rather than combining the paths.
See RFC 3986 for more information on how URIs are merged.
In appengine I have mapped '/' directory for static folder editing myapp.yaml. Now the problem it raised is that it can't recognize my other routes (for eg: /blog/.json) which I am configuring via my python script. If both of the route were scripted in python then moving a route up and down could have solved this problem but here apparently I can't do that. So what can be done?
main.py
app = webapp2.WSGIApplication([('/blog/.json', jsonBlog)], false)
app.yaml
- url: /
static_dir: html5
Adding
- url: .*
script: main.app
before
- url: /
static_dir: html5
will solve the problem. First of it will check scripted directory then it will check scripted mapped folders.
I am unable to display images in pages created using Google App Engine(Python).
My app.yaml file has :
- url: /images
static_dir: images
And the python file has:
self.response.out.write("""<img src = '/images/title.gif' />""")
The image still does not display in the page.
Thanks
I would test:
Do you see http://yourapp.appspot.com/images/title.gif?
Are you sure that images folder is on your app root?
Title.gif is a "working" image?
I would recommend you to use a static folder to store your static contents organized in subfolders:
Root
static
images
stylesheets
javascripts
app.yaml
and Mapping a url /images like this.
- url: /images
static_dir: static/images
mime_type: image/png
mime_type: image/png is optional; if not specified, the MIME type for a file will be derived from the file's filename extension.
I encountered a similar problem. The solution was ultimately very simple. You need to try to reposition the url handler for the static directory before the apphandler for the main.app
like this:
handlers:
url: /favicon\.ico static_files: favicon.ico upload: favicon\.ico
url: /photos static_dir: photos
url: .* script: main.app
This annoyed me for like 45 min before I found the solution on google.
Is there a directory called 'images' in your app's root directory? What does it contain? What do you get if you attempt to fetch the file directly?
The reason may be about upper/lower case difference between systems. Windows is not upper/lower sensitive, but Linux is. Supposing your actual file name is Title.GIF. It works if it is written as title.gif on a Windows machine (Your Local machine), but does not work on a Linux server (Google App Server).
One possible reason for this to happen is if you do not provide space between - url and if you do not restart your server. It will show 404 that time. If you restart your server then you will encounter the error in app.yaml. This is one very common mistake that people commit. Because the way you have done it seems that it should work fine.