Webpacker: Issue with https

[Radzhab]

ps. sorry for my english.

I have site that work over https. I add changes to webpacker to work with ssl.

development.js

// Note: You must restart bin/webpack-dev-server for changes to take effect

const merge = require('webpack-merge')
const sharedConfig = require('./shared.js')
const { settings, output } = require('./configuration.js')

module.exports = merge(sharedConfig, {
  devtool: 'cheap-eval-source-map',

  output: {
    pathinfo: true
  },

  devServer: {
    https: true,
    clientLogLevel: 'none',
    host: settings.dev_server.host,
    port: settings.dev_server.port,
    contentBase: output.path,
    publicPath: output.publicPath,
    compress: true,
    headers: { 'Access-Control-Allow-Origin': '*' },
    historyApiFallback: true,
    watchOptions: {
      ignored: /node_modules/
    },
    stats: {
      errorDetails: true
    }
  }
})

But its raise error in browser. Its download applictions js over http? Why so?
Mixed Content: The page at 'https://localhost:3000/' was loaded over HTTPS, but requested an insecure script 'http://localhost:8080/packs/application.js'. This request has been blocked; the content must be served over HTTPS.

server puma.

[rossta]

In your case, you'll want to instruct your browser to trust the self-signed certificate that ships with webpack-dev-server. For Chrome on Mac, something like this might work for you:

$ sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain ~/path/to/app/node_modules/webpack-dev-server/ssl/server.pem

In some cases, you may need to create a separate self-signed SSL certificate instead. There are lots of posts on the web about how to do this and for how to get some/most browsers to trust the certificate.

To make webpack dev server config aware of the certificate, I'm using something similar to the config here:

// config/webpack/local-ssl.js
const { resolve  } = require('path');
const { readFileSync } = require('fs');

module.exports = {
  cert: readFileSync(resolve('path', 'to', 'localhost-self-signed.pem'), 'utf8')
};

// config/webpack/development.js
const { cert } = require('./local-ssl.js')
const https = { key: cert, cert: cert }

module.exports = merge(sharedConfig, {
  // ...
  devServer: {
    // ...
    https: https,
  },
//...

I may open a PR to add this to the README, but in the meantime, I hope that's helpful.

[gauravtiwari]

thanks @rossta 🍰