42

EDIT: Updated the text in general to keep it shorter and more concise.

I am trying to configure HTTPS when I run npm run dev so I can test MediaStream and alike locally (for which browsers require me to provide HTTPS).

I am trying to configure it through nuxt.config.js but without any success.

Here is my nuxt.config.js file:

import fs from "fs";
import pkg from "./package";

export default {
  mode: "spa",

  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "description", name: "description", content: pkg.description },
    ],
    link: [
      { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
    ],
  },

  /*
  ** Customize the progress-bar color
  */
  loading: { color: "#fff" },

  /*
  ** Global CSS
  */
  css: [
    "element-ui/lib/theme-chalk/index.css",
    "@makay/flexbox/flexbox.min.css",
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    "@/plugins/element-ui",
    "@/plugins/vue-upload",
    "@/plugins/axios-error-event-emitter",
    "@/plugins/eventemitter2",
    "@/plugins/vue-awesome",
    "@/plugins/webrtc-adapter",
    "@/plugins/vue-browser-detect-plugin",
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    "@nuxtjs/axios",
    "@nuxtjs/pwa",
  ],
  /*
  ** Axios module configuration
  */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
    baseURL: process.env.NODE_ENV === "production" ? "https://startupsportugal.com/api/v1" : "http://localhost:8080/v1",
  },

  /*
  ** Build configuration
  */
  build: {
    transpile: [/^element-ui/, /^vue-awesome/],

    filenames: {
      app: ({ isDev }) => (isDev ? "[name].[hash].js" : "[chunkhash].js"),
      chunk: ({ isDev }) => (isDev ? "[name].[hash].js" : "[chunkhash].js"),
    },

    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      // Run ESLint on save

      if (ctx.isClient) config.devtool = "#source-map";

      if (ctx.isDev) {
        config.devServer = {
          https: {
            key: fs.readFileSync("server.key"),
            cert: fs.readFileSync("server.crt"),
            ca: fs.readFileSync("ca.pem"),
          },
        };
      }

      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: "pre",
          test: /\.(js|vue)$/,
          loader: "eslint-loader",
          exclude: /(node_modules)/,
        });
      }
    },
  },
};

Also, here you can see my dependencies in package.json:

"dependencies": {
    "@makay/flexbox": "^3.0.0",
    "@nuxtjs/axios": "^5.3.6",
    "@nuxtjs/pwa": "^2.6.0",
    "cross-env": "^5.2.0",
    "element-ui": "^2.4.11",
    "eventemitter2": "^5.0.1",
    "lodash": "^4.17.11",
    "nuxt": "^2.8.0",
    "pug": "^2.0.3",
    "pug-plain-loader": "^1.0.0",
    "quagga": "^0.12.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "vue-awesome": "^3.5.3",
    "vue-browser-detect-plugin": "^0.1.2",
    "vue-upload-component": "^2.8.20",
    "webrtc-adapter": "^7.2.4"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^0.0.1",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.15.1",
    "eslint-config-airbnb-base": "^13.1.0",
    "eslint-config-standard": ">=12.0.0",
    "eslint-import-resolver-webpack": "^0.11.1",
    "eslint-loader": "^2.1.2",
    "eslint-plugin-import": ">=2.16.0",
    "eslint-plugin-jest": ">=22.3.0",
    "eslint-plugin-node": ">=8.0.1",
    "eslint-plugin-nuxt": ">=0.4.2",
    "eslint-plugin-promise": ">=4.0.1",
    "eslint-plugin-standard": ">=4.0.0",
    "eslint-plugin-vue": "^5.2.2",
    "nodemon": "^1.18.9"
  }

However when I run npm run dev it still does not provide HTTPS, but does not provide any error output as well...

The output is exactly the same as if I didn't have the HTTPS configurations in nuxt.config.js:

$ npm run dev

> clothing-demo@1.0.0 dev /mnt/d/tralha/clothing-demo-app/frontend
> nuxt --hostname 0.0.0.0 --port 3000


   ╭────────────────────────────────────────────────╮
   │                                                │
   │   Nuxt.js v2.8.1                               │
   │   Running in development mode (spa)            │
   │                                                │
   │   Listening on: http://192.168.126.241:3000/   │
   │                                                │
   ╰────────────────────────────────────────────────╯

ℹ Preparing project for development                                                                                                                                                                                  14:30:34
ℹ Initial build may take a while                                                                                                                                                                                     14:30:35
✔ Builder initialized                                                                                                                                                                                                14:30:35
✔ Nuxt files generated                              
10
  • are you using webpack?
    – Darem
    Jul 10, 2019 at 8:43
  • NUXT uses webpack. I'll add the dependencies and versions to the post
    – PedroD
    Jul 10, 2019 at 13:10
  • so you can use the https dev server to solve the problem? webpack.js.org/configuration/dev-server/#devserverhttps
    – Darem
    Jul 10, 2019 at 13:32
  • I'm a bit lost. I added the following to my nuxt.config.js and tried "npm run dev" but nothing new happens... What am I missing? if (ctx.isDev) { config.devServer = { http2: true, }; }
    – PedroD
    Jul 10, 2019 at 13:53
  • 1
    why do you use http2 if you want https?
    – Darem
    Jul 10, 2019 at 13:56

7 Answers 7

80

HTTPS on local dev - NUXT style

Solution is described in NUXT documentation:

https://nuxtjs.org/api/configuration-server/#example-using-https-configuration

This may be achieved with:

  1. Go to project main dir;
  2. Create private and public key;
openssl genrsa 2048 > server.key
chmod 400 server.key
openssl req -new -x509 -nodes -sha256 -days 365 -key server.key -out server.crt
  1. Add requirements to the top of the nuxt.config.js;
import path from 'path'
import fs from 'fs'
  1. Extend or add configuration of server in nuxt.config.js;
server: {
  https: {
    key: fs.readFileSync(path.resolve(__dirname, 'server.key')),
    cert: fs.readFileSync(path.resolve(__dirname, 'server.crt'))
  }
}
5
  • 1
    Having the same problem as OP. Followed these instructions to the letter but no luck. Oct 25, 2019 at 3:57
  • 1
    This works for me, but how can I have this to only when I'm in development mode? This code is running in production and I don't want this. Oct 24, 2020 at 14:37
  • 7
    @LincolnLemos try: server: process.env.NODE_ENV !== 'production' ? {https: {...}} : {},
    – NiKO
    Oct 26, 2020 at 18:27
  • 1
    Just in case somebody need it, follow this instructions stackoverflow.com/a/60516812/4059304 and this security.stackexchange.com/questions/163199/… Nov 20, 2020 at 17:29
  • I'm using localhost.run. It works and easy to setup. You don't need to do all those setup to make local authority to work with emulator/simulator. Apr 2, 2022 at 8:58
16

You must follow the doc spec here https://nuxtjs.org/api/configuration-server/#example-using-https-configuration, BUT you must add code in the server/index.js file, otherwise it won’t work at all.

So in the server/index.js add const https = require('https') at the top and replace :

app.listen(port, host)
  consola.ready({
    message: `Server listening on http://${host}:${port}`,
    badge: true
  })

With

https.createServer(nuxt.options.server.https, app).listen(port, host);

And now it’s working!

0
13

You can use mkcert

  1. Install mkcert:
brew install mkcert
brew install nss # if you use Firefox
  1. Add mkcert to your local root CAs:
mkcert -install
  1. In your terminal, navigate to your site's root directory or whichever directory you'd like the certificates to be located at. And run:
mkcert localhost
  1. Add the following to your nuxt.config.js:
    server: {
        https: {
            key: fs.readFileSync(path.resolve(__dirname, 'localhost-key.pem')),
            cert: fs.readFileSync(path.resolve(__dirname, 'localhost.pem'))
        }
    }

https://web.dev/how-to-use-local-https/

1
  • Easiest and most complete solution. Thank you. To add on this, const fs = require('fs'); const path = require('path'); must be included at the top of the nuxt.config.js file. Jan 7, 2022 at 13:47
4

If for some reason you enable https just like Jan Doleczek said and you also make use of axios module, make sure to disable https like this in nuxt.config.js:

  axios: {
    baseURL: 'http://yourapi:8000',
    https:false,
  },

If you don't do that all your axios request will use https instead of https.

1
  • don't understand you last sentence. did you mean will use http instead of https? Jan 16, 2022 at 1:55
1

Nuxt 3:

options.server from nuxt.config is not supported. You can use --port, --host, --https, --ssl-cert and --ssl-key instead.

official docs

Something like this:

{
    "scripts": {
        "dev": "nuxi dev --host website.test --https --ssl-key key.pem --ssl-cert cert.pem --port 3000",
}

I hope I didn't lose -- in example :-)

0

In the scenario to run local on https and share a domain or subdomain to share secured cookies for Single Sign On etc follow the below

Prerequisites

  • openssl
    • if you're on Windows you can find openssl.exe in C:\Program Files\Git\usr\bin
  • your .pfx certificate
    • including password if required

1. Create .crt and .key files using openssl.exe

1.1 Create key

  • pkcs12 -in '[full-path-and-name-of-your].pfx' -nocerts -out '[full-path-and-name-to-create-the].key'
  • if prompted enter the password to open your .pfx

1.2 Create crt

  • pkcs12 -in '[full-path-and-name-of-your].pfx' -clcerts -nokeys -out '[full-path-and-name-to-create-the].crt'
  • Move the .key and .crt to the root of your source folder

See more details here

2. Update server config likely in nuxt.config.js

  • As other answers suggested follow the changes to set up https from Nuxt documentation
  • Enter the password used to at step 1 as the passphase value
  server: {
    https: {
      key: fs.readFileSync(path.resolve(__dirname, '[key-file-name].key')),
      cert: fs.readFileSync(path.resolve(__dirname, '[crt-file-name].crt')),
      passphrase: '[your password]'
    }
  }

3. Create / Modify local build script to specify hostname

"dev": "nuxt --hostname subdmain.domain.com --port 8000"

Your local will now serve on https on that domain/subdomain and port e.g. https://subdmain.domain.com:8000

0

None of the answers seems to work with Nuxt 3 especially when the current version uses defineNuxtConfig as of version 3.2.3. So I finally figure out how to do it with the current version.

For Nuxt 3 and using TypeScript

Install fs-extra and @types/fs-extra. Then inside nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
import fs from "fs-extra";
export default defineNuxtConfig({
  devServer: {
    host: "vios.uni.edu.my",
    port: 3000,
    https: {
      key: fs.readFileSync("../ssl/private.key").toString(),
      cert: fs.readFileSync("../ssl/cert.crt").toString(),
    },
  },
});

Since key key and cert required string type, we need to convert it to string via toString()

2
  • I get a "No default export found in imported module "fs-extra"." error, any idea how to fix this?
    – Thibault
    Mar 20 at 10:57
  • Have you tried to import it using an alias? import * as fs from "fs-extra"
    – fhlarif
    Mar 21 at 13:31

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.