cant run when start https server.

[jacksnow00]

var https = require('https');
var ssl = {
key: fs.readFileSync('./src/ssl/key.pem', 'utf8'),
cert: fs.readFileSync('./src/ssl/server.crt', 'utf8'),
passphrase: '1234567810'
};
var httpsSever = https.createServer(ssl,server);
httpsSever.listen(port, function () {
console.log(The server is running at http://localhost:${port}/);
});

==>>> I got error
https://localhost:3001/main.js?134747cfdaa6f8908fb5 Failed to load resource: the server responded with a status of 404 (Not Found)

[Strandedpirate]

Ran into this issue yesterday when switching over to https. There are number of locations that require changes to make the jump but for this specific issue of main.js 404'ing do the following to fix it:

runServer.js
change this:
const RUNNING_REGEXP = /The server is running at http:\/\/(.*?)\//;
to this:
const RUNNING_REGEXP = /The server is running at http(?:s?):\/\/(.*(?::?[0-9]*)\/?)/;

see test cases for urls: https://regex101.com/r/2wKdry/1

_server.js_
change this:

httpsSever.listen(port, function () {
  console.log(`The server is running at http://localhost:${port}/`);
});

to this:

httpsServer.listen(port, function () {
  console.log(`The server is running at https://localhost:${port}/`);
});

side note: (optional)

I highly recommend that you create a better configuration so that you are not hard-coding protocols, hosts and ports all over the place that, out of the box in this kit, requires shotgun surgery when they change:

config.js - example

export const http = {
    port: process.env.WEBSITE_PORT || 443,
    host: process.env.WEBSITE_HOST || `localhost`,
    protocol: process.env.WEBSITE_PROTOCOL || `https`,
    get url() {
      const port = !this.port ? '' : `:${this.port}`;
      return `${this.protocol}://${this.host}${port}`;
    },
  },

console.log(http.url);
would print:
https://localhost:443

start.js
This is the meat of the issue regarding browser-sync and its proxying feature.

change this:

proxy: {
  target: host,
  middleware: [wpMiddleware, ...hotMiddlewares],
},

to this:

port: port, // get the port from config.js
proxy: {
  target: `https://localhost:${port}`, // again I highly recommend not hard-coding this, pull the url from config.js
  middleware: [wpMiddleware, ...hotMiddlewares],
},

[Strandedpirate]

Also, in newer versions of browser-sync (>= 2.17.2 in my case) you can now utilize your own SSL certificate when browser-sync is proxying your application with the following configuration. Unfortunately their documentation is outdated and too short to cover all scenarios but by setting the https key & cert literal bs will pick it up and use it instead of their self-signed certificate; Hooray!. In other words you can purchase a real SSL cert and use it through browser-sync now while in development.

port: config.http.port,
proxy: {
  target: config.http.url,
  middleware: [wpMiddleware, ...hotMiddlewares],
},
https: { // browser-sync will pick these settings up and use them instead of its self-signed SSL cert for localhost
  key: 'src/sslcert/my_server.key',
  cert: 'src/sslcert/my_domain_ssl.crt',
},

Reference:
Available options: see utils.js

https ={
  key, 
  cert,
  cs,
  passphrase
}

---

Background:
broswer-sync comes with its own self-signed SSL certificate for localhost that causes SHA1 errors with every request and I think it prevents websockets from working properly? At the very least I don't want to be seeing certificate errors with no ability to rule it out as being the root cause of any given error I'm running into in my app. see #754

[ulani]

@gkmbinh thank you very much for crating this issue! Unfortunately, we have close it due to inactivity. Feel free to re-open it or join our Discord channel for discussion.

NOTE: The main branch has been updated with React Starter Kit v2, using JAM-style architecture.