Nuxt.js: localhost https

[miecio1212]

Hey how can i run localhost on https.
I'm going to make pwa using yours framework and I'd like to test it localy :).

_{This question is available on Nuxt.js community (#c124)}

[Atinux]

Hi @miecio1212

You can use nuxt.js programmatically to create an https server:

const https = require('https')
const fs = require('fs')
const Nuxt = require('nuxt')
const isProd = process.env.NODE_ENV === 'production'
const port = process.env.PORT || 3000

// Nuxt.js setup
let config = require('./nuxt.config.js')
config.dev = !isProd
const nuxt = new Nuxt(config)
if (!isProd) {
  nuxt.build() // Build in development mode
}

// HTTPS Server
const options = {
  key: fs.readFileSync('test/fixtures/keys/agent2-key.pem'),
  cert: fs.readFileSync('test/fixtures/keys/agent2-cert.pem')
}

// Create the server
https
.createServer(options, nuxt.render)
.listen(port)

console.log(`Server listening on https://localhost:${port}`)

Then, in your package.json:

...
"scripts": {
  "dev": "node server.js",
  "build": "nuxt build",
  "start": "NODE_ENV=production node server.js"
}
...

[miecio1212]

Hey :D @Atinux Thank you for fast replay.
I'll try it asap and give you feedback.
Btw maybe you could just add flag to nuxt.
'nuxt --https' ? :)

[Atinux]

I can't add this option to nuxt since it require more configuration.

I think it's better if the user create its own https server and use nuxt as a middleware.

[miecio1212]

Thank you it works great 👍 :>

[itsMattShull]

I'm trying to get this working for nuxt and express. I know its a bit different but wanted to drop a link in case someone could help me on the nuxt-express repo: https://github.com/nuxt-community/express-template/issues/60

[atmar]

Https code for latestst Nuxt version (1.0.0-rc11)

const { Nuxt, Builder } = require('nuxt')

const https = require('https')
const fs = require('fs')
const isProd = (process.env.NODE_ENV === 'production')
const port = process.env.PORT || 3000

// We instantiate nuxt.js with the options
const config = require('./nuxt.config.js')
config.dev = !isProd
const nuxt = new Nuxt(config)

// Render every route with Nuxt.js

// Build only in dev mode with hot-reloading
if (config.dev) {
  new Builder(nuxt).build()
    .then(listen)
    .catch((error) => {
      console.error(error)
      process.exit(1)
    })
}
else {
  listen()
}

function listen() {

  const options = {
    key: fs.readFileSync('/home/store/certs/store.key'),
    cert: fs.readFileSync('/home/store/certs/store.crt')
  };

  https
    .createServer(options, nuxt.render)
    .listen(port)
  console.log('Server listening on `localhost:' + port + '`.')
}

[ahmad-sa3d]

Thanks a lot guys for your awesome answers, Thanks atmar you code works well

[miecio1212]

https://www.gatsbyjs.org/docs/local-https/

[MarvinXu]

@Atinux doesn't work. Nuxt is not a constructor

[Shardik04]

@Atinux @pi0 @clarkdo
setting up localhost as https is working properly.
but how can we use it with https://github.com/nuxt-community/proxy-module

[Atinux]

Nuxt 2.0 will support https out of the box so proxy module will work also out of the box

[HotspurHN]

@Atinux Hello, are there any docs about nuxt-edge https usage? Thank you.

[Atinux]

It's now possible with nuxt-edge and Nuxt 2, take a look at https://github.com/nuxt/docs/blob/2.0/en/api/configuration-server.md

[cmty[bot]]

This question has been resolved by @Atinux, see answer.

[Shardik04]

Nuxt 2.0 will support https out of the box so proxy module will work also out of the box

Hi @Atinux ,

I have tried with nuxt-edge but still its not working with https://github.com/nuxt-community/proxy-module

[siberiadev]

Https code for latestst Nuxt version (1.0.0-rc11)

const { Nuxt, Builder } = require('nuxt')

const https = require('https')
const fs = require('fs')
const isProd = (process.env.NODE_ENV === 'production')
const port = process.env.PORT || 3000

// We instantiate nuxt.js with the options
const config = require('./nuxt.config.js')
config.dev = !isProd
const nuxt = new Nuxt(config)

// Render every route with Nuxt.js

// Build only in dev mode with hot-reloading
if (config.dev) {
  new Builder(nuxt).build()
    .then(listen)
    .catch((error) => {
      console.error(error)
      process.exit(1)
    })
}
else {
  listen()
}

function listen() {

  const options = {
    key: fs.readFileSync('/home/store/certs/store.key'),
    cert: fs.readFileSync('/home/store/certs/store.crt')
  };

  https
    .createServer(options, nuxt.render)
    .listen(port)
  console.log('Server listening on `localhost:' + port + '`.')
}

Hi, could you tell me, how to use this code? Where to put it?

[Shardik04]

Https code for latestst Nuxt version (1.0.0-rc11)

const { Nuxt, Builder } = require('nuxt')

const https = require('https')
const fs = require('fs')
const isProd = (process.env.NODE_ENV === 'production')
const port = process.env.PORT || 3000

// We instantiate nuxt.js with the options
const config = require('./nuxt.config.js')
config.dev = !isProd
const nuxt = new Nuxt(config)

// Render every route with Nuxt.js

// Build only in dev mode with hot-reloading
if (config.dev) {
  new Builder(nuxt).build()
    .then(listen)
    .catch((error) => {
      console.error(error)
      process.exit(1)
    })
}
else {
  listen()
}

function listen() {

  const options = {
    key: fs.readFileSync('/home/store/certs/store.key'),
    cert: fs.readFileSync('/home/store/certs/store.crt')
  };

  https
    .createServer(options, nuxt.render)
    .listen(port)
  console.log('Server listening on `localhost:' + port + '`.')
}

Hi, could you tell me, how to use this code? Where to put it?

@siberiadev This file should be named as server.js and added to root folder of your dir

[mv5]

Hi @Atinux,
I'm confused by this issue and hope you might help me with this.
I'm deploying to AWS s3 with cloudfront, and I've generated a certificate through aws,
I get a self signed certificate error when trying to access an api.
how would I go about supplying my certificate here?
or should I generate a different certificate for this? in that case, should I upload it to my s3 bucket and change the file path accordingly?
thank for the help

[aldarund]

@mv5 its not quite clear how\where u running your app. You said s3+cloudfront but its for static files. ARe u using generate mode?

[mv5]

@aldarund yes, that's right

[aldarund]

@mv5 then it has nothing to do wiht nuxt and u dont need nuxt https at all. It should be configured at cloudfront level

[luatnd]

It's now possible with nuxt-edge and Nuxt 2, take a look at https://github.com/nuxt/docs/blob/2.0/en/api/configuration-server.md

Hi, the link is not working, can you update this doc link?

--- Updated: ---
There was a v2.3 link:
https://github.com/nuxt/docs/blob/2.3/en/api/configuration-server.md

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.