web-dev-qa-db-ja.com

create-react-app + nodejs（express）サーバー

NodeJs + Reactをアプリケーションで使用しています。NodeJsでExpressを使用しています。「create-react-app」npmを使用してサンプルアプリを作成しました。

NodeJを使用してoauthトークンを呼び出しました。この投稿でこのアプローチについて述べました Calling a secure REST api from Javascript without userscriptログイン画面 。

以下のコマンドを追加して、反応アプリと一緒にNodeJを起動します。できます。

"scripts": {
  "node": "react-scripts-ts build & node server"
}

問題は、webpack-dev-serverを起動していないため、「create-react-app」に付属するリアルタイム追跡機能が利用できないことです。変更を加えた場合は、「yarn node」を実行して、ノードjsサーバーを再起動および開始する必要があります。

私の質問は、「create-react-app」のライブ追跡機能を失うことなく、nodejs expressを起動する方法です。

「create-react-app」を削除してスクリプトをカスタマイズする必要がある場合は、次の機能を使用している限り問題ありません。

  • nodejs express-apiを起動します
  • 反応アプリをロードする
  • 反応ファイルまたはnodejsエクスプレスファイルに変更がある場合は、自動で再読み込みされます。

ご不明な点がございましたら、お気軽にお問い合わせください。

おかげで、

node.jsreactjsexpresscreate-react-app
12
Michael Sync

この設定を処理するための優れた方法に関する優れたチュートリアルがあります。 https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/

要約すると、慣れ親しんだ方法でnode + expressサーバーを作成できます-これはprojectというディレクトリにあると言います-次にネストしますcreate-react-appを使用して作成されたフロントエンドディレクトリ、例えばproject/client。

開発中は、実際には2つのサーバーを実行します。バックエンドサーバー（npm start）と、ネストされたcreate-react-appに付属するwebpack-dev-server（cd client && npm start）です。ブラウザーで、webpack-dev-serverによって提供されているURL（デフォルトではlocalhost：3000）に移動します。

本番環境では、2つのサーバーを実行する必要はありません。フロントエンド（cd client && npm run build）をバンドルすると、バックエンドサーバーは、たとえばExpressの静的ミドルウェアを介して、バンドルを提供するだけで済みます。

if (process.env.NODE_ENV === 'production') {
    app.use(express.static('client/build'))
}

いくつかの詳細をスキップしたので、この設定が適切に聞こえるかどうか、リンクしたチュートリアルを確認してください。

8
Tyler Hsu

Nodemonでnodejsサーバーを個別に実行し（ https://nodemon.io/ ）、reactアプリを作成します。サーバー側のUIにとらわれないようにします。

気になるのは、なぜサーバーの変更後にUIをリロードする必要があるのでしょうか。サーバー側を完了し、ユニット/統合テストを記述してから、UIを記述できます。

ご不明な点がございましたら、お気軽にお問い合わせください

0
Alex Brazh