I'm using bottle (the python webframework) to familiarize myself with html, js and css and using localhost to access the site. I can't quite get the css file to be applied to the site that the templates link to. Sometimes it works, but when I edit the file, it doesn't update and even loses the file and can't find it, even after restarting the server. The Console gives the 404 error (file not found), even though I have not moved it.
I first noticed the issue when the CSS wouldn't update in the browser when I refreshed. After clearing out the cache every time I edited, I found the 404 not found issue. I've validated the css file to check if a synthax error was the issue. It came back clean. I redownloaded the bottle.py file in case it needed an update. Still the same result. I also triple checked the link path, even tried to put them all into the same folder with no change.
Here is my file structure:
project folder
static
css
main.css
views
home.tpl
bottle.py
server.py
start.bat (starts the server)
Here is the code in server.py
from bottle import route, run, template
#route('/')
def home():
return template('home')
run(host='localhost', port=8080, debug='True', reloader='True')
Here is the template home.tpl:
<!DOCTYPE html>
<html>
<head>
<title>Bottle Site</title>
<link rel="stylesheet" type="text/css" href="/static/css/main.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Header!</h1>
</div>
<div id="navigation">
<ul>
<li>Home</li>
</ul>
</div>
<div id="section">
Section text!
</div>
<div id="footer">
© 2019 - <b href="#" id="dev">Footer/b>
</div>
</div>
</body>
</html>
I'd like to reliably be able to apply the css to the site without it crashing and sometimes not finding the file. Whenever I paste a fresh copy of my css file and start the server, it works fine until I try and change the file (a background color, for example. Nothing syntax breaking) but it doesn't update. when I clear the cache, it turns into a plane html file and the console reads:
"GET /static/css/main.css HTTP/1.1" 404 764
I just figured it out.
In the server.py file, you apparently need a:
#route('/static/<filename:path>')
def send_static(filename):
return static_file(filename, root='./static/')
to give the server a route that it can access and find the files (i think).
So in the templates, to show it where they are, you can say:
<link rel="stylesheet" type="text/css" href="/static/css/main.css" />
And it will work fabulously every time. :)
Why without the route it sometimes found the file and sometimes not will forever be a mystery of computer science.
Routes are hard.
Have a nice day! :)
I also like to use whitenoise with bottle.
from whitenoise import WhiteNoise
...
botapp = WhiteNoise(botapp)
botapp.add_files(staticfolder, prefix='static/')
Related
I try to connect a Django channels Consumer to a HTMX ext-ws element, but I can't get a step further.
class MessageConsumer(WebsocketConsumer):
def connect(self):
self.accept()
print("connect")
#self.send(
# "type": "websocket.send",
# "text": "..."
#)
...
<head>
...
<script src="{% static 'common/js/htmx/htmx.min.js' %}" defer></script>
<script src="{% static 'common/js/htmx/ext/ws.js' %}" defer></script>
...
</head>
...
The HTMX.js and the ws.js gets loaded correctly at the client's browser.
<div id="messages-container"
hx-ws="connect:/ws/messages/"
{# hx-ext="ws" ws-connect="/ws/messages/" does not work at all #}
>
<div id="message"></div>
</div>
If I use the old HTMX-builtin hx-ws method, at least the websocket connects. But I can't get a message to the HTMX element (I thought the #message div should be replaced).
If I use the new-style (HTMX extension) syntax (hx-ext="ws" ws-connect...)
Can anyone point me to the right direction?
As per docs you need to also include hx-swap-oob="true" attribute into the html that you send back from websocket:
See example from htmx GH:
https://github.com/bigskysoftware/htmx/blob/master/test/servers/ws/server.go#L24
When using the plugin version, what worked for me was removing the defer attribute from htmx related script tags.
Not sure why including defer is causing the issue though.
Update:
A GH issue has been opened by OP:
https://github.com/bigskysoftware/htmx/issues/957
I have the next problem:
Im ceating a basic django webpage using HTML and CSS. The issue is that when I try to make the href from the HTML file to the CSS one:
<link rel="stylesheet" type="text/css" href="modelado.css">
It doesn't work correctly. my HTML file called "inicio.html" and "modelado.css" are in the same folder, but once I make the href, the console says this:
Not Found: /inicio/modelado.css
I think that the console is trying to find a folder called "inicio", but that's impossible since inicio is the HTML file from where I am running the program.
What I want to know is if there is another way to write the direction, because that directory doesn't exist.
I also think that this is a django related problem, because when I only use HTML, that line of code actually works when the files are in the same folder.
Thanks!
CSS is not a dynamic file (it is static) so by using
{% load static %}
<link rel="stylesheet" href="{% static 'yourstyle.css' %}">
you can load static files (like css).
More info here
I'm trying do develop a very simple web app using flask, following the example from this link.
My problem is: I want to show images from my file system in that page but it seems like browsers are protected against that. I have to use something like:
<img src="http://aMessyURL.png">
Instead of being able to use something like:
<img src="images/myImageName.png">
So, I can I (dynamically) show images from my file system?
You should be able to do it when hosting a simple server:
https://docs.python.org/2/library/simplehttpserver.html
This should at least allow you to load files in the same folder as your code.
Flask interprets <img src="images/myImageName.png"> as:
app/images/myImageName.png
Normally, Flask projects have a static folder inside app (app/static) which contains your CSS, JS and images. You can either render them like above or use url_for:
<link rel="shortcut icon" href="{{ url_for('static', filename='img/favicon.png') }}">
Which renders fully as:
<link rel="shortcut icon" href="/static/img/favicon.png">
You Have to specify static root path and then use code in html below
app = Flask(__name__, static_url_path='')
In HTML
<img src="/static/images/myImageName.png">
My question is similar to several others on this site, but the answers I find there aren't working for me.
I'm learning Flask. I'm running Flask 0.10.1 and Python 2.7, on an Ubuntu 10.04 machine using a Vagrant VM.
I've tried countless suggestions from SO, the Flask docs, and Miguel Grinberg, without success.
So I'm showing the simplest version that I thought could work (but doesn't) for your perusal.
The commented-out substitute lines (in page_a.html and page_b.html) do work but are hideous.
First, here's the output of 'tree' on my project root:
And here are the files (minus a bit of boilerplate in the .html)
page_a.html:
<head>
<link rel="stylesheet" href="styles.css">
<!-- <link rel="stylesheet" href="static/styles.css"> -->
</head>
<body>
<h1>page_a</h1>
<img src="an_image.png">
<!-- <img src="static/an_image.png"> -->
to page b
</body>
page_b.html:
<head>
<link rel="stylesheet" href="styles.css">
<!-- <link rel="stylesheet" href="../../static/styles.css"> -->
</head>
<body>
<h1>page_b</h1>
<img src="../../static/an_image.png">
<!-- <img src="../../static/an_image.png"> -->
to page a
</body>
init.py:
from flask import Flask
app = Flask('my_pages')
import my_pages.views
runserver.py:
from my_pages import app
app.run(host='0.0.0.0', port=5000, debug=True)
views.py:
from my_pages import app
from flask import render_template
#app.route('/')
#app.route('/page_a')
def page_a():
return render_template('page_a.html')
#app.route('/pages/page_b/')
def page_b():
return render_template('page_b.html')
styles.css:
body {
background-color: green;
}
This version does work when, in page_a.html and page_b.html, I use the commented-out lines (instead of the lines above them).
Here's the output of runserver.py when I access page_a.html:
"GET /page_a HTTP/1.1" 200 -
"GET /styles.css HTTP/1.1" 404 -
"GET /an_image.png HTTP/1.1" 404 -
and page_b.html.
"GET /pages/page_b/ HTTP/1.1" 200 -
"GET /pages/page_b/styles.css HTTP/1.1" 404 -
(this last shows 'an_image.png' from my 'styles' directory)
My questions: What am I missing? Can this setup be made to work without a major refactoring?
I of course don't want to hard-code the full path to every static file.
Also, in the real application, the URLs run several levels deep -- e.g.,
http://localhost:5000/book/<id_1>/chapter/<id_2>/page
Many thanks to anyone who might reply!
You aren't telling Flask that the files are in your static folder. The easiest way to do that is with url_for.
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
You could use url_for to serve the static files. An example can be found here.
PS: Unless you are making something really large, serving them by using '/static/file.css' should work fine. In production environments it's better to get Apache or nginx to serve static files.
I am using new recaptcha2 and everything seems to work flawlessly on all modern browsers, however I have a problem only with IE8.
Captcha load properly on second and next visit on the page, but never on first load or in Private Mode.
What is even more strange, google recaptcha 2 page demo doesn't have this problems. I am using django-nocaptcha-recaptcha package, which is based on recaptcha-client for python, so I believe my configuration is pretty standard.
Console doesn't show any errors. Divs are not populate by recaptcha code.
Google on their recaptcha2 developers guide suggest to use a snipet like this:
<html>
<head>
<title>reCAPTCHA demo: Simple page</title>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<form action="?" method="POST">
<div class="g-recaptcha" data-sitekey="your_site_key"></div>
<br/>
<input type="submit" value="Submit">
</form>
</body>
</html>
django-nocaptcha-recaptcha use similar piece of code and also use a line like this:
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
This suppose to cause a problem, since ascync and defer are supported in IE 10+. In my case, when I used:
<script src="https://www.google.com/recaptcha/api.js"></script>
Problem disappeared :)