We Keep Coding

Stripe flask/python loading html but not css. Directory issue?

so I have tried paying some tutors to look at this and they cannot seem to find the issue. I have a really good feeling it is a directory issue.
Folder directory organization
App.py is outside all folders, inside a template folder is pricing.html, outside is another folder named css which has pricing.css.
I run my app.py which loads pricing.html to be able to press a button which goes to stripe checkout. The issue is, app.py finds the pricing folder, but the pricing.css does not load. Here is the html code in pricing.html:
<link rel="stylesheet" type="text/css" href="/css/style.css" media="screen">
Here is the app.py code:
from flask import Flask, redirect, request, render_template
import stripe
app = Flask(__name__,static_url_path="",static_folder="templates")
stripe.api_key = 'sk_test_51KzqK9Hj2B2Quz911XrP11cB4Jb2ESrDCelSpRIZBqa18TWO9bGKlyuWsmiNeGYEHw4224xx5ghUWDaTQOukRjcf00rHXcZGYU'
YOUR_DOMAIN = "http://localhost:5000"
#app.route('/create-checkout-session', methods=['POST'])
def create_checkout_session():
try:
checkout_session = stripe.checkout.Session.create(
line_items = [
{
'price': 'price_1KzrAtHj2B2Quz91wMDanJjz',
'quantity':1
}
],
mode="payment",
success_url=YOUR_DOMAIN + "/success.html",
cancel_url=YOUR_DOMAIN + "/cancel.html"
)
except Exception as e:
return str(e)
return redirect(checkout_session.url,code=303)
if __name__== "__main__":
app.run(port=5000,debug=True)
If I move the css folder inside the templates folder, the css will load, but I would have to change the html to all the other template and also I like this folder organization. Any thoughts?
Here is what is returned in terminal when I run it:
[20/May/2022 18:04:50] "GET /pricing.html HTTP/1.1" 200 -
[20/May/2022 18:04:51] "GET /css/style.css HTTP/1.1" 404 -
[20/May/2022 18:04:51] "GET /css/Pricing.css HTTP/1.1" 404 -
[20/May/2022 18:04:51] "GET /javascript/jquery.js HTTP/1.1" 404 -
[20/May/2022 18:04:51] "GET /javascript/nicepage.js HTTP/1.1" 404 -
[20/May/2022 18:04:51] "GET /css/images/GainesOpusInstitute4.png HTTP/1.1" 404 -

I believe that for flask to serve your css file it needs to be in the /static directory. Try moving your /css and /javascript folders into a directory at the same level called /static.
Then change your link to be:
<link rel="stylesheet" type="text/css" href="/static/css/style.css" media="screen">
See https://flask.palletsprojects.com/en/2.1.x/quickstart/#static-files for more info.

Flask when I wrote app.route('/home') and edited it app.route('/home/') and restore it

I'm studying flask, and got problems.
When I wrote code like this:
#app.route("/reference")
def reference():
return render_template("reference.html", css="reference", records=records)
The page http://127.0.0.1:5000/reference was working.
Then I found 'trailing slash' in flask document.
I wanted to apply it, so I edited code like this:
#app.route("/reference/")
def reference():
return render_template("reference.html", css="reference", records=records)
It was working too ! http://127.0.0.1:5000/reference/
But some problems were coming.
The browser couldn't read my css file (in html link.. href=blabla) with a changed log in python terminal.
GET /static/css/style.css HTTP/1.1 << before changing
GET /reference/static/css/style.css HTTP/1.1 << after changing
I redirected css file path,
href="static/css/style.css"
to
href="../static/css/style.css"
And It works.
I wanted to understand how 'trailing slash' do.
So I reset my code to first code.
Then 404 not found error raised and I got a not changed log.
"GET /reference HTTP/1.1" << log for first code
"GET /reference/ HTTP/1.1" << log for second code
"GET /reference/ HTTP/1.1" << log for reset code (== first code)
I got a question. What is happend?
I don't understand why it doesn't run like before.
I read https://flask.palletsprojects.com/en/2.0.x/quickstart/#unique-urls-redirection-behavior
But I still don't understand what is going on.
Why the GET path changed.. why the GET path doesn't changed.. why..
My mind is broken and I can't sleep.. please help me..

On top of what the unique-urls-redirection-behavior document says, when you use tags like <img src='some_url'> or <link href='some_url'> the behaviour may be different, as these URLs are loaded by the browser.
So with a route decorator like #app.route("/reference") which loads in the browser as example.com/reference a link tag with href="subpath/file.css" causes the browser to load that resource from example.com/subpath/file.css
On the other hand, with a route decorator like #app.route("/reference/") (with the trailing slash) which loads in the browser as example.com/reference/ (again, with the trailing slash) a link tag with href="subpath/file.css" causes the browser to load that resource from example.com/reference/subpath/file.css
This could explain the behaviour you are seeing.
To put this another way, consider this test app:
from flask import Flask, render_template
app = Flask(__name__)
#app.route('/a')
def a(): return render_template('index.html')
#app.route('/b/') # Note trailing slash
def b(): return render_template('index.html')
Paired with the following template at templates/index.html:
<html>
<head>
<link rel='stylesheet' href='subpath/file.css' />
</head>
Then make some hits and observe the asset requests in the console (they will give 404 errors because I haven't actually created the CSS files, this is just to show what the browser requests):
Load URL: http://localhost:5000/a:
"GET /a HTTP/1.1" 200 -
"GET /subpath/file.css HTTP/1.1" 404 -
Load URL: http://localhost:5000/b/:
"GET /b/ HTTP/1.1" 200 -
"GET /b/subpath/file.css HTTP/1.1" 404 -
Of course the correct way to include these assets is to use the url_for function.
So if I update the template to instead contain:
<link rel='stylesheet' href='{{ url_for("static", filename="file.css") }}' />
Then make the same request:
Load URL: http://localhost:5000/a:
"GET /a HTTP/1.1" 200 -
"GET /static/file.css HTTP/1.1" 404 -
Load URL: http://localhost:5000/b/:
"GET /b/ HTTP/1.1" 200 -
"GET /static/file.css HTTP/1.1" 404 -
As you can see here, the correct path for static assets will always be rendered, regardless of whether the endpoint has a trailing slash or not.

Flask is loading static files from a different path when a route is called [duplicate]

This question already has answers here:
Link to Flask static files with url_for
(2 answers)
Why use Flask's url_for?
(1 answer)
Closed 3 years ago.
I have 2 route functions, one to get all users and one to get a specific user. Both functions render the same template. The first function works fine, the problem is with the second one. When rendering the template it tries to load static files from another directory.
I tried using a different template for each one and the problem remained.
Get all users route:
#app.route('/users')
def list_users():
users = Users.query.all()
return render_template('users.html', users=users)
Get one user route:
#app.route('/users/<username>')
def get_user(username):
user = Users.query.filter_by(name=username).first()
if user:
return render_template('users.html', users=[user])
Template rendered by get_user route function:
127.0.0.1 - - [07/Aug/2019 13:35:56] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [07/Aug/2019 13:35:57] "GET /favicon.ico HTTP/1.1" 404 -
127.0.0.1 - - [07/Aug/2019 13:36:06] "GET /users/Ana HTTP/1.1" 200 -
127.0.0.1 - - [07/Aug/2019 13:36:06] "GET /users/static/vendor/fontawesome-free/css/all.min.css HTTP/1.1" 404 -
127.0.0.1 - - [07/Aug/2019 13:36:06] "GET /users/static/css/sb-admin-2.min.css HTTP/1.1" 404 -
127.0.0.1 - - [07/Aug/2019 13:36:06] "GET /users/static/img/uatronica_black_transparent.png HTTP/1.1" 404 -
127.0.0.1 - - [07/Aug/2019 13:36:06] "GET /users/static/vendor/jquery/jquery.min.js HTTP/1.1" 404 -
127.0.0.1 - - [07/Aug/2019 13:36:06] "GET /users/static/vendor/bootstrap/js/bootstrap.bundle.min.js HTTP/1.1" 404 -
127.0.0.1 - - [07/Aug/2019 13:36:06] "GET /users/static/vendor/jquery-easing/jquery.easing.min.js HTTP/1.1" 404 -
127.0.0.1 - - [07/Aug/2019 13:36:06] "GET /users/static/js/sb-admin-2.min.js HTTP/1.1" 404 -
127.0.0.1 - - [07/Aug/2019 13:36:06] "GET /users/static/vendor/chart.js/Chart.min.js HTTP/1.1" 404 -
127.0.0.1 - - [07/Aug/2019 13:36:06] "GET /users/static/js/demo/chart-area-demo.js HTTP/1.1" 404 -
127.0.0.1 - - [07/Aug/2019 13:36:06] "GET /users/static/js/demo/chart-pie-demo.js HTTP/1.1" 404 -
It is trying to load css files from /users/static/ instead /static/. Why is that?

You are using relative paths in your template, so the final URL is relative to whatever URL you're at. When viewing /users, if the template links to static/css/admin.css, it becomes /users/static/css/admin.css. If the path starts with a /, it is an absolute URL and won't do this.
Instead, use url_for, which generates absolute URLs no matter where you are and how the app is deployed.
<link rel="stylesheet" href="{{ url_for('static', filename='css/admin.css') }}>
This becomes /static/css/admin.css.

Please use the below code.
Get one user route:
#app.route('/users/<username>')
def get_user(username):
user = Users.query.filter_by(name=username).first()
return render_template('users.html', users=user)
Additionally please share the html page users.html for review.

Django/Mezzanine: CSS "#import url()" not work properly

I have built the default mezzanine site.
However, in the admin page of the site, only part of the styles are applied to the site.
And I see some error logs
[18/Apr/2017 00:03:47] "GET /admin/login/?next=/admin/ HTTP/1.1" 200 4251
[18/Apr/2017 00:03:47] "GET /static/grappelli/css/base.css/reset.css HTTP/1.1" 4
04 1709
[18/Apr/2017 00:03:47] "GET /static/grappelli/css/base.css/typography.css HTTP/1
.1" 404 1724
[18/Apr/2017 00:03:48] "GET /static/grappelli/css/base.css/modules.css HTTP/1.1"
404 1715
[18/Apr/2017 00:03:48] "GET /static/grappelli/css/base.css/tables.css HTTP/1.1"
404 1712
[18/Apr/2017 00:03:48] "GET /static/grappelli/css/base.css/forms.css HTTP/1.1" 4
04 1709
[18/Apr/2017 00:03:48] "GET /static/grappelli/css/base.css/widgets.css HTTP/1.1"
404 1715
[18/Apr/2017 00:03:48] "GET /static/grappelli/css/base.css/webkit-gradients.css
HTTP/1.1" 404 1742
[18/Apr/2017 00:03:48] "GET /static/grappelli/css/img/grappelli-icon.png HTTP/1.
1" 404 1721
It seems paths of some css files are wrong.
The path shouldn't be /static/grappelli/css/base.css/xxxx.css but /static/grappelli/css/xxxx.css
When I dig into the /static/grappelli/css/base.css file, I see this file imports those wrong path css files like this
...
#import url('reset.css');
#import url('typography.css');
#import url('modules.css');
#import url('tables.css');
#import url('forms.css');
#import url('widgets.css');
...
How to fix it?

I had the same issue on Ubuntu 16.04.3 with python3.5.1. This is an issue that has be noted in mezzanine bugs but I couldn't find a workaround.
I upgraded to ubuntu 17.04 with python3.5.3 and there was no issue, some deep dark magic is happening in grappelli here.

Can't set background image in flask made web-page

I'm trying to put background image inside HTML document using following code
<body style="background-image: url( {{url_for('static', filename='img/library2.jpg') }} )">
But it just doesn't work.
My console output is:
127.0.0.1 - - [23/Jan/2017 23:21:12] "GET /index HTTP/1.1" 200 -
127.0.0.1 - - [23/Jan/2017 23:21:12] "GET /static/styles.css HTTP/1.1" 200 -
127.0.0.1 - - [23/Jan/2017 23:21:15] "GET /static/img/favicon.ico HTTP/1.1" 200
So I don't even have get request for the img/library2.jpg.
Not sure what I'm missing

It seems you put style in one file but jinja uses different file to render page.
I don't know what you have in base.html and index.html but usually <body> is in base.html and you should use style in this file.