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」を削除してスクリプトをカスタマイズする必要がある場合は、次の機能を使用している限り問題ありません。
ご不明な点がございましたら、お気軽にお問い合わせください。
おかげで、
この設定を処理するための優れた方法に関する優れたチュートリアルがあります。 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'))
}
いくつかの詳細をスキップしたので、この設定が適切に聞こえるかどうか、リンクしたチュートリアルを確認してください。
Nodemonでnodejsサーバーを個別に実行し( https://nodemon.io/ )、reactアプリを作成します。サーバー側のUIにとらわれないようにします。
気になるのは、なぜサーバーの変更後にUIをリロードする必要があるのでしょうか。サーバー側を完了し、ユニット/統合テストを記述してから、UIを記述できます。
ご不明な点がございましたら、お気軽にお問い合わせください