This tutorial is about How to Setup HTTPS Locally with create-react-app. We will try our best so that you understand this guide. I hope you like this blog, How to Setup HTTPS Locally with create-react-app. If your answer is yes, please do share after reading this.
So lets keep reading for intertesting info:
Check How to Setup HTTPS Locally with create-react-app
A website must now have an SSL certificate in order to function. User confidence is increased as a secure connection is created between the browser and the website. An SSL certificate can be incorporated into a website in various ways. However, most of them are difficult and time consuming. However, you can quickly add an SSL certificate using the AWS Amplify Dashboard. So, using AWS Amplify and Route 53, this article will walk you through the process of hosting a simple React app with an SSL certificate.
How to configure HTTPS locally with create-react-app
Add HTTPS
in your package. Son, update the startup script to include https:
“scripts”: { “start”: “HTTPS=true react-scripts start”, “build”: “react-scripts build”, “test”: “react-scripts test”, “eject”: “react-scripts eject ” },
Running yarn start after this step will show you this screen in your browser: At this stage, you are already configured to use https. But you don’t have a valid certificate, so your connection is assumed to be insecure.
Create an SSL certificate
The easiest way to get a certificate is through mkcert.
# Install mkcert toolbrew install mkcert
# Install nss (only needed if you’re using Firefox) brew install nss
# Install mkcert on your machine (create a CA) mkcert -install
After running the above commands, you will have created a certificate authority on your machine that will allow you to generate certificates for all your future projects. From the root of your create-react-app project, you should now run:
# Create .cert directory if it doesn’t exist mkdir -p .cert
# Generate the certificate (run from the root of this project) mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem “localhost”
We will store our generated certificates in the .cert directory. These should not be committed to version control, so you should update your .gitignore to include the .cert directory. Next, we need to update the startup script again to include our newly created certificate:
“hyphens”:
{ “start”: “HTTPS=true SSL_CRT_FILE=./.cert/cert.pem SSL_KEY_FILE=./.cert/key.pem react-scripts start”, “build”:
“react script compilation”,
“test”: “react scripts test”,
“eject”: “react scripts eject” },
Final words: How to Setup HTTPS Locally with create-react-app
I hope you understand this article, How to Setup HTTPS Locally with create-react-app. If your answer is no, you can ask anything via the contact forum section related to this article. And if your answer is yes, please share this article with your friends and family to give us your support.
