I would share this for anyone interested in running a create-react-app generated app with local dev using SSL.
Webpack Dev Server checks the .env file in the root of the project for any environment variables - so you can add the following line to the file:
HTTPS=true
Now when you run the application with npm start a localhost self-signed certificate will be generated and issued.
Chrome will complain that the certificate is not valid - for which you can do either of the following:
1. Enable invalid certificates for localhost by setting the Chrome flag here (paste into the URL box):
chrome://flags/#allow-insecure-localhost
OR...
2. Import the certificate to you Trusted Root Authorities certificate store...
First, save the certificate:
Visit the localhost dev server in Chrome, click the Not Secure warning and click the Certificate (invalid) button.
Select Details tab, and then Copy to File (I think it is labelled Export on Mac - I am on Windows).
Save the file as localhost.cer , and note the location - maybe in your project folder is a good location.
To import the Certificate (in Windows... I am sure its easy on MacOS too):
Now you need to import the certificate to the Trusted Root Certification Authorities store. For Windows, you can just double click on the localhost.cer file you saved, and choose to import for Local Machine, and then ensure you import to the Trusted Root Certification Authorities store, as mentioned.
Restart Chrome, and now you can test using SSL on localhost :-) So you can now do the PWA tests without needing to upload to a server first.
One last thing - Chrome now has Lighthouse built in so there is no need to install an extra extension - you can just select it from the Audits tab in Chrome DevTools
