0

I want to run my angular (7+) project with ssl certificate on localhost ( https://localhost:4200).

I tried the following from this link source - Get angular-cli to ng serve over HTTPS:

1) angular.json

{
 "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
 "projects": {
   "<PROJECT-NAME>": {
       "architect": {
           "serve: {
               "options": {
                   "sslKey": "<relative path from angular.json>/server.key",
                   "sslCert": "<relative path from angular.json>/server.crt",
                   ...
               }, ...
             }, ...
         }, ...
     }, ...
 }, ...

}

2) browser-sync

ng serve --ssl true --ssl-key /node_modules/browser-sync/lib/server/certs/server.key --ssl-cert /node_modules/browser-sync/lib/server/certs/server.crt

When I am running: ng serve--ssl I am getting this log:

** Angular Live Development Server is listening on localhost:4200, open your browser on https://localhost:4200/ **

In browser

enter image description here

que1326
  • 2,227
  • 4
  • 41
  • 58
  • is your certificate self signed? – John Kane Jul 30 '19 at 15:11
  • Why do you want to do this? Browsers trust localhost the same as https – bryan60 Jul 30 '19 at 15:14
  • @JohKane yes - generated it with https://www.selfsignedcertificate.com/ – que1326 Jul 30 '19 at 15:17
  • @bryan60 yes, but facebook sdk doesn't – que1326 Jul 30 '19 at 15:18
  • I've used the facebook sdk over localhost plenty of times, not sure what you're talking about... they're fully aware developers need to run in a localhost environment – bryan60 Jul 30 '19 at 15:19
  • @bryan60 yes, you are right ... I am getting some logs in the console that sounds like ( from fb sdk ): method not working anymore on http://domain. I have tried initially to fix the issue from fb app settings, didn't work and now...here we are – que1326 Jul 30 '19 at 15:24
  • 1
    this is an xy problem... you want to achieve x but you're asking how to achieve y in order to accomplish x. I'd instead ask how to handle the specific error from fb and mention that you've attempted running angular over ssl as a solution – bryan60 Jul 30 '19 at 15:27
  • @bryan60 thanks for the suggestion Bryan !! – que1326 Jul 30 '19 at 15:49
  • @que1326 I believe that you will see that when you self sign a certificate – John Kane Jul 30 '19 at 16:05

1 Answers1

0

I'm not sure if you are writing code in a Windows dev environment but if you are here are the steps you'll need to run through to make this happen

  1. Install Chocolatey (to install OpenSSL for Windows)
  2. Install OpenSSL
  3. Create OpenSSL Certificate
  4. Install Certificate
  5. Update npm package.json start script

Rather than copy the steps in detail here, I'll link to a guide I've built on how to do this for Windows dev environments as well as an Angular SSL starter project I've built out

Brian Mikinski
  • 123
  • 1
  • 10