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  > [email protected] 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                               

Answer 1

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 

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

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

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