React-redux-starter-kit: Question: Enabling HTTPS on development mode

[joeyhipolito]

I have tried setting the https flag in the webpack.config.js file as I thought that is all it needs to get the local development setup run https, but found out that it doesn't.

How should I configure this starter kit to work with https on local dev machine?

[nickwaelkens]

@joeyhipolito Have you already found out how to do this?

[joeyhipolito]

@nickwaelkens actually, I still haven't and already gave up on this.

[benedyktdryl]

@joeyhipolito what problem you have with this?

[nickwaelkens]

I've eventually fixed this by putting a reverse proxy in front of it, routing every request from https://localhost:3001 to http://localhost:3000. All I needed to create was a dummy key and cert file for the SSL to work.

// bin/server.js
const httpProxy = require('http-proxy');
const port = config.server_port;
const portSSL = config.server_port + 1;

httpProxy.createServer({
  target: {
    host: 'localhost',
    port
  },
  ssl   : {
    key : fs.readFileSync(`${__dirname}/server.key`, 'utf8'),
    cert: fs.readFileSync(`${__dirname}/server.crt`, 'utf8')
  }
}).listen(portSSL);

I've also had to adjust the webpack.config.js to get HMR to work.

webpackConfig.entry = {
  app   : __DEV__
      ? [APP_ENTRY].concat(`webpack-hot-middleware/client?path=https://${host}:${portSSL}/__webpack_hmr`)
      : [APP_ENTRY],
  vendor: config.compiler_vendors
};

as well as change the compiler_public_path for the development part of config/environments.js.

Let me know if you'd like to see a PR of this by the way. :+1:

[diego-betto]

If you just need to enable https (ie, testing geolocation) you can enable it for browser-sync in

tools/start.js

    let handleBundleComplete = async () => {
      handleBundleComplete = stats => !stats.stats[1].compilation.errors.length && runServer();

      const server = await runServer();
      const bs = browserSync.create();

      bs.init({
        ...(config.debug ? {} : { notify: false, ui: false }),

        proxy: {
          target: server.host,
          middleware: [wpMiddleware, hotMiddleware],
          proxyOptions: {
            xfwd: true,
          },
        },
          https: true // add this line
      }, resolve);
    };