無法呈現來自Flask後端的create-react-app樣板視圖

Question

我很難將create-react-app單頁應用程序整合到我的瓶子後端。我希望能夠從我的前端進行fetch/axios調用，如：axios.get（'/ getResults'）和fetch（'/ getResults'）。有些事情我已經嘗試但不限於將Flask端口指定爲3000，這與create-react-app使用的端口相同。另外，在create-react-app的「package.json」文件中使用了代理配置功能，但無濟於事。我懷疑我的文件夾結構和Flask代碼實現可能會導致這種情況。以下是我的文件夾結構和「app.py」代碼。我會得到任何幫助將不勝感激。如有必要，我可以提供更多信息。由於

項目
-build（包含靜態文件夾，index.html的...其他元文件）
-node_modules
-public
-src
app.py
的package.json
requirements.txt

app.py：

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

app = Flask(__name__, static_path='/build/static/') 
app.debug=True 

@app.route('/') 
def root(): 
    print('Inside root function') 
    return app.send_static_file('index.html') 

@app.route('/getResults', methods=["GET"]) 
def results(): 
    print('Inside getResults path') 
    return app.send_static_file('index.html') 

@app.route('/postData', methods=["POST"]) 
def data_results(): 
    print('Inside postData path') 
    data = request.get_json 
    return jsonify(data) 

@app.route('/<path:path>') 
def send_js(path): 
    print("inside send_js fxn") 
    return send_from_directory('./build/static',path) 


if __name__ == "__main__": 
    print("inside main host call") 
    app.run(host='0.0.0.0', port=3000) 

錯誤，當我運行 「蟒蛇app.py」 我得到的是：

在終端：內部根函數 127.0.0.1 - - [12 /月/ 2017年9時42分24秒] 「GET/HTTP/1.1」 404 -

在瀏覽器：未找到 - 所請求的URL在服務器上找不到。如果您手動輸入網址，請檢查拼寫並重試。

Answer 1

我有完全相同的問題，我可以通過安裝符號鏈接Flask來解決它。

保持模板和靜態目錄路徑爲默認值，並與您的水壺主文件的目錄，添加這些符號鏈接

ln -s build/ templates 
ln -s build/static static 

如果你好奇，這是我的具體問題，這只是涉及到幾個嵌套的目錄，但在本質上是相同的：

Running NPM Build from Flask

然後可以使用努爾然的根配置：

@app.route('/') 
def root(): 
    print('Inside root function') 
    return render_template('index.html') 

但是你只需要你的應用程序的聲明是：app = Flask(__name__)

不工作對我來說，唯一的事情是圖標，一旦我明白這一點，我會更新這個答案。

Answer 2

我想你有一些誤解。

create-react-app在端口3000上的自己的服務器上運行，如果您嘗試在同一臺機器的相同端口上運行燒瓶應用程序，它會抱怨端口3000已被使用。因此，我們轉向另一個問題 - 應用程序的結構。

它會是一個單獨的基於reactjs的客戶端的前端和api的基礎上瓶子在後端，這將是2個獨立的應用程序通過HTTP彼此進行通信？在這種情況下，前端和後端通常運行在不同的服務器上。

或者它將一個燒瓶應用程序將在其模板頁中使用reactjs？

你可以不改變這個在您的代碼中發現的網址解決您目前存在的問題：

@app.route('/') 
def root(): 
    print('Inside root function') 
    return render_template('index.html') 

這：

template_dir = os.path.abspath('build/templates') 
app = Flask(__name__, static_path='/build/static/', 
      template_folder=template_dir) 

由於您的模板文件夾是在build目錄。

Answer 3

在開發模式中，您需要配置您的create-react-app package.json以將「ajax」請求轉發給瓶服務器。

這裏是我的package.json是什麼樣子：

{ 
    "name": "socialite", 
    "version": "0.1.0", 
    "private": true, 
    "proxy": "http://localhost:8080", 
    "devDependencies": { 
    "react-scripts": "1.0.10" 
    }, 
    "dependencies": { 
    "react": "^15.6.1", 
    "react-dom": "^15.6.1" 
    }, 
    "scripts": { 
    "start": "react-scripts start", 
    "build": "react-scripts build", 
    "test": "react-scripts test --env=jsdom", 
    "eject": "react-scripts eject" 
    } 
} 

見proxy場？這就是魔術發生的地方，用燒瓶服務器地址替換它的價值。這樣，您就可以利用CRA熱重新加載功能。這是記錄在create-react-app as "Proxying API Requests in Development"

然後運行你的應用程序，你去localhost:3000或任何港口紗線爲你打開。當你做一個API通過彩虹調用JavaScript到服務器，例如：fetch('/api/model/')或者某個nodejs的服務器將轉發到燒瓶應用程序。我認爲nodejs服務器會查看ajax請求的內容類型字段，以確定它是否應該將請求轉發到後端服務器。

我建議你在/api/v1/之類的東西前綴所有的後端路由，所以nginx的配置很整潔，易於編寫。