How to run NUXT (npm run dev) with HTTPS in localhost?
Solution 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:
- 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'))
}
}
Solution 2
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!
Solution 3
You can use mkcert
- Install mkcert:
brew install mkcert
brew install nss # if you use Firefox
- Add mkcert to your local root CAs:
mkcert -install
- 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
- 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/
Solution 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.
PedroD
I'm a computer scientist specialized in robotics and automation.
Updated on February 12, 2022Comments
-
PedroD over 2 years
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