Custom SSL certificate for localhost

[andresgutgon]

Hi, I'm Andres. I'm really enjoying learning Blitz. As an exercise I'm trying to use Passport.js + Blitz as explained in docs to connect my Instagram Account. Just for fun.

The thing is for doing that Facebook only allow httpS domains in the Oauth Flow dance.

I'm using mkcert which is amaizing.

mkcert -key-file localhost-key.pem -cert-file localhost-cert.pem localhost

This will give you the SSL certificate

And then I do a Custom Blitz server as explained in the doc
https://blitzjs.com/docs/custom-server

import blitz from "blitz/custom-server"
import fs from 'fs'
import path from 'path'
import { createServer } from "https"
import { parse } from "url"
import { log } from "@blitzjs/display"

const { PORT = "3000" } = process.env
const dev = process.env.NODE_ENV !== "production"
const app = blitz({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  console.log('__dirname', __dirname)
  createServer(
    {
      key: fs.readFileSync(path.resolve(__dirname, '../localhost-key.pem'), 'utf8'),
      cert: fs.readFileSync(path.resolve(__dirname, '../localhost-cert.pem'), 'utf8')
    },
    (req, res) => {
      // Be sure to pass `true` as the second argument to `url.parse`.
      // This tells it to parse the query portion of the URL.
      const parsedUrl = parse(req.url!, true)
      const { pathname } = parsedUrl
      handle(req, res, parsedUrl)
    }).listen(PORT, () => {
      log.success(`Ready on https://localhost:${PORT}`)
    }
  )
})

Sooo, my question

All this works nice. I can do Ouath Flow with Facebook. With Blitz + Passport + SSL + localhost.
But I was wondering how hard would be to allow default blitz config to pass something like this:

    localhostSslCertificate: {
      key: fs.readFileSync(path.resolve(__dirname, '../localhost-key.pem'), 'utf8'),
      cert: fs.readFileSync(path.resolve(__dirname, '../localhost-cert.pem'), 'utf8')
    }

I fear that having a custom server will get me in troubles if I want to use lambdas with something like Vercel. I would rather prefer not to have to define a server.ts file as explained to have SSL

[andresgutgon]

Nice article explaining how to use mkcert just in case someone wants to try : )

[MrLeebo]

Not an answer to your question, but as an alternative approach, you could set up a passport local strategy to substitute for Facebook in local dev. In the same fashion that you stub out email integrations in dev.

[andresgutgon]

I want to develop and debug real OAuth in my dev environment. For emails is nice to mock but for Oauth I think is nicer to be able to do the real thing

[abuuzayr]

To clarify: you are worried that your custom server setup would not fly on a hosting service such as Vercel, is that correct?

If yes, and if the only reason you are having a custom server is so that you can deploy SSL, would it be useful to know that Vercel would automatically issue SSL certificates for your domain/s?

https://vercel.com/blog/automatic-ssl-with-vercel-lets-encrypt

[andresgutgon]

Yes, I guess SSL in Vercel is not a problem. My concern is with having a custom server.ts file. I think having a custom server you lost some things in a platform like Vercel like SSG but maybe I'm wrong

[abuuzayr]

from Vercel's docs:

A custom server can not be deployed on Vercel

So here's the thing:

• you want SSL on localhost? Go ahead and use your custom server.ts while in development
• On Vercel, I'm not sure what they would do if they found a server.ts file in your repository, but its likely that they won't run it anyway but they would still issue you an SSL cert for your domain.

So with that you have achieved both SSL on localhost/development and on production.

[andresgutgon]

This is what they do. They advise agains using a custom server.

For this reason my proposal for having SSL on localhost is to be able to pass some kind of config to "native" NextJS dev server. Well, through Blitz that generates nextjs server in the end

[MrLeebo]

Instead of modifying server.ts, you could set up nginx as a reverse proxy server to enforce SSL in front of your web server.

[andresgutgon]

Yes, I could do that. But I wanted to know if would be interesting to have a config in this project to convert into SSL for local development without needing a reverse proxy setup or Docker. Just a Node server : ).

Anyway what I'm doing for now is to have server.ts ignored and when I need SSL I cp localhost-ssl-server.ts into server.ts to do my tests. And then revert back to NextJS server