Create a Flask and React Full Stack Application

Question

How do I create a website with a React Front end and a Flask backend?

I have created websites using flask and templates, and I have made pages using react, and now I would like to combine them.

I have tried a few things and the only things that worked required going into react config files and were very complicated. And even then it was complicated to use fetch and I had to run npm run build every time I changed the react file.

This seems to me like something that would be done all of the time yet I can't find any simple resources to do this.

Is there something that I fundamentally don't understand regarding websites and I am going at this the wrong way?

Answer 1

Focusing on a development workflow, as there are countless choices in how to deploy to a production environment.

Run your Flask app with /api as the root url prefix, either manually by prefixing all your route decorators or with the use of a Blueprint.

py/app.py

@app.route('/api')
def index():
    return {'message':'hello'}

Add the Flask development server url to your package.json file

js/package.json

{
    ...,
    "proxy": "http://localhost:5000"
}

Fetch your data using a component

js/Flask.js

import React, { Component } from 'react'

export class Flask extends Component {
    constructor(props) {
        super(props)
        this.state = { data: {}, status: null }
    }

    fetchData() {
        let status
        fetch('/api')
        .then((res) => {
            return {
                data: res.json(),
                status: status
            }
        })
        .then((data) => {
            this.setState({ ...data })
        }
        .catch((err) => {
            console.error(err)
        })
    }

    componentDidMount() {
        this.fetchData()
    }

    render() {
        const { data, status } = this.state
        return (
            <div>
                <h3>Status: { status }</h3>
                <pre>
                    { JSON.stringify(data) }
                </pre>
            </div>
        )
    }
}

export default Flask

Finally, include the component in your main App

js/App.js

import React from 'react';
import Flask from './Flask'

function App() {
  return (
    <div className="App">
      <Flask />
    </div>
  );
}

export default App;

Start your Flask server with your preferred method, either flask run or by executing your script directly, then start your JS development server with either yarn or npm start. You should see the response from your api route displayed at http://localhost:8000

As long as you are running your Flask server with debug=True and use npm start (not npm run build), any changes made with either the backend or frontend will be automatically detected and your app reloaded.