foreword

Yesterday, someone in the group asked a question about how to enable Https when the React project was developed locally. I was also very curious when I saw this question, because sometimes when we connect with third-party APIs, we need to use Https to send requests. For example, some Api of the map. I checked the relevant documents and made a demo to try it out. Below I will share my own related process, hoping to provide some ideas for those who need it.

text

1. Modify the React startup command

2. First, we use React's scaffolding to CREATE-REACT-APPinitialize a demo project, open the package.jsonfile, and modify the startup command

    "scripts": {         "start": "HTTPS=true scripts/start.js",         "build": "node scripts/build.js",        "test": "node scripts/test.js"    },

copy code

After modification, we start the project first and find that the browser prompts that it is not a private connection

Don't worry, we're just getting started.

Since we don't have a valid certificate yet, our connection is deemed insecure, so we need a certificate.

2. Certificate

3. We use mkcert to generate the certificate , of course, we need to install mkcert first

4. MacOs install mkcert can use brew

        brew install mkcert        brew install nss //这里firefox

copy code

• Arch Linux installation can use yay

         yay -S --noconfirm --needed go         yay -S --noconfirm --needed mkcert

copy code

• Ubuntu installation can use apt-get

        sudo apt-get updatesudo apt install wget libnss3-tools                export VER="v1.4.3" && wget -O mkcert https://github.com/FiloSottile/mkcert/releases/download/${VER}/mkcert-${VER}-linux-amd64\                下载文件后，使文件可执行并将二进制文件放在 `/usr/local/bin` 下面。        chmod +x mkcert\        sudo mv mkcert /usr/local/bin\

copy code

• Windows installation can use scoop

        scoop bucket add extras        scoop install mkcert

copy code

Next, you need to create a CA root certificate locally, open the terminal, and enter mkcert -install,

Then generate a certificate, mkcert localhost 127.0.0.1, // you can continue to add other domain names or IP addresses with spaces, the default is pem format, if you want to know more mkcert commands, you can usemkcert -help

Enter the mkcert -CAROOTcommand and find the certificate rootCA.pem

Create a new .cert folder in the root directory of our demo project, put the rootCA.pem file in it, and execute it in the terminal of the project root directory

mkcert -key-file ./.cert/key.pem -cert-file ./.cert/rootCA.pem "localhost"

Press Enter to execute, you can see that there is an additional key.pem certificate file in the .cert folder

Because the content of the .cert folder is only used in local development, we can add it to the .gitignore file

Then we modify the startup command of the demo project

    "scripts": {        "start": "HTTPS=true SSL_CRT_FILE=./.cert/rootCA.pem SSL_KEY_FILE=./.cert/key.pem node scripts/start.js",        "build": "node scripts/build.js",        "test": "node scripts/test.js"      }

copy code

At this time, we start the project again, and we can see that it is ok

mkcert Github

Thanks for reading, please like and comment