Docker file sync when host directory is mounted in docker container, so that hot reloading will work.

Docker file sync.md

Using docker containers in Windows(host) for react and webpack so that workspace has linux like feel. To do so mounting the workspace directory in container, so coding is done in atom on Windows while server is running in docker. But issue is that changes done in host folder files are not reflected and not reloaded by webpack, so created a small trick to reload changes by webpack.

Include above 2 files in project, and install the required dependencies by these files. fileWatcherLocal.js will listen the change on Windows and same it'll notify to the fileWatcherServer.js server. fileWatcherServer.js listen the changed file path sent by fileWatcherLocal.js and executes chmod command to notify webpack.

fileWatcherLocal.js must be run in host (my case Windows). fileWatcherServer.js must be run in docker container (I'm using forever module to run this as a daemon).

Order in which these should be run, otherwise it'll be a recursion of calls.

1. Run webpack in container.
2. Run fileWatcherLocal.js in host .
3. Run fileWatcherServer.js in container.

fileWatcherLocal.js

var request = require('request');

require('chokidar').watch('public/', {ignored: /[\/\\]\./}).on('all', function(event, path) {
  console.log(new Date().toLocaleString() + ':',event, path);
  request.get("http://192.168.99.100:8081?" + path, function (error, response, body) {
  if (!error && response.statusCode == 200) {
  }
});
});

fileWatcherServer.js

//Lets require/import the HTTP module
var http = require('http');
var exec = require('child_process').exec;
var fs = require('fs');
//Lets define a port we want to listen to
const PORT=8081;

const modifyF = (path) => {
    console.log('path', path);
  try {
    console.log(process.cwd());
    console.log(fs.readFileSync(path));
  } catch (e) {
    console.error(e);
  }

  exec('chmod 777 ' + path, function(error, stdout, stderr) {

      console.log('stdout: ' + stdout);
      console.log('stderr: ' + stderr);
      if (error !== null) {
          console.error('exec error: ' + error);
      }
  });
};

//We need a function which handles requests and send response
function handleRequest(request, response){
    console.log( new Date().toLocaleString() + ':', request.url);
    response.end('It Works!! Path Hit: ' + request.url);
    modifyF(request.url.split('?')[1])

}

//Create a server
var server = http.createServer(handleRequest);

//Lets start our server
server.listen(PORT, function(){
    //Callback triggered when server is successfully listening. Hurray!
    console.log("Server listening on: http://localhost:%s", PORT);
});