Conventions

To make it all work we have the following requirements:

Server

A Linux development server is running on different IP-address as the development PC/Mac. On that server a watch is running and the Webpack DevServer. This allows us to reload changes in our ReactJS program on the fly.

Development

Development is done with a PC/Mac and the PHPStorm IDE. This specific editor is no relevance to the working and testing done here. When a source is modified and saved it is send with FTP to the development server. The watcher on the development server is possibly reloading the frontend, depending on where the changes were made.

DevServer watch

On the server the following watch is running during testing:

Started on the server command line with:

npm run dev

will execute:

webpack serve

using the devServer configuration in the webpack.config.js

devServer: {
      contentBase: path.resolve(__dirname, 'dist'),
      port: 443,
      //  open: true,
      //  hot: true,
      //  compress: true,
      // historyApiFallback: true,
      writeToDisk: true
},

Important here is the writeToDisk set to true, while otherwise it will not create a dist or build folder in the test environment.
This dist folder is created when doing a production build.