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.
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 want to create random urls. i mean , let first url be myapp.appspot.com/868DF7.html
it ll be connected to test.py in app.yaml. when user opens this url, test.py ll generate new url. I ll save the next url at datastore. and the previous url will not be accessible. I guess the word is "disposable".
Is that possible to create dynamic url like this?
my current test.py : it gets previous string from datastore and creates next url and saves it.
import webapp2
from google.appengine.ext import db
from google.appengine.api import users
import jinja2
import os
import uuid
class Saved(db.Model):
urls=db.StringProperty()
date = db.DateTimeProperty(auto_now_add=True)
def _rKey(r_name=None):
return db.Key.from_path("r", r_name or 'default_r')
class MainPage(webapp2.RequestHandler):
def get(self):
r_name="none"
saveds_query = Saved.all().ancestor(
_rKey(r_name)).order('-date')
urls = saveds_query.fetch(10)
q=db.Query(Saved).order('-date')
print "previous url:", q[0].urls
print "<br>"
save = Saved(parent=_rKey(r_name))
save.urls=str(uuid.uuid4().get_hex().upper()[0:6])+".html"
print "next url:",save.urls
save.put()
APP = webapp2.WSGIApplication([
('/give/', MainPage),
], debug=True)
and app.yaml
handlers:
- url: /favicon\.ico
static_files: favicon.ico
upload: favicon\.ico
- url: /.*
script: helloworld.APP
libraries:
- name: webapp2
version: "2.5.2"
- name: jinja2
version: "2.6"
rest of the files are pretty much the same guestbook example of google.
https://github.com/GoogleCloudPlatform/appengine-guestbook-python/blob/master/guestbook.py
app.yaml lists "rules" that a server uses to match handlers. These rules may use wildcards and regular expressions. For example, you can add the following rule:
- url: /movie/.*
A server would interpret this rule to send all matching URLs to a file or a script that you specify. For example, the following URLs would match this rule:
myApp.appspot.com/movie/1234
myApp.appspot.com/movie/1234.mp4
You can use regular expressions to be as specific as you need in your matching rules.
You should define a handler that is active on a wildcard or a regular expression that matches the format you chose for the random strings.
When you get a request there, have the handler check the specific route that was used, and validate it against (as you correctly noted) the Datastore, Cloud SQL, your own Redis server, etc., which stores resources or references to resources that should be accessible from that special route.
You would then have the handler serve the resource, or at that point, if you want/need, validate authentication somehow (hopefully OAuth of their google account)
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 have a website running on Google App Engine for Python. I've inherited the code-base and am trying to piece things together myself. I'm trying to accomplish the "simple" task of creating a new page on the website and linking to it from a toolbar. So, I created a new file, lets call it mypage.html, in the main directory.
Here's the code I use for linking, within the index.html file:
<li {% if mypage_selected %}class='active'{% endif %}>
<a href='/mypage'>My Page</a>
</li>
And here's the code I use for handling the link, as declared in my main.py file:
class MyPagePage(BaseHandler):
def get(self):
template_values = {
'mypage_selected': True,
'session': self.session,
}
self.response.out.write(
template.render(get_path("mypage.html"), template_values))
Finally, I added a reference to the page here (also in main.py):
app = webapp2.WSGIApplication([
('/', MainPage),
...
('/mypage/?', MyPagePage),
], debug=True, config=webapp2conf)
My new file is indeed at mypage.html. However, when I run this, the link shows up, but clicking it takes me to http://mydomain.net/mypage which gives a 404 Not Found error. Any ideas what could be happening?
EDIT: Here is the handler portion of my app.yaml:
handlers:
- url: /
script: main.app
- url: /index\.html
script: main.app
- url: /static
static_dir: static
- url: /api.*
script: api.app
- url: /blog/.*/edit/?
script: dj.app
- url: /.*
script: main.app
On an additional note: I tried navigating to mypage.html, and that gives me a 404 also. Very stumped here. Any help is greatly appreciated!
Note the /mypage/? in your handler. That at least has to match, but your link is to '/mypage' so you get a 404.
a few things.
I would highly recommend using a boilerplate application like gae-boilerplate. This will help with a lot of these first time problems with google appengine. It's lightweight and will get you started on making your own projects quickly. The reason I recommend it is because by default it resolves strict slash problems (the difference between /mypage and /mypage/) by using
from webapp2_extras.routes import RedirectRoute
from web.handlers import handlers
secure_scheme = 'https'
_routes = [
RedirectRoute('/', handlers.MainPage, name='main', strict_slash=True),
RedirectRoute('/mypage/', handlers.mypagepage, name='mypage', strict_slash=True),
...
and in your handlers you could have:
class mypagepage(BaseHandler):
#user_required
def get(self):
params = {}
return self.render_template('mypage.html', **params)
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.