Обслуживание интерфейса, созданного с помощью приложения create-react-app, с помощью Flask

import os
from flask import Flask, send_from_directory

app = Flask(__name__, static_folder='react_app/build')

# Serve React App
@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def serve(path):
    if path != "" and os.path.exists(app.static_folder + '/' + path):
        return send_from_directory(app.static_folder, path)
    else:
        return send_from_directory(app.static_folder, 'index.html')


if __name__ == '__main__':
    app.run(use_reloader=True, port=5000, threaded=True)

Вот что у меня получилось. Итак, в основном поймайте все маршруты, проверьте, является ли путь файлом => отправить файл => иначе отправьте index.html. Таким образом, вы можете перезагрузить приложение React с любого маршрута, и оно не сломается.

Сначала выполните npm run build, чтобы создать статические производственные файлы, как указано вами выше.

from flask import Flask, render_template

app = Flask(__name__, static_folder="build/static", template_folder="build")

@app.route("/")
def hello():
    return render_template('index.html')

print('Starting Flask!')

app.debug=True
app.run(host='0.0.0.0')

К сожалению, я не думаю, что вы сможете заставить его работать с горячей перезагрузкой разработки.

Здесь рабочее решение. Вы когда-нибудь задумывались, зачем нам две отдельные папки для static и templates. Чтобы отделить беспорядок, верно? Но это проблема производственной сборки, поскольку в ней есть одна папка для файлов типа static и templates, и все зависимости связаны таким образом.

Папка build будет обслуживаться, если рассматривать ее одновременно как static, так и templates.

Используйте что-то вроде этого

from flask import Flask, render_template

app = Flask(__name__, static_url_path='',
                  static_folder='build',
                  template_folder='build')

@app.route("/")
def hello():
    return render_template("index.html")

Ваше приложение Flask будет работать нормально.

Принятый ответ мне не подходит. я использовал

import os

from flask import Flask, send_from_directory, jsonify, render_template, request

from server.landing import landing as landing_bp
from server.api import api as api_bp

app = Flask(__name__, static_folder="../client/build")
app.register_blueprint(landing_bp, url_prefix="/landing")
app.register_blueprint(api_bp, url_prefix="/api/v1")


@app.route("/")
def serve():
    """serves React App"""
    return send_from_directory(app.static_folder, "index.html")


@app.route("/<path:path>")
def static_proxy(path):
    """static folder serve"""
    file_name = path.split("/")[-1]
    dir_name = os.path.join(app.static_folder, "/".join(path.split("/")[:-1]))
    return send_from_directory(dir_name, file_name)


@app.errorhandler(404)
def handle_404(e):
    if request.path.startswith("/api/"):
        return jsonify(message="Resource not found"), 404
    return send_from_directory(app.static_folder, "index.html")


@app.errorhandler(405)
def handle_405(e):
    if request.path.startswith("/api/"):
        return jsonify(message="Mehtod not allowed"), 405
    return e

Я использовал фляжный сервер только с одним route /, который считывал файл index.html из папки сборки приложения Create response (CRA).

from flask import Flask
app = Flask(__name__)
app.static_folder =  '../build'

@app.route('/')
def index():
    fref = open(r'../build/index.html')
    html_text = fref.read()
    fref.close()
    return html_text

app.run()

При такой настройке я столкнулся с ошибкой, статические файлы не обслуживаются должным образом из-за несоответствия пути, поэтому я использовал решение

1. Добавьте свойство домашней страницы в package.json CRA и установите для него значение / static.

{name: Имя приложения, версия :, зависимости: {} домашняя страница: / static, .... [другие ключи]}

 Add **homepage** key parallel to the **dependencies** key in the package.json file

2. Это свойство домашняя страница будет использоваться во время процесса сборки CRA и использоваться вместо% PUBLIC_URL% в index.html и добавляется к пути URL-адреса других статических ресурсов (вы можете проверить, просмотрев index. html-код после процесса сборки)

3. После процесса сборки запустите флеш-сервер, мы увидим, что GET-запрос поступает с / в первый раз, а index.html будет обслуживаться, а за ним следуют запросы / static / static / js / [[filename]] для других статических ресурсов из файла HTML, и все работает правильно