This question already has answers here:
How to serve static files in Flask
(24 answers)
Closed 4 hours ago.
plot.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../static/css/css5.css">
<title>Protein Structure Analyzer</title>
<script type="text/javascript" src="../static/jquery/jquery-3.6.3.js"></script>
<script src="../static/brython/Brython-3.11.1/brython.js"></script>
<script src="../static/brython/Brython-3.11.1/brython_stdlib.js"></script>
</head>
<body onload="brython()">
<div class="angry-grid">
<div class="header-div">SURPASS Plots</div>
<div class="plot-div"></div>
<div class="form-div">
<form></form>
</div>
<div class="footer-div">
Footer
</div>
</div>
<script type="text/python">
from PersistanceUtils import *
energy_list, time_list = PersistanceUtils.get_plot_data2("{{unique_key}}")
</script>
</body>
</html>
Debug
brython.js:9479 GET http://127.0.0.1:5000/PersistanceUtils.py?v=1676882840703 404 (NOT FOUND)
brython.js:9484 Error 404 means that Python module PersistanceUtils was not found at url http://127.0.0.1:5000/PersistanceUtils.py
brython.js:9479 GET http://127.0.0.1:5000/PersistanceUtils/__init__.py?v=1676882840718 404 (NOT FOUND)
brython.js:9484 Error 404 means that Python module PersistanceUtils was not found at url http://127.0.0.1:5000/PersistanceUtils/__init__.py
brython.js:9479 GET http://127.0.0.1:5000/static/brython/Brython-3.11.1/Lib/site-packages/PersistanceUtils.py?v=1676882840737 404 (NOT FOUND)
brython.js:9484 Error 404 means that Python module PersistanceUtils was not found at url http://127.0.0.1:5000/static/brython/Brython-3.11.1/Lib/site-packages/PersistanceUtils.py
brython.js:9479 GET http://127.0.0.1:5000/static/brython/Brython-3.11.1/Lib/site-packages/PersistanceUtils/__init__.py?v=1676882840753 404 (NOT FOUND)
brython.js:9484 Error 404 means that Python module PersistanceUtils was not found at url http://127.0.0.1:5000/static/brython/Brython-3.11.1/Lib/site-packages/PersistanceUtils/__init__.py
brython.js:14320 Traceback (most recent call last):
File "http://127.0.0.1:5000/plot#__main__", line 1, in <module>
from PersistanceUtils import *
ModuleNotFoundError: PersistanceUtils
There is a file named PersistanceUtils.py in the application root. The Brython script is unable to load it.
How can I load it?
You can place your python files for Brython inside the static folder. Then you import them with a script tag, whereby an id attribute has to be specified.
<script type="text/python" id="demo" src="{{ url_for('static', filename='demo.py') }}"></script>
In the import commando you now refer to the defined id of the module.
<script type="text/python">
from demo import *
# Use your import here.
</script>
Related
When opened directly, my html file will load my OpenLayers JavaScript file (which loads a map frame). However when I run the html from my Flask python app, the JavaScript file/object doesn't load (no map showing, just some heading text).
This issue appears to be sorted here:
External JavaScript file is not getting added when running on Flask
However due to my folder structure, I can't seem to get the .js to load. No errors, just no map loading in the page. I think I need some help with the syntax of the 'static' reference. I think this is the issue, however I am very new to website building. This is my project folder structure:
ol_app.py
/pages
olquickstart.html
/static
/scripts
ol_script.js
/libs
/v6.3.1-dist
ol.css
ol.css.map
ol.js
ol.js.map
My Flask python app:
from flask import Flask, render_template
import os
import webbrowser
from threading import Timer
template_dir = os.path.abspath(r'D:\PathToProject\ol_quickstart\pages')
app = Flask(__name__, template_folder=template_dir)
#home page
#app.route('/')
def index():
return 'OL QuickStart'
#openlayers test page
#app.route('/ol_qs')
def ol_qs():
return render_template("olquickstart.html")
#run app
def open_browser():
webbrowser.open_new('http://127.0.0.1:5000/')
if __name__ == "__main__":
Timer(1, open_browser).start();
app.run(port=5000)
my html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../libs/v6.3.1-dist/ol.css" type="text/css">
<style>
.map {
height: 900px;
width: 100%;
}
</style>
<script src="../libs/v6.3.1-dist/ol.js"></script>
<title>OpenLayers Quickstart</title>
</head>
<body>
<h2>OL Quickstart Map</h2>
<div id="js-map" class="map"></div>
<!-- <script src='../static/scripts/ol_script.js'></script> I USE THIS LINE WHEN OPENING THE HTML DIRECTLY WITHOUT FLASK-->
<script type="text/javascript"
src="{{ url_for('static', filename='scripts/ol_script.js') }}"></script>
</body>
</html>
Is this part the problem?
<script type="text/javascript"
src="{{ url_for('static', filename='scripts/ol_script.js') }}"></script>
Looks like you need to move the libs directory into static and then include those files with similar url_for functions to what you already have:
<link rel="stylesheet" type="text/css"
href="{{ url_for('static', filename='libs/v6.3.1-dist/ol.css') }}">
<script type="text/javascript"
src="{{ url_for('static', filename='libs/v6.3.1-dist/ol.js') }}"></script>
Your exsiting one for scripts/ol_script.js looks correct.
However to debug this yourself you should load the dev tools in your webbrowser and view the Network tab to ensure that each JS file loads sucessfully and doesn't 404.
Similarly the Console tab will show you any javascript errors within the page.
I was trying to host an existed project on Firebase which already have a css and js file. But it didn't seem to include my css and js files into the website.
I followed all of these steps:
https://www.youtube.com/watch?v=meofoNuK3vo&index=21&list=PLl-K7zZEsYLmnJ_FpMOZgyg6XcIGBu2OX
The project directory now looks like this:
\public (folder) (containing: index.html 404.html)
\css (folder) (containing: style.css)
\js (folder) (containing: index.js)
firebase.json
.firebaserc
Here is the website: https://together-cb.firebaseapp.com/
The index file looks like:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/style.css">
<!-- update the version number as needed -->
<script defer src="/__/firebase/4.8.0/firebase-app.js"></script>
<!-- include only the Firebase features as you need -->
<script defer src="/__/firebase/4.8.0/firebase-auth.js"></script>
<script defer src="/__/firebase/4.8.0/firebase-database.js"></script>
<script defer src="/__/firebase/4.8.0/firebase-messaging.js"></script>
<script defer src="/__/firebase/4.8.0/firebase-storage.js"></script>
<!-- initialize the SDK after all desired features are loaded -->
<script defer src="/__/firebase/init.js"></script>
<script src="/__/firebase/4.8.0/firebase.js"></script>
<script src="../js/index.js"></script>
</head>
<body>
<div class="main-view">
....
</div>
</body>
</html>
I had the same issue but I added this line below my body tag and it solved.
<script src="/__/firebase/6.1.1/firebase-firestore.js"></script>
also, you can see the instruction here
https://firebase.google.com/docs/web/setup
Make soure that all your assets(css,js,img) and html are in /public
I have a short question. I have no idea why this code isn't working, I tried different options to get my localhost.
I get this everytime I'm trying to load my localhost:
Refused to load the font 'data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAJs0ABMAAAABTVgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcaikRNkdERUYAAAHEAAAALQAAADIDDwH7R1BPUwAAAfQAABgwAABX1Oqq9j9HU1VCAAAaJAAAAXQAAALKqyaj7U9TLzIAABuYAAAAVgAAAGCRWm0zY21hcAAAG/AAAAGQAAAB6jHNvzdjdnQgAAAdgAAAAEYAAABGFNMQDmZwZ20AAB3IAAABsQAAAmVTtC+nZ2FzcAAAH3wAAAAIAAAACAAAABBnbHlmAAAfhAAAcrwAAN3gTmoUWWhlYWQAAJJAAAAAMQAAADYJ67FUaGhlYQAAknQAAAAeAAAAJA0SBixobXR4AACSlAAAAkgAAAOuDPhKF2xvY2EAAJTcAAABzAAAAdq5toTebWF4cAAAlqgAAAAgAAAAIAIJAfRuYW1...FGDtLEEpoJ0EKQpSxjOZ9YwUpaWcUaVnOFQ6xjLevZENrBN65yhrNc4w1vJUESJUmSJUVSJU3SJUMyJUuyJUdyOcd5LnGZ21zgInfYzAnJ4wY3JV8K2CGFUiTFUiKlZm9Da7NPswQb/TabrUrpUlZEdNuU6tyjK+1KpzJ8Xw81KjWlrrQrHUqnskxZrnQp/81zR9TUXE2z1vu9wUBdbU2LL1LSjYhOw1QdDDSFE6dR+VfDE3lHSF1pVzr+AG3To18AAHjaRc09DoJAFARgVmD5kX9WrYyYaOPewBpoaIwVm3gOaxtjpY0XeVgZL6cTs67d+2aSeU/2PhO7Wh35u35g7KaGlst+SZnqSOxxnNScuDz0FtlVQ7asyamah12M5Bcu4Ew1OODWGh7A1xo+4K00AsCfaYRV87IClljaY5ShXmcU6Z8x0sgbycFuj2ACxn+mYHIxzMBUGuZgtjEswHxhWIKFMBRgeTecgGL7oyIhPxkEU+kAAAABVlMCyQAA' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.
session.html Failed to load resource: the server responded with a
status of 404 (Not Found)
Here is my code:
import express = require ("express");
import { Request, Response } from "express";
import session = require('express-session');
let router = express();
router.listen(8080, "localhost", function () {
console.log(" Aufruf: http://localhost:8080/../../session.html");
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sessions</title>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/style.css">
<script language="javascript" type="text/javascript" src="/sessions/sessionServer.js"></script>
<script language="javascript" type="text/javascript" src="/sessions/session.js"></script>
<script language="javascript" type="text/javascript" src="/jquery/dist/jquery.js"></script>
</head>
the structure is:
Folder Sessions:
different folders
...
sessions
3.1 folders
3.2 ..
3.3 session.html
This question already has an answer here:
flask can not read static path and load Javascript files
(1 answer)
Closed 7 years ago.
I'm making a website using python with the flask framework and I can't seem to get my javascript page to work with the html the same way I did with my external css file. I'm not sure where the error is occurring, whether it's in my html head (below) where i'm linking the javascript, in the javascript file or in the python file.
<head>
<meta charset="UTF-8">
<link rel = "stylesheet" type="text/css" href="../static/HotelStyle.css">
<title> Hotel </title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="../static/hotel.js"></script>
<script type="text/javascript"></script>
</head>
if you've defined your static directory correctly for flask you should be able to use the correct url for your static files by using url_for. for example in this case it will be:
<head>
<meta charset="UTF-8">
<link rel = "stylesheet" type="text/css" href="{{ url_for('static', filename='HotelStyle.css') }}">
<title> Hotel </title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="{{ url_for('static', filename='hotel.js') }}"></script>
<script type="text/javascript"></script>
</head>
I am building a webapp using Maven, Spring 4, Angularjs and Thymeleaf. I create some Thymeleaf template ( in directoty templates/fragments ). I have attached a screenshot of my eclipse web project.
The problem i am facing is about referencing libraries and css file, i am getting 404 not found on firebug.
HTML (index.html)
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<script type="text/javascript" href="/js/lib/angular.js" th:src="#{/js/lib/angular.js}"></script>
<script type="text/javascript" th:src="#{/js/lib/ui-bootstrap-tpls-0.11.0.js}"></script>
<title>Jobly - login page</title>
</head>
<body>
<div th:include="templates/fragments/header::header"></div>
<h1>Hello on a second page!</h1>
<p>Click <a th:href="#{/hello}">here</a> to go back.</p>
<div th:include="templates/fragments/footer::footer"></div>
</body>
</html>
Here is the snippet code of header template :
<link th:href="#{/css/bootstrap.min.css}" rel="stylesheet" media="screen"/>
<script type="text/javascript" th:src="#{/js/lib/jquery-1.11.1.min.js}"></script>
<script type="text/javascript" th:src="#{/js/lib/bootstrap.min.js}"></script>
Below the screenshot of 404 error
I've resolved my problem. It was a problem of specifing resources location and mapping in Spring configuration file. I add in app-servlet.xml
<mvc:resources mapping="/**" location="/"/>