How to rewrite file:/// request to http://domain?


#1

Hiyas,

I’m trying to rewrite a file:/// request to the base domain of my web app, ie. ‘h://localhost:3000’, so that it can receive React hot module updates.
The goal is to have a web app and electron app both running, receiving the same HMR updates. The web app automatically requests the updates from h://localhost:3000/hot/hot-update.json, but the electron app keeps requesting from file:///hot/hot-update.json.
I tried to use the registerHttpProtocol to respond with a redirectRequest, but it doesn’t seem to be working, ie:

// before app.on('ready'):
protocol.registerStandardSchemes(['file']);

// in onReady() handler:
  protocol.unregisterProtocol('file');
  protocol.registerHttpProtocol('file', (request, callback) => {

    let url = request.url.substr(8);

    url = url.replace('Users/rw3iss/Sites/react-electron/src/', 'http://localhost:3000/');

    console.log('request', url);
    callback({
      redirectRequest: {
        url: url,
        method: 'get'
      }
    })
  }, (error) => {
    if (error) console.error('Failed to register protocol', error)
  })

The console output shows:

request h://localhost:3000/index.html

And this file does exist if I go to it within the browser (note this is for the initial index file, not the hot updates, but neither are working).

I’m wondering if anyone knows how to do HMR updates within an electron app, or otherwise how to use the registerHttpProtocol to properly reroute the HMR updates?

You can clone this small repository to replicate the issue:
git clone https://github.com/rw3iss/react-router4-hmr-appshell-boilerplate

To install:
npm install
npm run dev (to start a local webpack-dev-server)
npm run electron (to start the electron)


#2

Note that I replaced ‘http’ with ‘h’ in the above links because I’m a new user and it won’t let me post more than two links… please be advised! Thanks.


#3

Well, I made a sort of noob mistake and overlooked the fact that I should have just been telling electron to load the http:// url itself within main.js, instead of trying to use file:// there and having hot updates loaded through some hacking. So, I think we can ignore this question :-). Thanks.