React localhost problem with http => https

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.

Agney · Accepted Answer · 2020-04-05 13:55:08Z

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

answered Apr 5, 2020 at 13:55

Agney

19.3k7 gold badges60 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Chidambaram Over a year ago

I have used webpack for react js app. I have used "devserver" code block in webpack config file for local, but is it possible for production mode?

Agney Over a year ago

@Chidambaram no, you are not supposed to use devserver for production

Chidambaram Over a year ago

so how can we set HTTPS=true in production mode? any specific module for this?

Agney Over a year ago

There are several options to achieve the same depending on the server and hosting platform. Here's an overview

aopanasenko · Accepted Answer · 2020-04-05 13:27:53Z

1

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

answered Apr 5, 2020 at 13:27

aopanasenko

4784 silver badges14 bronze badges

Collectives™ on Stack Overflow

React localhost problem with http => https

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related