'How to run NUXT (npm run dev) with HTTPS in localhost?
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
Solution 1:[1]
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 2:[2]
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'))
}
}
Solution 3:[3]
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.
Solution 4:[4]
Nuxt 3:
options.server from
nuxt.configis not supported. You can use--port, --host, --https, --ssl-certand--ssl-keyinstead.
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 :-)
Solution 5:[5]
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.exeinC:\Program Files\Git\usr\bin
- if you're on Windows you can find
- 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
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
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Waldo |
| Solution 2 | Ali Havasi |
| Solution 3 | Damian Perez |
| Solution 4 | |
| Solution 5 |