Could someone help me with this (I'm new to YAML):
application: baking-tutorial
version: secureable
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /robots\.txt
static_files: static/robots.txt
upload: static/robots\.txt
- url: /static
static_dir: static
secure: optional
- url: /main\.html
mime_type: text/html
static_files: static/\1
upload: static/main\.html
- url: /static/.*
script: mirror.app
secure: optional
- url: /.*
script: mirror2.app
secure: optional
Basically I'm trying to host a password protected site so I have the mirror2.app directing you to it then if you get it right the JavaScript redirects you to the main.html except it's not there.
Your file is not a correct YAML file. You have to take care to properly indent everything at the same level that belongs together:
application: baking-tutorial
version: secureable
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /robots\.txt
static_files: static/robots.txt
upload: static/robots\.txt
- url: /static
static_dir: static
secure: optional
- url: /main\.html
mime_type: text/html
static_files: static/\1
upload: static/main\.html
- url: /static/.*
script: mirror.app
secure: optional
- url: /.*
script: mirror2.app
secure: optional
the value for the mapping key 'handlers' is a list of mappings. Each of those latter mappings has at least a 'url' key and then some others.
In YAML, if you outdent to a previous level, you essentially end the previous construct (sequence, mapping). Also note that the - for the list items in a mapping value can align with the key (the don't have to, they can be more indented, as long as they all are indented the same level).
Related
I'm setting up a simple web app on AppEngine and have some trouble with configuring the app.yaml. It includes a HTML page, a JS script and a NodeJS server.
My project structure:
\app.yaml
\package.json
\www
\index.html
\js
\server.js
\index.js
index.html:
<!DOCTYPE html>
<html>
<body>
<div id="JShere" >Hello World !</div>
<div id="ReqAnswer"></div>
</body>
<script src="js/index"></script>
</html>
index.js:
document.getElementById('JShere').innerHTML = "JS is running";
var xhr = new XMLHttpRequest();
xhr.open('GET', "/srv", true);
xhr.send();
xhr.addEventListener("readystatechange", processRequest, false);
function processRequest(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById('ReqAnswer').innerHTML = xhr.responseText;
}
}
node.js server:
const express = require('express');
const app = express();
app.get('/srv', function (req, res) {
res.send('Request anwser')
})
const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
console.log(`Server listening on port ${PORT}...`);
});
package.json:
...
"scripts": {
"start": "node www/js/server.js",
"test": "mocha --exit test/*.test.js"
},
...
app.yaml:
runtime: nodejs10
handlers:
- url: /
static_files: www/index.html
upload: www/index.html
- url: /index
static_files: www/index.html
upload: www/index.html
- url: /page2
static_files: www/page2.html
upload: www/page2.html
- url: /www
static_dir: www
When I check locally, index.js modify index.html correctly but when I deploy it to App Engine, index.js is blocked (MIME type (« text/html »)). it then "fails to load the " on the index.html. Although, the script still launch the GET request to the server and get a 404 error.
Is it an App.yaml problem or something else is wrong?
Check closely the GAE log entries for the exact URL being requested (and rejected with 404). That's what would normally need to be matched by one of your static handlers' url pattern. If a match occurs then the file specified by the respective handler's static_file/static_dir and upload specs (which are relative to your app's top dir - where the app.yaml file exists) should happen.
Let's assume the initial request is for /. That's matched by your 1st static handler, so your www/index.html will be served.
But the index.html file references the js/index script inside, so another request will follow with that URL. But that URL doesn't match any of your handlers' pattern, so it'll get a 404. You also don't have any file named just index.
Assuming what you'd like to serve in this case is actually the www/js/index.js file you'd have to:
correct the filename reference in your index.html file:
<script src="js/index.js"></script>
make sure this reference is matched by a static handler url pattern. Something like this maybe (which for every request path ending with .js will attempt to serve a file matching that path but relative to the www/js directory):
- url: /(.*\.js)$
static_files: www/js/\1
upload: www/js/.*\.js$
Alternatively you could use a scheme that can be applied to multiple type of files, not that those ending in .js:
reference the file using the www prefix in your index.html file:
`<script src="www/js/index.js"></script>`
re-use your last handler, but adding a wildcard to its url to ensure matches for everything under www (as www/blah won't match the just www pattern):
`- url: /www/*`
It's also possible to reference the script without the .js suffix, but then you'd need a handler specifically for that file - to map it to the actual filename, you can't use wildcards. So I wouldn't recommend this as it can get pretty complex very quickly.
You'd have to similarly consider all the other static elements you need to serve.
I'm following the Heroku image upload tutorial which includes the following code in application.js -
fileInput.fileupload({
fileInput: fileInput,
url: '<%= #s3_direct_post.url %>',
type: 'POST',
autoUpload: true,
formData: <%= #s3_direct_post.fields.to_json.html_safe %>,
paramName: 'file', // S3 does not like nested name fields i.e. name="user[avatar_url]"
dataType: 'XML', // S3 returns XML if success_action_status is set to 201
replaceFileInput: false
});
...you can see that formData: does not have quotes around the erb - this is causing a javascript error when I deploy the code - SyntaxError: Unexpected token '<'
That erb should be in quotes, right? Any comment greatly appreciated.
Don't do that - it might work in development, but will break in production as default production configuration assumes all the assets are precompiled and are served by the server. This obviously can be changed, but might cause some performance issues.
If you need to pass any data from your controller to your javascript, use gon gem:
controller:
gon.fileUpload = {
url: #s3_direct_post.url,
data: #s3_direct_post.fields.to_json
}
Then you can use it within 100% static javascript:
fileInput.fileupload({
fileInput: fileInput,
url: gon.fileUpload.url
type: 'POST',
autoUpload: true,
formData: gon.fileUpload.data,
paramName: 'file', // S3 does not like nested name fields i.e. name="user[avatar_url]"
dataType: 'XML', // S3 returns XML if success_action_status is set to 201
replaceFileInput: false
});
Naturally you need to follow gon installation guide.
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.
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
I'm having a tough time linking my stylesheets with the .yaml file. Here is my yaml file now:
My directory looks something like this:
|-- assests -> css - js.
|-- templates -> a bunch of my html.
| main.py
| app.yaml
If I upload the css directly from a url it works fine. However, it's not working using directory mapping. Here's an example of how I upload the css:
<link href="assets/css/animate.min.css" rel="stylesheet">
<link href="assets/css/bxslider.css" rel="stylesheet">
<link href="assets/css/magnific-popup.css" rel="stylesheet">
And here's the yaml file:
application: app
version: 1
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /assets/css/(.*\.css)
mime_type: text/css
static_files: /assets/css/\1
upload: /assets/css/(.*\.css)
- url: /assets/css/colors(.*\.css)
mime_type: text/css
static_files: /assets/css/colors\1
upload: /assets/css/colors(.*\.css)
- url: /assets/js/(.*\.js)
mime_type: text/js
static_files: /assets/js/\
upload: /assets/js/(.*\.js)
- url: .*
script: main.app
libraries:
- name: webapp2
version: "2.5.2"
- name: jinja2
version: latest
Any ideas?
SOLUTION:
application: app
version: 1
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /assets/css(.*\.css)
mime_type: text/css
static_files: assets/css/\1
upload: assets/css/(.*\.css)
- url: /assets/css/colors(.*\.css)
mime_type: text/css
static_files: assets/css/colors/\1
upload: assets/css/colors(.*\.css)
- url: /assets/js/(.*\.js)
mime_type: text/js
static_files: assets/js/\1
upload: assets/js/(.*\.js)
- url: .*
script: main.app
libraries:
- name: webapp2
version: "2.5.2"
- name: jinja2
version: latest
Two things. First, make your stylesheet hrefs absolute (i.e., start with /), since these are always relative to the base of the web serving path, and not relative to any particular page.
Second, in app.yaml, static_files (and static_dir) are relative to the base directory of the app, so remove the leading / on those paths.
Thanks for taking time to read my question.
I'm trying to embed something like this on my website using google app engine. To accomplish this my understanding is I have to upload a .js file. I currently have this code on my page:
<script src='/ytembed.js' type="text/javascript"></script>
<div id="youtubeDiv"></div>
<script type="text/javascript">ytEmbed.init({'block':'youtubeDiv','type':'search','q':'03728D7DF4BBDC66','results':'50','order':'highest_rating','width': 200, 'height': 200, 'layout': thumbnails});</script><br>
It only returns a blank page. I figured it's because i have some sort of failed implementation of the .js file.
This is my app file currently :
application: *********
version: 1
runtime: python
api_version: 1
handlers:
- url: /(.*\.(gif|png|jpg|ico|js|css))
static_files: \1
upload: (.*\.(gif|png|jpg|ico|js|css))
- url: .*
script: main.py
- url: \1
script: ytembed.js
I recommend you to use the static_dir configuration like this:
application: *********
version: 1
runtime: python
api_version: 1
handlers:
- url: /static/
static_dir: static
- url: .*
script: main.py
And put the ytembed.js in static/js/ytembed.js from the root directory of your application, and point to the js file with the url http://APPHOST/static/js/ytembed.js.