Serving a 'create-react-app' made files with Flask backend
Date : March 29 2020, 07:55 AM
will help you When you finish the development process, you should run npm build it will create a new folder of static files, named build. Then you can use any server to serve those static files.
|
react frontend connecting to flask backend Howto
Date : March 29 2020, 07:55 AM
this one helps. I have tweaked your code a little bit. Changes I have made: added the backend path http://localhost:5000/result in frontend as form action path. used request.args.get method to grab the submitted value. import ReactDOM from 'react-dom';
import React, {Component} from 'react';
class Form1 extends Component{
render(){
return (
<div class="form">
<form action="http://localhost:5000/result" method="get">
Place: <input type="text" name="place"/>
<input type="submit" value="Submit"/>
</form>
</div>
);
}
}
ReactDOM.render(
<Form1/>,
document.getElementById('root')
);
from flask import Flask, request
app = Flask(__name__)
@app.route('/result', methods = ['GET', 'POST'])
def result():
if request.method == 'GET':
place = request.args.get('place', None)
if place:
return place
return "No place information is given"
if __name__ == '__main__':
app.run(debug = True)
|
how to start a project with react as front end and flask as backend?
Date : March 29 2020, 07:55 AM
I hope this helps . You will have to create rest services through flask and then make a request to fetch/insert the data through those services using react.
|
React frontend cannot POST to Flask backend
Date : March 29 2020, 07:55 AM
should help you out As per your code, when you click submit button, its submitting form with browser submit action, So it's hitting the browser base_url/handle_seeds, that's why it's throwing this error, <div id="parent">
<div dangerouslySetInnerHTML={template}/>
<form>
<input type='text' name='name' onChange={this.handleChange}/><br/>
<button type="button" onClick={this.handleSubmit} />
</form>
</div>
|
React axios GET null data from Flask backend
Date : March 29 2020, 07:55 AM
hop of those help? I have a react form in frontend where users can submit a question they wanna ask. Send the form data to flask server, using some NLP models to compute and get a result. Then return the result to the frontend. const config = {
headers: {'Access-Control-Allow-Origin': '*'}
};
axios.post('http://localhost:5000/api/newquestion', this.state, config)
.then(response => {
console.log(response)
this.setState({questionResult: response.data, isLoaded: true})
})
.catch(error => {
console.log(error)
})
@app.route("/api/newquestion", methods=['POST'])
@cross_origin(origin='*',headers=['Content-Type'])
def get_user_question():
data = request.get_json()
question = data['question']
result = generate_text(question)
return jsonify(result)
|