How can I display an image in google app engine? - python

This should be really easy but I am having trouble.
My main.py looks like this:
import webapp2
import urllib2
from google.appengine.api import images
from google.appengine.ext import db
class MainHandler(webapp2.RequestHandler):
def get(self):
self.response.write("hello worldd")
#********????*********
app = webapp2.WSGIApplication([
('/', MainHandler)
], debug=True)
Where I have commented #********????********* can I place some html headers <html><head><body><img src> etc? When I do this it breaks.
My app.yaml looks like this:
application: myprojectnamehere
version: 1
runtime: python27
api_version: 1
threadsafe: yes
handlers:
- url: /favicon\.ico
static_files: favicon.ico
upload: favicon\.ico
- url: .*
script: main.app
- url: /images
static_dir: images
libraries:
- name: webapp2
version: "2.5.2"
My image is stored in a directory called 'images', in the same project folder as main.py.
Is this automatically uploaded to the server when I hit 'deploy'?
I have found some "clues" on google's website such as this about general images, and this about dynamic images, but I am still having trouble with this. Can you help bring me up to speed? I would like eventually to show an image that is a custom button, detect a mouse click on the image, and change the image as a result.
Any guidance would be great. What I am trying to do should be pretty simple but it's turning out to be much harder than I expected. From basic searches in the documentation I am finding clues but none seem to be pointing in a clear exact direction for what I need to be using to display a simple image on my app engine webpage.
Next I will familiarize myself with something called the GWT API, based on a clue I found here.

Related

Static image folder with google app engine

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.

Setting multiple handlers with Python App Engine

I just cannot seem to get multiple handlers working. I'm using Google App Engine with Python. The base URL returns "Hello world!", as expected, but I keep getting a 404 error when I try to visit "/girl".
As far as I can tell I'm doing exactly what is specified in the docs:
https://cloud.google.com/appengine/docs/python/config/appconfig
And in this similar question:
YAML file url and script in GAE python
and yet trying all variants I can think of on these models does not resolve my 404 problem. I am a beginner and don't really understand how the app.yaml file works, thus I'm pretty sure that I'm not specifying the handlers correctly. But I don't know how to fix it.
app.yaml
application: multiapp
version: 1
runtime: python27
api_version: 1
threadsafe: yes
handlers:
- url: ./girl/.*
script: girl.app
- url: .*
script: main.app
libraries:
- name: webapp2
version: "2.5.2"
main.py
import webapp2
class MainHandler(webapp2.RequestHandler):
def get(self):
self.response.write('Hello world!')
app = webapp2.WSGIApplication([
('/', MainHandler)
], debug=True)
girl.py
import webapp2
class MainHandler(webapp2.RequestHandler):
def get(self):
self.response.write('Hey girl!')
app = webapp2.WSGIApplication([
('/',MainHandler),
('/girl/', MainHandler)
], debug=True)
Added: Different organization of the project could definitely avoid having to solve this problem, but I would also like to know why setting these multiple handlers isn't working to begin with.
I know this is an old thread, and that you sort of got your answer, but I want to give a better explanation of what was happening, as I have just found the answer to your fundamental question: How to split handlers into different files?
The key problem is that you are working with regular expressions, both when you declare your WSGIApplication
app = webapp2.WSGIApplication([
('/', MainHandler),
('/girl/', GirlHandler)
], debug=True)
and in your yaml file
handlers:
- url: ./girl/.*
script: girl.app
- url: .*
script: main.app
The path in your yaml url: regex must be the full path from your webapp domain. So if your domain is localhost:8080 then in your yaml file yo should add the url from localhost:8080 onwards. If you type url: /girl/.*
you're asking the browser to match domain+regex: localhost:8080/girl/.*
This means:
match this part exactly: localhost:8080/girl/
match any characters that follow the first part (as that's what ".*"
means in a regex)
So the following yaml statement:
handlers:
- url: /girl/.*
script: girl.app
means that for any url of the form domain/girl/ anything (or nothing) use the the app variable in girl.py file app = webapp2.WSGIApplication(...)
The first implication of this, is there is no purpose in writing a handler for a url that girl.py will never handle, such as when you coded:
girl.py
import webapp2
class MainHandler(webapp2.RequestHandler):
def get(self):
self.response.write('Hey girl!')
app = webapp2.WSGIApplication([
('/',MainHandler),
], debug=True)
You will never use this main handler, as it will only 'activate' when you browse for domain/, but you said in your yaml file that you only wanted girl.py to handler urls of the form domain/girl/something. It's a contradiction
This means that for your setup to work, in girl.py you should only write handlers for urls that match the regex in your yaml. in this case, any regex that is also accepted by /girl/.*.
As a sidenote, if you wanted your girlHandler to work on either domain/girl and domain/girl/ you should use this regex in your yaml file:
handlers:
- url: ./girl(?:/.*)?
script: girl.app
- url: .*
script: main.app
as this makes the /.* part optional
Hope this helps anyone reaching this question, as an insight of how webapp2 calls each handler depending on the url given
You should bundle all your routes together in one file, and have different handlers for different routes.
main.py
import webapp2
class MainHandler(webapp2.RequestHandler):
def get(self):
self.response.write('Hello world!')
class GirlHandler(webapp2.RequestHandler):
def get(self):
self.response.write('Hey Girl!')
app = webapp2.WSGIApplication([
('/', MainHandler),
('/girl/', GirlHandler)
], debug=True)
then in your app.yaml you only have to link to main.app
application: multiapp
version: 1
runtime: python27
api_version: 1
threadsafe: yes
handlers:
- url: .*
script: main.app
libraries:
- name: webapp2
version: "2.5.2"
You don't need multiple webapp2.WSGIApplication instances.
You could have central routing while keeping handlers in separate files with something along these lines in main.py:
app = webapp2.WSGIApplication([
('/girl/.*', "girl.MainHandler")
('/.*', MainHandler),
], debug=True)
Another possibility of running largely independent "apps" while still be able to share some info across them (like authentication) would be to make them modules of the main app. While offering more flexibility in the long run they do have a non-neglijible learning curve (and docs aren't always up2date for them)
Organizational issues aside, the reason this wasn't working was that I didn't include a trailing slash.
"/girl" (no slash) returns 404;
"/girl/" (with slash) renders the page.
Also the lines in app.yaml should be:
handlers:
- url: /girl/.*
script: girl.app

Requested url not found on server error

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

Google App Engine, Uploading Images

I trying to learn web application development. I'm currently using Google App Engine to create apps. I was experimenting with showing images on my site but the site just shows the alternate text.
The first time I tried this I didn't know about static files. Once I fixed that problem the request line for the image showed: '"GET /images/pic.jpg HTTP/1.1" 200 -'. When I ran dev_appserver it showed a warning saying I needed the python module "PIL" to do imaging. Once I downloaded and installed that the warning disappeared but it still won't load the picture! The request line still shows that it found the image. But all the site displays is the alternate text!
Anyway, here's the code for the app.yaml and script:
(note: I'm using the code for python 2.5)
-----------app.yaml------------
application: mysite
version: 1
runtime: python
api_version: 1
handlers:
- url: /.*
script: myscript.py
- url: /images
static_dir: images
---------- script -----------
template = """
<body>
<br>
<br>
<img src="/images/pic.jpg" alt="Clone Pic" width="100", height="70"/><br>
</body>
"""
print "Content-Type: text/html"
print template
Here's what my application directory looks like:
Root
app.yaml
script.py
images
pic.jpg
I recently found out that even if I change the name of the images directory in my script
<img src="/foo/pic.jpg...)
the request line still says its OK
"GET /foo/pic.jpg HTTP/1.1" 200 -
Anybody know what's going on?
The order of your handlers matter. /.* matches every URI, hence you typically want that at the end. Try the following ...
handlers:
- url: /images
static_dir: images
- url: /.*
script: myscript.py
Also, make sure your image files are under the directory images as you specified in static_dir.
Hope this helps.

Google App Engine static pages Python 2.5 directories etc

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.

Categories

Resources