nuxt-community / express-template

Starter template for Nuxt 2 with Express.
https://codesandbox.io/s/github/nuxt-community/express-template
1.25k stars 239 forks source link

HTTPS localhost on latest version #122

Closed itsMattShull closed 6 years ago

itsMattShull commented 6 years ago

I'd like to see if anyone else has had success and whether there's an "official way" to do this. In order to get it working I had to first create an key and cert using the following command

openssl req \
    -newkey rsa:2048 \
    -x509 \
    -nodes \
    -keyout key.pem \
    -new \
    -out cert.pem \
    -subj /CN=localhost \
    -reqexts SAN \
    -extensions SAN \
    -config <(cat /System/Library/OpenSSL/openssl.cnf \
        <(printf '[SAN]\nsubjectAltName=DNS:localhost')) \
    -sha256 \
    -days 3650

Then I created a server.js file in the project with the following code

const { Nuxt, Builder } = require('nuxt');
const app = require('express')();
const http = require('http');
const https = require('https');
const fs = require('fs-extra');

let server;

const isProd = (process.env.NODE_ENV === 'production');
const port = process.env.PORT || 3000;

// Prepare for HTTP or HTTPS
if (process.env.NODE_ENV !== 'production') {
  const pkey = fs.readFileSync('./key.pem');
  const pcert = fs.readFileSync('./cert.pem');
  const httpsOptions = {
    key: pkey,
    cert: pcert,
  };
  server = https.createServer(httpsOptions, app);
} else {
  server = http.createServer(app);
}

// 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
app.use(nuxt.render);

function listen() {
  // Listen the server
  // app.listen(port, '0.0.0.0');
  server.listen(port, 'localhost');
  console.log(`Server listening on localhost:${port}.`);
}

// 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();
}

And finally I changed the npm run dev command from nuxt to NODE_ENV=development node server.js in package.json

When you run dev for the first time it'll say the site isn't secure when you go to https://localhost:3000. I used the following instructions to allow the cert.pem file to be trusted by my machine: https://stackoverflow.com/questions/7580508/getting-chrome-to-accept-self-signed-localhost-certificate#answer-15076602

Is there any reason not to do it this way? If so, what's the best way? Thanks!

This question is available on Nuxt community (#c99)
ghost commented 6 years ago

This issue as been imported as question since it does not respect express-template issue template. Only bug reports and feature requests stays open to reduce maintainers workload. If your issue is not a question, please mention the repo admin or moderator to change its type and it will be re-opened automatically. Your question is available at https://cmty.app/nuxt/express-template/issues/c99.