namecheap DNS config does not work with https on Heroku custom domain

I found out what's wrong, after uploading ssl certificate to heroku, I should stop using myapp.herokuapp.com, instead use myapp.com.herokudns.com, so in namecheap's DNS config, I should have the following:

CNAME Record    @        myapp.com.herokudns.comCNAME Record    www      www.myapp.com.herokudns.com

I don't think the redirect is necessary (even in Namecheap's document it says you should not set CNAME on bare domain, but should redirect www instead). I tried to use URL redirect record www https://myapp.com to replace the www CNAME record but it won't work.

Besides, when I created the certificate with lets encrypt, I only certificated domain myapp.com, but forgot www.myapp.com, so when access www domain, the browser complains certificate is from myapp.com, once I expanded the certificate to cover www.myapp.com, with the above config, all domains works fine with a green padlock.

You redirect to https://www.myapp.com. The browser expects a certificate for www.myapp.com there but according to your description there is only a certificate for myapp.herokuapp.com. Because the hostname in the URL does not match the subject of the certificate the browser complains about the bad certificate.

Your solution (using CNAME for @) in Namecheap works for https fwding to amazon ELB instances too. My domain is served by Namecheap. Their recommendation (incorrect as you pointed out) was to URL fwd https traffic for my domain (x.com) to my amazon elb instance (which has my ssl cert for x.com). URL fwding gets a conn refused error from NameCheap's servers.

Using a CNAME for @ displays a nice green secure seal for https URLs. I also added a CNAME www to the same amazon elb instance for non-https traffic.