Setting up Dev Server with HTTPS Proxy On macOS

During development, apps are usually served via HTTP. But Storyblok v2 requires your app is served via HTTPS. Below is a step by step guide on how you can set up an HTTPS proxy for your development server on macOS.

• Install mkcert for creating a valid certificate and Install localhost with mkcert: Open your terminal and run the commands below consecutively; make sure you have homebrew installed first.

brew install mkcert
mkcert -install
mkcert localhost

• Install the HTTPS proxy and run the proxy with the commands below: You need to have Node and NPM installed for this work.

npm install -g local-ssl-proxy // Installing the proxy
local-ssl-proxy --source 3010 --target 3000 --cert localhost.pem --key localhost-key.pem  // Running the proxy to target port 3000, you can change that any port of your choice but it should be what your app is running on in development.

HTTPS is now running on port 3010 and forwarding requests to http 3000.

You can also set up https::// with the following steps:

• Install homebrew. From a terminal, run the command:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

• Next, add the brew installation location to your $PATH by using the following command

echo "export PATH=/opt/homebrew/bin:$PATH" >> ~/.bash_profile && source ~/.bash_profile

• Install mkcert, this is used for creating a valid certificate on (Mac OS)

brew install mkcert
mkcert -install
mkcert localhost

Install and run the proxy

sudo npm install -g local-ssl-proxy
local-ssl-proxy --source 3010 --target 3000 --cert localhost.pem --key localhost-key.pem

You can start your development project on localhost and ensure It is running on http://localhost:3000. You can verify on your web browser with https://localhost:3010.