Adding https to your localhost

#https #localhost #storyblok #macos

Had some troubles with configuring https certificate for my fresh local install of Next.js about a week ago. Luckily, I've found a way, how to deal with it.

First of all, you need to install (if not) Homebrew. Homebrew is a package manager for Mac OS. If you have it, let's install mkcert:

brew install mkcert

Then we need to create new local CA (Certificate Authority):

mkcert -install

After that we'll create certificates for localhost:

mkcert localhost

If everything is fine (usually it is), you will see something like this:

Then we need to install local-ssl-proxy. The package will proxy all requests from https to http with given certificates which we generated before.

npm install -g local-ssl-proxy

Final step. We must start local-ssl-proxy:

local-ssl-proxy --source 3010 --target 3000 --cert localhost.pem --key localhost-key.pem

And then you can navigate to your server via https://localhost:3010.

This guide will especially useful for those who already uses Storyblok Beta V2. They suddenly forbade http protocol and now you can only use https. But they made great instructions, which I've transformed into note for myself to remember.