Создайте приложение Flask и React Full Stack - PullRequest
Новая
       70

Создайте приложение Flask и React Full Stack

0 голосов
/ 05 мая 2020

Как мне создать веб-сайт с интерфейсом React и сервером Flask?

Я создал веб-сайты с использованием flask и шаблонов, и я создал страницы с помощью реакции, и теперь я бы люблю их комбинировать.

Я пробовал несколько вещей, и единственное, что работало, требовало входа в файлы конфигурации реакции и было очень сложным. И даже тогда было сложно использовать fetch, и мне приходилось запускать npm run build каждый раз, когда я менял файл реакции.

Мне кажется, что это будет что-то, что будет выполняться все время, но я могу Я не нашел для этого простых ресурсов.

Есть ли что-то, чего я принципиально не понимаю в отношении веб-сайтов и иду неверным путем?

1 Ответ

0 голосов
/ 06 мая 2020

Сосредоточение внимания на рабочем процессе разработки, так как существует бесчисленное множество вариантов развертывания в производственной среде.

Запустите приложение Flask с /api в качестве префикса URL-адреса root либо вручную, добавление префикса ко всем декораторам маршрутов или использование Blueprint.

py/app.py

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

Добавьте URL-адрес сервера разработки Flask в свой package.json файл

js/package.json

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

Получение данных с помощью компонента

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 (
            
                Status: { status }
                
                    { JSON.stringify(data) }
)}} экспорт по умолчанию Flask

Наконец, включите компонент в свой основной App

js/App.js

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

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

export default App;

Запустите сервер Flask предпочитаемым методом: flask run или выполняя ваш сценарий напрямую, затем запустите сервер разработки JS с помощью yarn или npm start. Вы должны увидеть ответ от вашего маршрута api, отображаемый на http://localhost:8000

, пока вы используете свой Flask сервер с debug=True и используете npm start ( не npm run build), любые изменения, внесенные в бэкэнд или во фронтенд, будут автоматически обнаружены, и ваше приложение будет перезагружено.

...