Add watching build mode that writes to disk

[harrygr]

In the JS version of this there is discussion regarding a dev mode that compiles the app and just writes the result to disk whilst watching rather than serving direct from webpack-dev-server, the rationale being that perhaps you want to integrate your react app with a backend so it's helpful to have your backend server serve your frontend files locally.

Others have contributed scripts which defer to react-scripts but it's not obvious how to get this to work when TypeScript is involved.

Is there a possibility of adding a watch mode or devising a way to do this?

[wmonk]

Hey, I think we'll close this until it lands in react-scripts. I don't want to deviate from that project too much, as if we do, it'll be impossible to keep tracking it!

[harrygr]

Fair enough. I've settled on using the following script which seems to work - the drawback being it creates a production build (minified), although sourcemaps help with debugging. In watch mode it's fairly fast to recompile.

process.env.NODE_ENV = 'production';

const fs = require('fs-extra');
const paths = require('react-scripts-ts/config/paths');
const webpack = require('webpack');
const config = require('react-scripts-ts/config/webpack.config.prod.js');

// removes react-dev-utils/webpackHotDevClient.js at first in the array
config.entry.shift();

console.log('public url:', process.env.PUBLIC_URL)

webpack(config).watch({}, (err, stats) => {
  if (err) {
    console.error(err);
  } else {
    copyPublicFolder();
  }
  console.error(stats.toString({
    chunks: false,
    colors: true
  }));
});

function copyPublicFolder() {
  fs.copySync(paths.appPublic, paths.appBuild, {
    dereference: true,
    filter: file => file !== paths.appHtml
  });
}