React.JS react-create-appバックエンド同じポート

Question

私はReact.JSを初めて使用し、react-create-appを使用してプロジェクトをセットアップしました。

私は、同じホストとポートを使用してAPIリクエスト（サーバーがDjangoのようにフロントエンドとバックエンドの両方を処理する）に応答する方法があるのだろうと思います。

この文書はこれについて言及していますが、詳細については説明しません。

同じホストとポートでは、ターミナルが1つだけ必要で、npm startを一度実行するということです。

Answer 1

だけ発展のためにそこにある場合、あなたは単にあなたのpackage.jsonに

​​

を追加することができます。

これは、あなたのAPIクエリをReactから別のポート（8000）で動作している他のアプリケーションにプロキシします。

完成後、生産コード（npm buildコマンド）をビルドする必要があります。結果はindex.htmlでビルドされたjsとcssのバンドルがロードされます。 - この時点から

class IndexView(View): 
    def get(self, request): 
     index = open(str(settings.BASE_DIR.path('build/index.html')), 'r') 
     return HttpResponse(content=index.read()) 

だけリアクトからあなたのAPIを使用する：あなたはTemplateViewとしてこれを行うことができます（このファイルには、あなたのIndexViewを指して、多分単純にしかないようにレンダリングされるのみ必要ジャンゴから

開発モードに戻る - 変更を保存し、Django（またはRails、Node、またはそれがバックエンドのもの）から実行するたびにアプリケーションを構築するようにWebpackを設定することもできます。私はあなたが開発を完了するまで、ネイティブのコンテキストで両方のアプリケーションを保つプロキシを使用することを好む。このゾルの1つの不利な点両方のアプリを同時に実行する必要があるということです。

私はそこに見つけ、これについていくつかの有用な情報とsoultions：あなたは、同じホストとポートでhttps://www.fullstackreact.com/articles/using-create-react-app-with-a-server/