How to run NUXT (npm run dev) with HTTPS in localhost?

Question

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

NUXT uses webpack. I'll add the dependencies and versions to the post — PedroD, Jul 10 '19 at 13:10
so you can use the https dev server to solve the problem? https://webpack.js.org/configuration/dev-server/#devserverhttps — Darem, Jul 10 '19 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 '19 at 13:53
sorry, I mispelled, I meant https. Still that's not the cause, it had no effect at all... what am I missing? — PedroD, Jul 10 '19 at 14:20
ok. I also removed the nginx part as it is not the core of the issue. — PedroD, Jul 10 '19 at 14:50
Have you follow the guid from the official website? https://nuxtjs.org/api/configuration-server/#example-using-https-configuration — Darem, Jul 11 '19 at 06:07
I'm having the same problem - no error from nuxt... it simply won't work. — Stefan Morris, Oct 25 '19 at 03:56

score 45 · Accepted Answer · edited Jun 20 '20 at 09:12

45

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:

Go to project main dir;
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

Add requirements to the top of the nuxt.config.js;

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

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'))
  }
}

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 11 '19 at 19:16

NiKO

1,682
13
13

1

Having the same problem as OP. Followed these instructions to the letter but no luck. – Stefan Morris Oct 25 '19 at 03:57
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. – Lincoln Lemos Oct 24 '20 at 14:37
2

@LincolnLemos try: server: process.env.NODE_ENV !== 'production' ? {https: {...}} : {}, – NiKO Oct 26 '20 at 18:27
Just in case somebody need it, follow this instructions https://stackoverflow.com/a/60516812/4059304 and this https://security.stackexchange.com/questions/163199/firefox-certificate-can-t-be-installed/163200#163200 – Simon Puente Nov 20 '20 at 17:29

score 13 · Answer 2 · answered Nov 15 '19 at 14:37

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!

score 2 · Answer 3 · answered Sep 23 '20 at 23:55

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.

Jonathan Robbins · Answer 4 · 2021-04-21T08:08:21.373

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

How to run NUXT (npm run dev) with HTTPS in localhost?

4 Answers4

HTTPS on local dev - NUXT style

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

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

3. Create / Modify local build script to specify hostname

Linked

How to run NUXT (npm run dev) with HTTPS in localhost?

4 Answers4

HTTPS on local dev - NUXT style

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

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

3. Create / Modify local build script to specify hostname

Linked

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