Flask Templates couldn't load css - python

I followed this tutorial for develop templates with flask http://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-ii-templates
My file tree is the next one:
/static
/js
bootstrap.min.js
jquery_1.11.3.js
/css
bootstrap.min.css
/images
/templates
index.html
/python_venv
server.py
server.py code:
#app.route('/subdomain/')
def getPrevisionPoblacion():
return render_template('index.html')
And css link inside index.html code is the following:
<script src="/static/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/static/css/bootstrap.min.css"/>
<script src="/static/js/jquery_1.11.3.js"></script>
nginx config:
location /subdomain/{
root /apps/subdomain/static;
uwsgi_pass unix:///tmp/subdomain.sock;
include uwsgi_params;
}
When I check it on Chrome, the index didn't load the CSS files. I checked the network with Developer's tools and the error is 404.
I tried also similar code that i saw on this unresolved question without success
Inline CSS background:url() not working in Jinja2 template
Any help about this ?

The problem was the server.
I had to serve static folder for flask template can load css.
I wrote in nginx config file the next:
location /subdomain/static)/ {
root /opt/apps/content_folder/static;
}
I don't use url_for() function y wrote the resource's URL as:
static/css/my_css_template.css
Finally check out #app.route() inside the file that render the template was correct then flask template could access to css, images and js.

if you put the static files directly under the /static folder, this should work
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='bootstrap.min.css') }}">
if you do not want that, follow the instructions in this questions approved answer,
Link to Flask static files with url_for

Related

Static folder problems on multiple apps project on django

I'm new on Django and I have some problems with the static folder.
I created a "static folder" on the project root and inside I put folders for each app.
Django admin page is charging correctly
But CSS, JS, images and others on my index isn't.
How can I avoid have this problems in the future? For your answers, thank you so much.
settings.py
I set the {% load static %} in my html document
and i write the static tag like this example:
<link rel="stylesheet" href="{% static 'principal/css/bootstrap.min.css' %}" type="text/css">
Yo haven't created STATIC_DIRS where the django will find CSS,javascript files and the create the STATIC_ROOT where the django will store all the files
then run python manage.py collectstatic to let setup all the files

Flask is failing to retreive a random picture from directory [duplicate]

How do you use url_for in Flask to reference a file in a folder? For example, I have some static files in the static folder, some of which may be in subfolders such as static/bootstrap.
When I try to serve a file from static/bootstrap, I get an error.
<link rel=stylesheet type=text/css href="{{ url_for('static/bootstrap', filename='bootstrap.min.css') }}">
I can reference files that aren't in subfolders with this, which works.
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='bootstrap.min.css') }}">
What is the correct way to reference static files with url_for? How do I use url_for to generate urls to static files at any level?
You have by default the static endpoint for static files. Also Flask application has the following arguments:
static_url_path: can be used to specify a different path for the static files on the web. Defaults to the name of the static_folder folder.
static_folder: the folder with static files that should be served at static_url_path. Defaults to the 'static' folder in the root path of the application.
It means that the filename argument will take a relative path to your file in static_folder and convert it to a relative path combined with static_url_default:
url_for('static', filename='path/to/file')
will convert the file path from static_folder/path/to/file to the url path static_url_default/path/to/file.
So if you want to get files from the static/bootstrap folder you use this code:
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='bootstrap/bootstrap.min.css') }}">
Which will be converted to (using default settings):
<link rel="stylesheet" type="text/css" href="static/bootstrap/bootstrap.min.css">
Also look at url_for documentation.
In my case I had special instruction into nginx configuration file:
location ~ \.(js|css|png|jpg|gif|swf|ico|pdf|mov|fla|zip|rar)$ {
try_files $uri =404;
}
All clients have received '404' because nginx nothing known about Flask.
The primary configuration file is /etc/nginx/nginx.conf on Linux. It may be similar on Windows.

How to handle favicon request in Django rest framework?

I am coming from Node.js and I have a nextjs frontend that communicates with a Django REST API. However, each time I make a request to my Django API, the app makes an additional request:
GET /favicon.ico
I've tried to add favicon route in urls.py
favicon_view = RedirectView.as_view(url='/static/images/favicon.ico', permanent=True)
url(r'^favicon$',favicon_view)
But it doesn't works.
Problem is in the regex
...
url(r'^favicon\.ico$', favicon_view),
...
As per regex $ indicates the end of the string so whole URL needs to put before this
you dont a view for favicon if you setup your static root in settings.py you go to your frontend and use load static tag
{% load static %}
and in favicon link you link it
<link rel="icon" href="{% static 'images/favicon.png' %}" sizes="16x16" type="image/png">
after that you run python manage.py collectstatic

Serve static files located under Flask blueprint folder

I have a Flask blueprint that contains templates and static files. The template is rendered correctly but the linked CSS file returns 404 not found. How do I serve static files that are located under a blueprint's folder?
app/
__init__.py
auth/
__init__.py
static/
style.css
templates/
index.html
auth = Blueprint('auth', __name__, template_folder='templates')
#auth.route('/')
def index():
return render_template('index.html')
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
Tell the blueprint where its static folder is by passing static_folder, then use url_for to generate urls to the static route on the blueprint. This is described in the docs.
auth = Blueprint('auth', __name__, template_folder='templates', static_folder='static')
url_for('auth.static', filename='style.css')
This solution only works if the blueprint has a url_prefix. As per the docs:
However, if the blueprint does not have a url_prefix, it is not possible to access the blueprint’s static folder. This is because the URL would be /static in this case, and the application’s /static route takes precedence. Unlike template folders, blueprint static folders are not searched if the file does not exist in the application static folder.
In this case, one solution might be to put the stylesheet into the main static directory.

use a css stylesheet on a jinja2 template

I am making a website using html, css, flask and jinja2.
I have a page working on a flask server, the buttons and labels etc. are displayed, but the css stylesheet I have is not loaded in.
How would I link a stylesheet to a jinja2 template. I have looked around on the internet but cannot find out how.
Here is the css stylesheet link; should I change this, or the python code?
<link rel="stylesheet" type="text/css" href="styles.css">
here is my flask code:
#app.route('/')
def resultstemplate():
return render_template('questions.html', head='Welcome!')
here are the locations of the files:
/python-code.py
/templates/template.html
/templates/styles.css
All public files (the ones that are not processed, like templates or python files) should be placed into dedicated static folders. By default, Jinja2 has one static folder called static.
This should fix your problem:
Move /templates/styles.css to /static/styles.css
Update your code with following code, that will be translated into correct file location:
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
More info on static files in Jinja2 is here.
<link rel="stylesheet" type="text/css" href="styles.css">
href value must be within quotes.
make sure the file name and path are proper
OR try the below
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"/>
The order of handler might cause the problems:
url: /stylesheets static_dir: stylesheets
url: /.* script: helloworld.application
will work instead of
url: /.* script: helloworld.application
url: /stylesheets static_dir: stylesheets
you should use the super() block style .
see the code below:
{% block style %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}"/>
{% endblock %}
Tried almost every solution on Stack Overflow. It only worked for me when I placed the static folder in the same directory as my run.py file.
I changed my folder structure from:
app/
views
static
templates
run.py
To:
app/
views
templates
static
run.py
I guess moving the run.py instead would work too. Have a look at this Jinja Templating Tutorial for extra info. Not sure why I had to change the structure for it to work though.
To add to what's been said here, be sure to update Jinja2 to v2.10, as lesser versions seem to cause this same bug. Cheers!

Categories

Resources