I have a server in Flask and I try created PWA with React. I am totally new in web development.
I created a Flask server, REST api too and something like a react projects but when I tried create something for front-end its not working. In my opinion file index.html have not included React.
This is my server.py:
api = Api(app)
#app.route('/')
def index():
return render_template("roos/public/index.html")
if __name__ == '__main__':
app.run(port='8080')
I run server with command: python server.py
And it's works - when I use webbrowser -> 127.0.0.0:8080 I have a white page
This is works.
In roos I have this directories, with files:
-ROOS
|-node_modules
|-(many hundred directory)
|-public
|- favicon.ico
|- index.html
|-manifest.json
|-src
|-App.css
|-App.js
|-App.test.js
|-index.css
|-index.js
|-logo.svg
|-serviceWorker.js
-package.json
-package-lock.json
My file, index.html look like:
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>ROOS</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
And file index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App/>, document.getElementById('root'));
serviceWorker.unregister();
And this not working - I can't run any scripts which I created in this file. In my opinion index.js is not call when I run the server. I don't have idea how I can start this .js scripts
Related
I wanted to integrate my frontend code with my python backend functionality
This is my frontend code with html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Subtitle AI</title>
...
</head>
<body>
<div class="upload">
<h3>Step 1: upload a .wav file</h3>
<input id="wavFile" type="file" name="myFile" accept=".wav" />
<button id="submit-button">Submit</button>
</div>
<h3>Step 2: Wait for model to generate closed captioning</h3>
<p id="result"></p>
<script>
$("#submit-button").click(function(event) {
let parameter1 = {
return1: $("#wavFile").val(),
};
$.post(
"http://127.0.0.1:5000/predict",
JSON.stringify(parameter1),
function(transcription) {
$("#result").text(transcription.result);
console.log(transcription);
}
);
});
</script>
</body>
</html>
And this is my pytohn backend code functionality + attempted integration. I tried to integrate it with Flask, not sure what went wrong, but when I clicked the button, the return value from my python backend function is not displaying.
...
from flask import Flask
from flask import jsonify
app = Flask(__name__)
#app.route('/predict', methods=['POST'])
...
# define the prediction function which takes in the file path to a wav file and outputs the predicted words
def predict (model, device, path):
...
# decode the IDs to text
transcription = processor.decode(predicted_ids[0])
return jsonify(transcription)
Hi i am trying to host a server my raspberry pi with flask but css does not work. It shows plain html. when i try the same thing with same file names, location and same code it works but from my raspberry pi it does not work?
To Fix I Tried (so don't bother saying):
Tried using static or normal way
Tried doing cmd+shift+R
Tried changing file names
HTML:
<!DOCTYPE html>
<html>
<head>
<title>THD</title>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<html>
FLASK:
from flask import Flask, render_template
app = Flask(__name__)
#app.route("/")
def main_page():
return render_template('learn.html')
TREE VIEW:
Thank You So Much If You Can Fix It.
turns out i have made a typo i didnt notice it for hours my looked like this
<link rel="stylesheet" href=""{{ url_for('static', filename='styles.css') }}>
This is how it works:
<!DOCTYPE html>
<html>
<head>
<title>THD</title>
<link rel= "stylesheet" type= "text/css" href= "static/styles.css">
</head>
<html>
You have to call the relative path to the css file
Do this:
<link rel="stylesheet" href="../static/styles.css/">
You need to get out to templates folder with .. and then put path to styles.css
Hope this helps!
from flask import Flask, render_template
skills_app = Flask(__name__)
#skills_app.route("/")
def homepage():
return render_template("homepage.html")
if __name__ == "__main__":
skills_app.run()
Now homepage.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Hello from Html page
</body>
</html>
but when I run my page,"Hello from HTML page" doesn't show up
and yes i created templates folder and put homepage.html inside it.
so what is the problem here? could you help me
By default, Flask looks for templates directory to render. If you want to make your code work, create a templates folder next to your main file, put homepage.html inside it.
Or, initialize app like,
skills_app = Flask(__name__, templates='/path/to/directory/containing/html-files')
and put your templates to the /path/to/directory/containing/html-files
attached is the picture of how my directories are upi am trying to run my app with flask, and I am referencing the proper directories, yet I keep getting an error 404 message. I do not know what I am doing wrong.
Here is my the code to run the app in the app.py section:
#app.route('/')
def math():
#return(y)
return render_template('index2.html', variable = y)
if __name__ == "__main__":
app.run(debug = True)
and here is my html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Scrolling Nav - Start Bootstrap Template</title>
<!-- Bootstrap core CSS -->
<link href="/static2/static2/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/static2/static2/css/scrolling-nav.css" rel="stylesheet">
<!-- Bootstrap core JavaScript -->
<script src="/static2/static2/vendor/jquery/jquery.min.js"></script>
<script src="/static2/static2/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="/static2/static2/vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom JavaScript for this theme -->
<script src="/static2/static2/js/scrolling-nav.js"></script>
</body>
</html>
the scrolling -nav.js is in the correct folder for sure.
Please let me know if there is more information needed for this question.
For references to static files in Flask it's considered best practice to use the url_for function e.g.
<script src="{{url_for('static', filename='js/scrolling-nav.js')}}"></script>
Other than that, if that is your full HTML then it's just a javascript file, do you have the basic HTML stuff in there as well? e.g.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
Content
</body>
<html>
Is index2.html stored in a templates folder?
I got it. My directories name was static2. The directories name must be "static" for the css and js files to be pulled.
Sorry for asking such a basic question, but I'm stuck and can't figure out what I am doing wrong. I am developing a small website using Flask, teaching myself web coding along the way.
I have the following file structure:
mathsoc
mathsoc.py
mathsoc/templates
mathsoc.css
mathsoc_main.html
My mathsoc.py looks like this:
from flask import Flask, render_template
app = Flask(__name__)
#app.route("/")
def main_page():
return render_template('mathsoc_main.html')
if __name__ == "__main__":
app.run(debug=True)
Then mathsoc_main.html looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="mathsoc.css"/>
<title>Some Title</title>
</head>
<body>
<div id="content">
Hello World!
</div>
</body>
</html>
And mathsoc.css looks like this:
#content {
width:46em;
background-color: yellow;
}
But mathsoc_main.html cannot find the stylesheet, it appears: it does not apply either of the defined properties to the content. I'm guessing that I'm doing something wrong with <link rel="stylesheet" type="text/css" href="mathsoc.css"/>, but I don't know what. It seems so blindingly obvious, yet no style is loaded!
Change your folder structure to include a static folder.
mathsoc
mathsoc.py
templates
mathsoc_main.html
static
mathsoc.css
See http://flask.pocoo.org/docs/0.10/tutorial/folders/