React localhost problem with http => https - reactjs

Question

I used the instructions from the official react documentation, but localhost still starts from http://.
My package.json file where I tried to add a solution.
I also tried 'set HTTPS = true && npm start'.
{
"name": "project",
"version": "1.0.0",
"description": "Project",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack -p",
"start": "webpack-dev-server --hot --inline -d && HTTPS=true react-scripts start",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#babel/polyfill": "^7.8.7",
"formik": "^2.1.4",
"ramda": "^0.27.0",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-https-redirect": "^1.1.0",
"react-iframe": "^1.8.0",
"react-router-dom": "^5.0.1",
"react-scripts": "^3.4.1",
"react-scroll-up-button": "^1.6.4",
"styled-components": "^5.0.1",
"whatwg-fetch": "^3.0.0"
},
"devDependencies": {
"#babel/core": "^7.7.5",
"#babel/plugin-proposal-async-generator-functions": "^7.8.3",
"#babel/plugin-proposal-class-properties": "^7.7.4",
"#babel/plugin-transform-async-to-generator": "^7.8.3",
"#babel/plugin-transform-regenerator": "^7.8.7",
"#babel/preset-env": "^7.7.6",
"#babel/preset-react": "^7.7.4",
"autoprefixer": "^9.6.1",
"babel-loader": "^8.0.6",
"css-loader": "^3.2.0",
"file-loader": "^4.2.0",
"gh-pages": "^2.2.0",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.12.0",
"postcss-loader": "^3.0.0",
"react-inlinesvg": "^1.2.0",
"sass-loader": "^7.2.0",
"style-loader": "^1.0.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
}
}
webpackconfig.js
const path = require("path");
const Html = require('html-webpack-plugin');
module.exports = {
entry: [
"whatwg-fetch",
"./js/index.js",
],
output: {
filename: "js/out.js",
path: path.resolve(__dirname, "build")
},
devServer: {
port: 3001,
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
}
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
{
loader: "postcss-loader",
options: {
plugins: () => [
require("autoprefixer")()
],
},
},
'sass-loader',
]
},
{
test: /\.(jpg|jpeg|gif|png)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
publicPath: 'images',
outputPath: 'images',
}
}
},
{
test: /\.(eot|ttf|woff|woff2)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
publicPath: 'fonts',
outputPath: 'fonts',
}
}
},
]
},
plugins: [
new Html({
filename: 'index.html',
template: './index.html',
})
]
};
I'm a beginner and I can't deal with it, if someone can help me, I will be very grateful.

Answer 1

The options for SET HTTPS=true are for projects that are made with create-react-app. Since you have a webpack configuration file of your own, you have to change the configuration for enabling HTTPS.
You can do this with:
devServer: {
https: true
}
This enables a self signed certificate. You can provide a certifiate with:
devServer: {
https: true,
key: fs.readFileSync('/path/to/server.key'),
cert: fs.readFileSync('/path/to/server.crt'),
ca: fs.readFileSync('/path/to/ca.pem'),
}
Docs

Answer 2

In package.json try add set HTTPS=true instead of HTTPS=true in start script.