Today most of the developers try to keep the local environment as much as similar to production. In that regard, today we will be looking at the precise steps that will help you configure HTTPS for localhost for the Next app.
In this post, I will be covering the MacOS.
The solution is quite simple but requires research & time, which I have already done with a successful test at the end.
By following the official documentation of Nuxtjs at this link
Example using HTTPS configuration
As the documentation illustrates, we need a server.key & server.crt in order to configure HTTPS for the local nuxt server. You can find additional information on creating server keys and certificates on localhost at certificates for localhost in an article at LetsEncrypt.
LetsEncrypt: “Making and trusting your own certificates”
Anyone can make their own certificates without help from a CA. The only difference is that certificates you make yourself won’t be trusted by anyone else. For local development, that’s fine.
The simplest way to generate a private key and self-signed certificate for localhost is with this OpenSSL command:
openssl req -x509 -out localhost.crt -keyout localhost.key \
-newkey rsa:2048 -nodes -sha256 \
-subj '/CN=localhost' -extensions EXT -config <( \
printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")
Once key and crt are generated you need to update the application nuxt.config.js as shown in image#1.
The only difference is that you need to replace server.key & server.crt with localhost.key & localhost.crt respectively.
After this, you need to restart the Nuxt server, and THAT’s it according to most of the articles :), that is not actually for MacOS. (that might be the final step for windows, I haven’t tried my self yet).
Download root certificate from Let’s Encrypt.
Link: https://letsencrypt.org/certs/isrgrootx1.pem
Once downloaded, add isrgrootx1.pem to the system keychain by double-clicking on it or just running the following command.
sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain isrgrootx1.pem
Now click on the ISRG Root X1
And set all dropdowns to the Always Trust
Next you need to double click at localhost.crt from the project root folder, the system will ask you for the system user password, and localhost.crt will be added to system keychain.
And do the same action of setting all the dropdowns to Always Trust.
Now we have self signed certificates, nuxt app is good to run under HTTPS for localhost, as you can see in the following screenshot.
Git repo is available here: https://github.com/dbcoder14/nuxtjs_https_localhost
That’s it hopefully you can also take advantage of this solution.
