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.
Related
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>
This question already has an answer here:
Using javascript (.js) in Google App Engine
(1 answer)
Closed 16 days ago.
Trying to externally load my javascript file into my main html file. Script works fine when I load it internally.
index.html file below:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<link href="./static/css/index.css" type="text/css" rel="stylesheet">
<script src="../scripts/index.js" type="text/javascript" defer></script>
</head>
<body>
<input type="text" id="myInput" class="carrierinput" onkeyup="myCarriers()" placeholder=" Search for LTL Carriers...">
<ul id="myUL">
<li><button type="button" class="collapsible">Central Transport</button>
<div class="content">
</div>
</li>
</ul>
</body>
</html>
index.js file below:
function myCarriers() {
// code here
}
project directory below:
Your html file seems to exist inside the templates directory, which means you have to go up one dir for the script first
<script src="../scripts/index.js" type="text/javascript" defer></script>
You also seem to be missing a '>' for the closing body
When you want to import a file in the same directory, you import it as follows:
"./FILE_NAME"
When you want to import a file in an inner directory:
"./INNER_DIRECTORY_NAME/FILE_NAME"
When you want to import a file in a parent directory:
"../FILE_NAME"
So here are the combinations:
./ current directory
../ parent directory
So in order to import your JavaScript file, simply, refer to the parent directory:
<script src="../scripts/index.js" type="text/javascript" defer></script>
When a file name is index, ex: index.html, index.js, you can leave the file name and only mention the directory name, ex, in your case:
<script src="../scripts" type="text/javascript" defer></script>
To link your index.js file. You have to first go outside from your current directory (which is templates, because you are writing this in the templates directory)
For that, you have to type ../
Then you are outside of the template directory.
Then you have to go to the scripts directory,
you can do like this ../scripts
Eventually, you want to approach the correct file in that scripts folder, for that ../scripts/index.js|
So simply change your,
./scripts/index.js to ../scripts/index.js
wanna learn more about relative paths, watch this: https://youtu.be/hxto_sRZsBg
I'm trying to work with three.js and really just html and js in general for the first time. I'm playing around with the example code and I found that even if I import the three.js file from the script tag in my Main.js file, it doesn't work unless I uncomment the script tag currently commented out. Why is this the case? Is there anyway i can run it in just my Main.js file without the first script tag?
<!DOCTYPE html>
<html>
<head>
<!-- <meta charset="utf-8"> -->
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<!-- <script src="node_modules\three\build\three.js"></script> -->
<script src="js/Main.js"></script>
</body>
</html>
please try this option: in your main html page <script type="module" src="js/Main.js"></script> and in your main.js page import other js pages
Try replacing
<script src="node_module/three/build/three.js"></script>
with
<script type="module" src="node_module/three/build/three.module.js"></script>
If you are importing module functions, it should be declared as a module.
(Not sure why type="module" should be part of the tag
<script src="js/Main.js"></script>
unless Main.js is exporting functions to be used outside of it.)
This question already exists:
how to get React file recognized within Flask project
Closed 2 years ago.
I'm currently trying to put together a Flask + React project. Just a simple Flask project, with some react code for the js part.
I have had some difficulty getting the js file (which contains the react code) to run at all in the project.
This is my project structure, standard for flask:
The app route is defined in the routes.py file in the project root; right now, just a single home page (the html file)
from flask import Flask, render_template, request
app = Flask(__name__)
#app.route("/qubits")
def qubits():
return render_template('qubits.html')
# http://localhost:5000/qubits
if __name__ == "__main__":
app.run(debug=True)
The html file is pretty simple, and it is linking properly to my css (im able to pull in css elements fine). Its just the js file thats not returning any divs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>nstem</title>
<link rel= "stylesheet" href= "{{ url_for('static',filename='css/nstem.css') }}">
</head>
<body>
<div class="indexBox1"></div>
<h1>: )</h1>
<script type="text/javascript"
src="{{ url_for('static', filename='js/index.js') }}"></script>
</div>
</body>
</html>
However, nothing is being returned on the webpage from these two js files:
*index.js*
import React from 'react';
import ReactDOM from 'react-dom';
import './nstem.css';
import Qubit from './qubits';
ReactDOM.render(
<Qubit />,
document.getElementById('root')
);
* qubits.js *
import React from 'react';
import ReactDOM from 'react';
function Qubit() {
const section = 'lists';
return (
<div>Allah'u'abha</div>
);
}
export default Qubit;
Im pretty stumped; ive played with this so much today and cant figure out where the gap is. Please help, and thanks so much.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>nstem</title>
<link rel= "stylesheet" href= "{{ url_for('static',filename='css/nstem.css') }}">
</head>
<body>
<div class="indexBox1"></div>
<h1>: )</h1>
{/**/}
<div id="root"></div>
We call this a “root” DOM node because everything inside it will be managed by React DOM.
{/**/}
<script type="text/javascript"
src="{{ url_for('static', filename='js/index.js') }}"></script>
</div>
</body>
</html>
Check the html template file DOM node is missing.
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="/"/>