Run creat-react-app with HTTPS

Introduction

In current days we host websites on Vercel and Netlify and we are automatically assigned a generated SSL to provide with Secured connection(HTTPS), but in the development period we are unaware of the process to run it with HTTPS…


This content originally appeared on DEV Community and was authored by Pranjal Jain

Introduction

In current days we host websites on Vercel and Netlify and we are automatically assigned a generated SSL to provide with Secured connection(HTTPS), but in the development period we are unaware of the process to run it with HTTPS and we miss out on some testing which works only on HTTPS like google apis, etc.

Steps

  1. Configure creat-react-app project to handle https
  2. Generate SSL Certificates for localhost
  3. Add certificates to the project
  4. Trust certificate in browser
  5. Run the project secured

Configure creat-react-app project to handle https

Add a file .env in the root directory of the project with the line

HTTPS=true

Generate SSL Certificates for localhost

Follow this article to generate a SSL certificate for localhost. and place the certificates in the root directory.



after following this article you must have 8 new files in your directory, which are

rootCA.key
rootCA.pem
rootCA.srl
server.crt
server.csr
server.csr.cnf
server.key
v3.ext

Add certificates to the project

in the .env file add these two properties and there paths.

SSL_CRT_FILE=server.crt
SSL_KEY_FILE=server.key

Here you will be using the server.crt as your certificate file & server.key as your key for certificate.

Trust certificate in browser

Follow this article to trust the certificate on your browser

Run the project secured

Hence you have HTTPS enabled for your project.
HTTPS Enabled

If you're stuck anywhere do leave a comment.

Follow me on Twitter at Twitter/pranjaljain0
Follow me on Github at github/pranjaljain0

Happy Hacking!


This content originally appeared on DEV Community and was authored by Pranjal Jain


Print Share Comment Cite Upload Translate Updates
APA

Pranjal Jain | Sciencx (2021-06-27T13:19:00+00:00) Run creat-react-app with HTTPS. Retrieved from https://www.scien.cx/2021/06/27/run-creat-react-app-with-https/

MLA
" » Run creat-react-app with HTTPS." Pranjal Jain | Sciencx - Sunday June 27, 2021, https://www.scien.cx/2021/06/27/run-creat-react-app-with-https/
HARVARD
Pranjal Jain | Sciencx Sunday June 27, 2021 » Run creat-react-app with HTTPS., viewed ,<https://www.scien.cx/2021/06/27/run-creat-react-app-with-https/>
VANCOUVER
Pranjal Jain | Sciencx - » Run creat-react-app with HTTPS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/06/27/run-creat-react-app-with-https/
CHICAGO
" » Run creat-react-app with HTTPS." Pranjal Jain | Sciencx - Accessed . https://www.scien.cx/2021/06/27/run-creat-react-app-with-https/
IEEE
" » Run creat-react-app with HTTPS." Pranjal Jain | Sciencx [Online]. Available: https://www.scien.cx/2021/06/27/run-creat-react-app-with-https/. [Accessed: ]
rf:citation
» Run creat-react-app with HTTPS | Pranjal Jain | Sciencx | https://www.scien.cx/2021/06/27/run-creat-react-app-with-https/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.