Config https localhost - quan1997ap/angular-app-note GitHub Wiki

https://www.linkedin.com/pulse/angular-app-https-localhost-supriya-bhattacherjee

While developing the angular application, we came to a point where we need to host our application on HTTPS like from 'http://localhost:4200' to 'https://localhost:4200'.

I will be sharing my knowledge on how to configure the angular app with HTTPS.

I have used OpenSSL to generate a certificate, thanks to the Git Bash, where I can easily create a self-signed certificate. I already have an angular app developed which is running on the "http://localhost:4200".

Please follow the below command to create a hello-world project :

  ng new https-self-signed-app

In the first step, we will create a self-signed certificate with the help of OpenSSL. There are other open-source projects which offer OpenSSL, but I will be using Git Bash for the same.

image

Create a certificate configuration file inside a folder such as "C:\SSL", which will contain all the information to create the certificate.

[req]
default_bits = 2048
prompt = no
default_md = sha256
x509_extensions = v3_req
distinguished_name = dn


[dn]
C = BE
ST = digem
L = brussels
O = EY
OU = PAS
emailAddress = [email protected]
CN = localhost


[v3_req]
subjectAltName = @alt_names


[alt_names]
DNS.1 = localhost

image

image

Save the above file as certificate.cnf.

Open the git bash terminal, go to the create folder "C:\SSL" which contains the certificate.cnf, execute the below command to generate a certificate and the private key.

openssl req -new -x509 -newkey rsa:2048 -sha256 -nodes -keyout localhost.key -days 3560 -out localhost.crt -config certificate.cnf

The above command will create a key and crt file which will be required to configure the HTTPS. Go to the folder we can see both the files,

No alt text provided for this image Click on the localhost.crt file and select " Install Certificate", choose "Current User" in Store Location. Click Next

image

select current user.

image

Saving the certificate to the store,

image

We move the certificate and key file inside the angular app in a folder named : "SSL"

https-self-signed-app
 - node_modules
 - src
 - ssl

image

Now, we configure the certificate in the angular app, we can do it in two ways, One we can pass the certificate and the key in the ng serve as an argument. we can run the below command

ng serve --ssl --ssl-key ssl/localhost.key --ssl-cert ssl/localhost.crt

image

configure "https" in the environment.ts frontend url.

In a second way, we configure inside the "angular.json"

image

and then run the command

ng serve --ssl

Finally, if we run the URL with "https://localhost:4200", it will run successfully with the valid certificate.