Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jinja2 link to static files

I am trying to understand how to create a link to static files in jinja2.

Everything I look up relates to Flask whereas I am using just webapp2 at this stage.

My main.py file looks as follows:

import os
import urllib

from google.appengine.api import users
from google.appengine.ext import ndb

import jinja2
import webapp2

JINJA_ENVIRONMENT = jinja2.Environment(
    loader=jinja2.FileSystemLoader(os.path.dirname(__file__)),
    extensions=['jinja2.ext.autoescape'],
    autoescape=True)

class MainPage(webapp2.RequestHandler):
    def get(self): 
    template = JINJA_ENVIRONMENT.get_template('/templates/base.html')  
    self.response.out.write(template.render())

class ConsultsPage(webapp2.RequestHandler):
    def get(self):
    template = JINJA_ENVIRONMENT.get_template('/templates/consults.html')  
    self.response.out.write(template.render())

class CreateConsultPage(webapp2.RequestHandler):
    def get(self):
    template = JINJA_ENVIRONMENT.get_template('/templates/create-consult.html')  
    self.response.out.write(template.render())

app = webapp2.WSGIApplication([
    ('/', MainPage),
    ('/consults', ConsultsPage),
    ('/schedule/create-consult', CreateConsultPage)
], debug=True)

My base.html template contains the links to the static files in "/css", "/js" "/images" etc.

When I look at the localhost:8080/ and localhost:8080/consults all the static files are working. Page looks fine.

However the next level in the structure localhost:8080/consults/create-consult is not linking to static files.

When I view source I see that the css link has rendered as localhost:8080/consults/css/style.css , when the actual location is localhost:8080/css/style.css.

I understand I may need to make all links dynamic via some environment variable called uri_for, but I can't find the correct way to implement this.

I tried to replace my css link with

href="{{ uri_for('static', filename='css/screen.css') }}"

I was told by App Engine uri_for not set.

Basically would like to know the correct process for setting uri_for and then how to incorporate it in the paths for my links to static files.

Any help appreciated.

like image 966
TimothyAURA Avatar asked Feb 06 '17 09:02

TimothyAURA


People also ask

How do I link a static file in Flask?

To use static files in a Flask application, create a folder called static in your package or next to your module and it will be available at /static on the application. app.py is a basic example of Flask with template rendering. After running app.py we will see the webpage in http://localhost:5000/.

What is the difference between Jinja and Jinja2?

Jinja, also commonly referred to as "Jinja2" to specify the newest release version, is a Python template engine used to create HTML, XML or other markup formats that are returned to the user via an HTTP response.

Does FastAPI use Jinja?

You can use any template engine you want with FastAPI. A common choice is Jinja2, the same one used by Flask and other tools.


1 Answers

uri_for() is a Flask-specific function; it matches the name static to a route, which in turn then can be used to generate a path (like /static/css/screen.css if the static route is configured to handle /static/<path:filename> urls).

You just need to hardcode the path as /css/screen.css, no need for functions.

Note the leading /; that makes it an absolute path, relative to your current host. For a page at http://localhost:8080/foo/bar, such a path is then prefixed with http://localhost:8080 to form http://localhost:8080/css/screen.css. When you deploy to the app engine, the hostname will be different.

You could store a prefix URL or path in a global, so you can easily swap out the path for a CDN later:

JINJA_ENVIRONMENT.globals['STATIC_PREFIX'] = '/'

and use that in your templates:

<style src="{{ STATIC_PREFIX }}css/screen.css"></style>

You can now alter all such URLs in one place, by setting the STATIC_PREFIX to a different value, including http://somecdn.cdnprovider.tld/prefix/.

like image 191
Martijn Pieters Avatar answered Oct 01 '22 15:10

Martijn Pieters