Configure NuxtJs to use HTTPS on localhost

Learn how to make localhost secure (HTTPS) by leveraging the use of a self-generated certificate

2 years ago

•

12 mins read

•

7341 views

• Javascript Tutorial NuxtJs Tutorial

In this post, you'll learn how to configure NuxtJs to use HTTPS on localhost development. The steps are quite straight forward but don't miss any of it to ensure that it's set up properly.

Step 1: Install mkcert

We'll be using mkcert which is a "simple tool for making locally-trusted development certificates" and what's nice about it is that it requires zero configuration. If you are using macOS and have Homebrew installed, do run the command below.

brew install mkcert
brew install nss # if you use Firefox
mkcert -install

Otherwise, for windows and Linux users, the procedure is almost the same and you can refer to it from the GitHub readme.

Step 2Generate certificate

Once you have installed mkcert, we'll have to generate the certificate now by running the command below.

mkcert -key-file key.pem -cert-file cert.pem localhost

The command above will generate key and cert for localhost.

Step 3: Nuxt Config

The next step is to add some configuration for nuxt.config.js and the config would be under the "server" property.

import path from 'path'
import fs from 'fs'

const config = {}

if (process.env.NODE_ENV === "development") {
  config.server = {
    https: {
      key: fs.readFileSync(path.resolve(__dirname, 'key.pem')),
      cert: fs.readFileSync(path.resolve(__dirname, 'cert.pem'))
    }
  }
}

export default config

The other default configs should be there too but for the sake of the example, I have omitted them.

Step 4: Package.json

"scripts": {
  "dev": "export NODE_TLS_REJECT_UNAUTHORIZED=0 && nuxt --env.NODE_TLS_REJECT_UNAUTHORIZED=0",
}

Lastly, update the package json "dev" command to export the environment and make use of it when running the application. Now run "npm run dev" or "yarn dev" and you will be able to see the console outputting https://localhost:3000.

Do note that you can update the host and port too if preferable. Now open the link in your browser and you should be able to see that the localhost is now served securely.