Google functions don't find static files css / js

Question

I'm trying to serve a web page from google functions in python using flask / jinja. The trouble is that google functions seems can't find my static files (js/css) as if I merge css / js in my html then it work well.
The error is then : Resource interpreted as Stylesheet but transferred with MIME type text/html : http://MyGoogleCloudFunctionPath.net/static/styles/main.css
My folder structure is:
app.py
app.yaml
static/js/reader.js
static/css/main.css
templates/index.html

In my html file i'm calling my file this way

    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/main.css') }}">
    <script type="text/javascript" src="{{ url_for('static', filename='js/reader.js') }}"></script>

And I added a Yaml as adviced here [google static files][1]

handlers:
- url: /static
  static_dir: static
- url: /css
  static_dir: static/styles
- url: /js
  static_dir: static/js

Also i'm using HTTP as I load ressource which are http from other sites.
In the end I think google is not looking in the local files but trying to access www.googlefunctions/FOLDER_PATH/files
[1]: https://cloud.google.com/appengine/docs/standard/python/getting-started/serving-static-files

guillaume blaquiere · Accepted Answer · 2021-04-12 11:25:00Z

1

Wait, you have mixed products. Firstly, Cloud Functions allow you to serve only one endpoint with a backend (here in python). You can't serve static files from the function deployment

Secondly, the app.yaml file that you mention is a App Engine config file, not a Cloud Functions.

In your case, the simplest is to deploy on App Engine, and to stick to only one product (if you want to use Cloud Functions, I recommend to also use Cloud Storage for the static files and to put a load balancer in front of both to route the request accordingly)

answered Apr 12, 2021 at 11:25

guillaume blaquiere

76.6k3 gold badges65 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lowteast Over a year ago

But then why my html is rendered ? I mean, can't I load css / js with my html over functions ? With jinja / flask ?

guillaume blaquiere Over a year ago

Your html is rendered because it is provided by the Cloud Functions body. If you embed the CSS and JS in the HTML that answer your Cloud Function, you can have a perfect rendering. But the answer weight will be heavy and the user experience degraded. In addition, if you have a lot of request/users, you will pay much more in egress because you want be able to cache these static content in your browser. So, you can, but not a good idea!

Collectives™ on Stack Overflow

Google functions don't find static files css / js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related