Using HTTPS with localhost

[esalexreyes]

Hey there, I found a small issue when trying to enable the configuration for https proxying on BrowserSync.

It seems to me that even if you add the https section into the project configuration in webpack.config.js the build procedure just ignores it and uses the default SSL certificates bundled with BrowserSync since in most instances you are using custom SSL certificates, this can lead to localhost giving you an insecure connection warning.

I found that the fix is pretty easy, by just adding the https configuration to the config.base.js under the browserSyncOptions constant. Here are my edits:

In webpack.config.js:

...
browserSync: {
    enable: true, // enable or disable browserSync
    host:   'localhost',
    port:   3600,
    mode:   'proxy', // proxy | server
    server: { baseDir: [ 'public' ] }, // can be ignored if using proxy
    proxy:  'https://example.test',
    // BrowserSync will automatically watch for changes to any files connected to our entry,
    // including both JS and Sass files. We can use this property to tell BrowserSync to watch
    // for other types of files, in this case PHP files, in our project.
    files:  '**/**/**.php',
    reload: true, // Set false to prevent BrowserSync from reloading and let Webpack Dev Server take care of this
    // browse to http://localhost:3000/ during development,
    https: {
        key: '/path-to-cert/localhost.key',
        cert: '/path-to-cert/localhost.crt',
    }
},
...

In config.base.js:

...
const browserSyncOptions = {
    files: projectOptions.browserSync.files,
    host:  projectOptions.browserSync.host,
    port:  projectOptions.browserSync.port,
    https: projectOptions.browserSync.https,
}
...

Probably you may have a more elegant solution in case it's not passed as a parameter. 😅

[dayneh88]

How did enable/create SSL certificates for localhost? I'm trying to do it in MAMP and it says you can't add SSL certificates to localhost.

[esalexreyes]

@dayneh88 No idea on that front, I'm using Devilbox as my local environment, but I found this: https://really-simple-ssl.com/knowledge-base/how-to-install-an-ssl-certificate-on-mamp/

I hope it helps. :)

[dayneh88]

@dayneh88 No idea on that front, I'm using Devilbox as my local environment, but I found this: https://really-simple-ssl.com/knowledge-base/how-to-install-an-ssl-certificate-on-mamp/

I hope it helps. :)

Fantastic! Thanks so much for your help. You haven't had any luck getting @font-face to work with this boilerplate by any chance have you?

[esalexreyes]

Fantastic! Thanks so much for your help. You haven't had any luck getting @font-face to work with this boilerplate by any chance have you?

@dayneh88 I haven't had any problems using @font-face, however, I haven't used this boilerplate in a while. 😅

[dayneh88]

Fantastic! Thanks so much for your help. You haven't had any luck getting @font-face to work with this boilerplate by any chance have you?

@dayneh88 I haven't had any problems using @font-face, however, I haven't used this boilerplate in a while. 😅

I'm having massive issues!

Are you able to shed any light on this: https://github.com/wp-strap/wordpress-webpack-workflow/issues/4

I'd forever be in your eternal debt if you could help me out. I'm wracking my brain with this haha.