To fix it on macOS, follow the instructions of my tutorial how to install a local certificate in macOS. If you ran npm run start, and access (or the port your app uses, if different - in my case it’s 3008), you should see this warning message: Now change the start script in the package.json file to: "start": "export HTTPS=true&SSL_CRT_FILE=cert.pem&SSL_KEY_FILE=key.pem react-scripts start", You should now have the files cert.pem and key.pem in the folder. Now run: openssl rsa -in keytmp.pem -out key.pem
In the project root folder, run: openssl req -x509 -newkey rsa:2048 -keyout keytmp.pem -out cert.pem -days 365 This step will work fine for any app, not just create-react-app apps, but I will include it in this post, as a reference. To set an iframe as the target for the developer tools: Select the iframe context picker. The Inspector, Console, Debugger and all other developer tools will then target that iframe (essentially behaving as if the rest of the page does not exist). Now we also need to generate a local certificate. You can point the developer tools at a specific iframe within a document.
This sets the HTTPS environment variable to the true value. it’s a bit more complicated that we’d like.Īs you know, the create-react-app application is ran using npm run start, or simply npm start, because in the package.json file’s scripts section, we have this line: "start": "react-scripts start"Ĭhange that to: "start": "HTTPS=true react-scripts start" You will get HTTPS almost with no effort in most cases, especially if you use a modern platform like Netlify or Vercel to serve your app.īut locally. If you built an application using create-react-app and you’re running it locally on your computer, by default it is served using the HTTP protocol.Īny application running in production will be served using HTTPS, the secure version of HTTP.
0 kommentar(er)
