Static assets not working on google app engine

Question

I've deployed the angularjs app on google app engine but there are some issue regarding the js, css, bower components and components directory. javascript and css are not being served on google app engine. Here is my app directory structure.

myapp
  app
    bower_components
        angular-bootstrap
        ..........etc
    components
        version.js
    css
        app.css
    js
        app.js
        controllers.js
        services.js
        filters.js
        directives.js
  index.html
  app.yaml

here is my app.yaml file contents:

application: myappid
version: 1
runtime: python27
threadsafe: true
api_version: 1

handlers:

url: css
static_dir: app/css
mime_type: text/css

url: js
static_dir: app/js
mime_type: text/javascript

url: /components
static_files: components
upload: components
mime_type: text/javascript

url: /bower_components
static_files: /bower_components

upload: /bower_components
mime_type: text/javascript

url: (.*)/.*
static_files: app/index.html
upload: app

url: (.*)
static_files: app
upload: app

I'm getting these errors on console:

INFO     2015-04-23 10:02:33,782 module.py:788] default: "GET /app/ HTTP/1.1" 304 -
INFO     2015-04-23 10:02:33,846 module.py:788] default: "GET /app/bower_components/html5-boilerplate/css/normalize.css HTTP/1.1" 304 -
INFO     2015-04-23 10:02:33,847 module.py:788] default: "GET /app/bower_components/html5-boilerplate/css/main.css HTTP/1.1" 304 -
INFO     2015-04-23 10:02:33,854 module.py:788] default: "GET /app/bower_components/angular-ui-grid/ui-grid.min.css HTTP/1.1" 304 -
INFO     2015-04-23 10:02:33,854 module.py:788] default: "GET /app/css/app.css HTTP/1.1" 304 -
INFO     2015-04-23 10:02:33,854 module.py:788] default: "GET /app/bower_components/bootstrap/dist/css/bootstrap.css HTTP/1.1" 304 -
INFO     2015-04-23 10:02:33,854 module.py:788] default: "GET /app/bower_components/angular-ui-select/dist/select.min.css HTTP/1.1" 304 -
INFO     2015-04-23 10:02:33,856 module.py:788] default: "GET /app/bower_components/select2/select2.css HTTP/1.1" 304 -
INFO     2015-04-23 10:02:33,858 module.py:788] default: "GET /app/bower_components/selectize/dist/css/selectize.default.css HTTP/1.1" 304 -
INFO     2015-04-23 10:02:33,862 module.py:788] default: "GET /app/bower_components/angular/angular.js HTTP/1.1" 304 -
INFO     2015-04-23 10:02:33,863 module.py:788] default: "GET /app/bower_components/angular-resource/angular-resource.js HTTP/1.1" 304 -
INFO     2015-04-23 10:02:33,864 module.py:788] default: "GET /app/bower_components/angular-route/angular-route.js HTTP/1.1" 304 -
INFO     2015-04-23 10:02:33,864 module.py:788] default: "GET /app/bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js HTTP/1.1" 304 -
INFO     2015-04-23 10:02:33,865 module.py:788] default: "GET /app/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js HTTP/1.1" 304 -
INFO     2015-04-23 10:02:33,868 module.py:788] default: "GET /app/bower_components/angular-ui-grid/ui-grid.min.js HTTP/1.1" 304 -
INFO     2015-04-23 10:02:33,869 module.py:788] default: "GET /app/bower_components/angular-ui-select/dist/select.min.js HTTP/1.1" 304 -
INFO     2015-04-23 10:02:33,870 module.py:788] default: "GET /app/bower_components/angular-sanitize/angular-sanitize.min.js HTTP/1.1" 304 -
INFO     2015-04-23 10:02:33,870 module.py:788] default: "GET /app/bower_components/selectize/dist/js/selectize.min.js HTTP/1.1" 304 -
INFO     2015-04-23 10:02:33,871 module.py:788] default: "GET /app/bower_components/angular-ui-router/release/angular-ui-router.min.js HTTP/1.1" 304 -
INFO     2015-04-23 10:02:33,874 module.py:788] default: "GET /app/bower_components/underscore/underscore.js HTTP/1.1" 304 -
INFO     2015-04-23 10:02:33,877 module.py:788] default: "GET /app/js/controllers.js HTTP/1.1" 304 -
INFO     2015-04-23 10:02:33,877 module.py:788] default: "GET /app/bower_components/angular-underscore/angular-underscore.js HTTP/1.1" 304 -
INFO     2015-04-23 10:02:33,877 module.py:788] default: "GET /app/js/app.js HTTP/1.1" 304 -
INFO     2015-04-23 10:02:33,881 module.py:788] default: "GET /app/components/version/version.js HTTP/1.1" 304 -
INFO     2015-04-23 10:02:33,884 module.py:788] default: "GET /app/components/version/version-directive.js HTTP/1.1" 304 -
INFO     2015-04-23 10:02:33,885 module.py:788] default: "GET /app/js/services.js HTTP/1.1" 304 -
INFO     2015-04-23 10:02:33,885 module.py:788] default: "GET /app/components/version/interpolate-filter.js HTTP/1.1" 304 -
INFO     2015-04-23 10:02:33,885 module.py:788] default: "GET /app/js/filters.js HTTP/1.1" 304 -

can anyone explain what is wrong?

score 0 · Answer 1 · edited May 23 '17 at 11:59

There is not necessarily something wrong.

All your calls return with the status code 304.
304 means that the requested resource was not modified since the last time you accessed it.
304 is not an error-indicating code.

Chances are that your browser still has the result of the request in its cache.

Wikipedia's explanation is short but pretty clear.

304 Not Modified

Indicates that the resource has not been modified since the version specified by the request headers If-Modified-Since or If-None-Match. This means that there is no need to retransmit the resource, since the client still has a previously-downloaded copy.

Also see the RFC, which has a lot more detail.

304 Not Modified

If the client has performed a conditional GET request and access is allowed, but the document has not been modified, the server SHOULD respond with this status code. The 304 response MUST NOT contain a message-body, and thus is always terminated by the first empty line after the header fields.

The response MUST include the following header fields:

Date, unless its omission is required by section 14.18.1 If a clockless origin server obeys these rules, and proxies and clients add their own Date to any response received without one (as already specified by [RFC 2068], section 14.19), caches will operate correctly.

ETag and/or Content-Location, if the header would have been sent in a 200 response to the same request

Expires, Cache-Control, and/or Vary, if the field-value might differ from that sent in any previous response for the same variant If the conditional GET used a strong cache validator (see section 13.3.3), the response SHOULD NOT include other entity-headers. Otherwise (i.e., the conditional GET used a weak validator), the response MUST NOT include other entity-headers; this prevents inconsistencies between cached entity-bodies and updated headers.

If a 304 response indicates an entity not currently cached, then the cache MUST disregard the response and repeat the request without the conditional.

If a cache uses a received 304 response to update a cache entry, the cache MUST update the entry to reflect any new field values given in the response.

Also read this related topic What is the difference between HTTP status code 200 (cache) vs status code 304?

I've cleared the cache and checked again, when I go to network on browser debugging and checked the css and js it's not there anymore. — mirfan899, Apr 24 '15 at 07:18
css and js files it has status 304 but when I access it with the url it shows the index.html for every css and js file. — mirfan899, Apr 24 '15 at 09:38
@mirfan899 sorry, I don't understand. My answer was not helpful, or? — Tim, Apr 24 '15 at 09:48
/app/components/version/interpolate-filter.js this is the path for js file when I open it on browser it displays the contents of index.html not js. I think it's related to google app engine issue, because on my local machine app is working fine but on google app engine is behave differently. — mirfan899, Apr 24 '15 at 10:05
@mirfan899 oh in that case I'm not sure I can help you further — Tim, Apr 24 '15 at 10:27

mikaraento · Answer 2 · 2016-01-07T08:33:15.300

Your url routing in app.yaml is incorrect for what you are trying to achieve. You are requesting javascript files with urls like /app/js/foo.js. Your routing

url: js
static_dir: app/js

matches url paths beginning with 'js'

url: (.*)/.*
static_files: app/index.html

matches all paths with a slash in them (e.g., your-app.appspot.com/app/js/app.js) and returns app/index.html for them.

The urls in app.yaml are regexps that need to match the full path, not directories or prefixes.

Static assets not working on google app engine

2 Answers2