• notice
  • Congratulations on the launch of the Sought Tech site

About the process of setting Https for local development of React projects

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.


  1. Certificate

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

  3. 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


Tags

Technical otaku

Sought technology together

Related Topic

1 Comments

Leave a Reply

+