Hi I'm new to using python with web programs and I'm trying to make a basic website that uses a CSS style sheet. I have three files: app.py, index.html, and style.css. They are all in the same directory. When I run app.py and go to localhost:8080, it displays "Hello World!", but it has not style from the style.css file and my terminal says "HTTP/1.1 GET /style.css" - 404 Not Found. When I just open my index.html file in chrome without using the app.py file, though, it does have the style formatting. Any help with this? Thanks in advance. My code is as follows:
app.py:
import web
urls = (
'/', 'Index'
)
app = web.application(urls, globals())
web.config.debug = True
class Index(object):
def __init__(self):
self.render = web.template.render('.')
def GET(self):
return self.render.index()
if __name__ == '__main__':
app.run()
index.html:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
<title>Basic Web Project</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
style.css:
p {
color: green;
font-size: 22px;
}
When you specify <link type="text/css" rel="stylesheet" href="style.css" /> you say to your web browser the following thing : The style.css is on the same level as the index.html
Let me give you and example:
/app
index.html
style.css
if you open index.html from your browser you go to the following url
file://some/directory/app/index.html
)it is the same as file://some/directory/app/ because the browser will always search for the index when displaying a web page )
and when in this index.html the browser finds the <link> that specified by you it will search for that style.css under the following url : file://some/directory/app/style.css
and of course that it will find that file.
Now the fun part.
When you open localhost:8080 it will display localhost:8080/index.html which works because your web app ( that python script that you run ) knows what to do when somebody goes to that url ( because you defined it in the urls variable and you created that class )
But when on this page the browser find the <link> tag he tries to go to localhost:8080/style.css which your web app dose not know how to handle because you did not specified it in your app .
Now the solution:
You must define a url for /style.css and a class that will render that web page for you.
Have you tried to add style.css to urls, your application knows nothing about /style.css get request, probably that's why it returns 404.
Related
I intend to apply basic CSS over my HTML under my python/ flask application. I got a HTML with CSS file from getbootstrap.com.
Link: https://getbootstrap.com/docs/5.2/examples/cover/
The HTML loads up completely when I run it locally (outside the project) but it does not load properly when I try running the application using flask on dev (localhost).
Can someone please suggest a fix here. I have tried placing the CSS file in static folder and then loading it with below approach (adding link to CSS file in my HTML):
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheets/cover.css') }}">
My project directory looks like:
env
static > stylesheets > cover.css
templates > index.html
app.py
app.py file:
from flask import Flask, render_template
app = Flask(__name__)
#app.route('/')
def base():
return render_template('index.html')
if __name__ == "__main__":
app.run(debug=True, port=5000)
By default it comes with the following link:
<link href="cover.css" rel="stylesheet">
After running the project, it looks like as attached under the snap. This means that the CSS is getting applied but not completely.
I'm trying to render my website inside of flask as I made a backend inside of it.
I've used both of the following codes:
def TestDir():
return render_template('Index/index.html')
and
def HomeDir():
return(open('Templates/Index/index.html').read())
but it shows all glitchy: https://i.1nch.dev/cdn/0pPwq1kDY2Oc9CMM.gif
But on my pc it shows normal: https://i.1nch.dev/cdn/l3LnfmUzyad78Nl5.gif
You need to have a static folder setup for your css and js files unless you override it when you initialize Flask.
Your app directory should look something like this:
/app
- app_runner.py
/templates
/Index
- Index.html
/static
/css
- style.css
To access the css file in your html use something like this:
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/style.css') }}">
I've built a Flask app, and I'm trying to figure out how to pass a variable into a link that is not hosted by me. Concretely, it's a completely different website that I have no control over.
I've tried
Link
However this did not capture the {{ variable}} , and in fact just resulted in domain.com.
I've looked into url_for but that only seems to work when its for your own website? I think?
e.g. localhost. This particular link prefix is for a completely different domain and host.
Any help appreciated. Thank you!
You need to pass the variable variable to your render template.
Eg:
from flask import Flask, render_template
app = Flask(__name__)
#app.route("/")
def index():
return render_template("index.html", variable="whatever")
if __name__ == "__main__":
app.run(debug=True)
Then in index.html:
<html>
<head>
<title>Your title</title>
</head>
<body>
Link <!-- This will go to http://domainname.org/whatever -->
</body>
</html>
I have an app i am making and i would like to hold all python code, css and js assets inside a folder and name it appropriately so that one person can do a complete module,test it and upload it to the main project.
I am planning to have something like this structure
index.py
global_assets
global_classes
global_html_components
home(assets(js,css,images),home.html,home_widget_1.html,home_widget_2.html,home_widget_3.html,controller.py,model.py)
services
products
dashboard
I have this script.py
from flask import *
app = Flask(__name__)
#app.route('/user/<uname>')
def message(uname):
return render_template('message.html',name=uname)
if __name__ == '__main__':
app.run(debug = True)
and message.html
<html>
<head>
<title>Message</title>
</head>
<body>
<h1>hi, {{ name }}</h1>
</body>
</html>
I want my app to have one entry at index.py such that i can visit urls of any of my modules and the page displays for instance in the code above
http://localhost:5000/home/user/admin where home is one of the folders i named above.
Is this kind of structure possible in flask?
I am trying to render a couple of files on Bottle web server. The first HTML file has a button which links to another file. So I need both of these to run on the server.
My (updated)Project structure is something like this
-app.py
-static
-css
bootstrap.css
bootstrap.min.css
-fonts
-js
jquery.js
etc etc
-index.html
-visualization.html
My index.html file has to be rendered first. From which the user has to option to click on a button which takes him to visualization.html.
My pages are not rendering. What could be the reason for this?
The routing snippet from app.py is as show below:
from bottle import route, run, template, static_file, response, request
#route('/noob')
def map():
return static_file('index.html',root = './static')
run(host='0.0.0.0', port='8030')
This is how I access those files in my index.html:
<script src="./static/js/jquery.js"></script>
<link href="./static/css/grayscale.css" rel="stylesheet">
I'm relatively new to Python and Bottle. Is this right? I get a 404 error
.
Also, how to I place two files on the bottle server. As explained above, a button in index.html links to visualization.html. So I'm guessing this should also be running on Bottle server. Do I run it in the same file? Different port?
Thanks in advance.
You need to put index.html in static folder.
-app.py
-static
various css and img files being used in my two html files
index.html
visualization.html
A better way for accessing static files and templates would be to rename index.html to index.tpl like this:
-app.py
-static
-js
bootstrap.min.js (example)
-css
-fonts
index.tpl
visualization.tpl
profile.tpl
And:
from bottle import route, run, template, static_file, response, request
#route('/noob')
def map():
return template('index.tpl')
#route('/profile')
def profile():
return template('profile.tpl')
#route('/static/<filepath:path>')
def server_static(filepath):
return static_file(filepath, root='./static/')
run(host='0.0.0.0', port='8030')
And in your tpl files use path like this:
<script src="/static/js/bootstrap.min.js"></script>
Hope this answers your question.