Running the sandbox locally over HTTPS on Mac OS

In certain testing scenarios it can be important to test using a SSL cert. mkcert makes this easy to do locally. Here are instructions to use react-scripts and run with a non-standard port, or use Nginx to use the default 443 port with multiple domains.

Using HTTPS option in react-scripts

Install mkcert and create a certificate

brew install mkcert
cd sandbox
mkcert "alloyio.com"

Edit your /etc/hosts file to include this line:

127.0.0.1 alloyio.com

Run this commands in the sandbox folder:

HTTPS=true SSL_CRT_FILE=./alloyio.com.pem SSL_KEY_FILE=./alloyio.com-key.pem HOST=alloyio.com npm start

Visit https://alloyio.com:3000/ to see your https site.

Using Nginx proxy pass

Install mkcert, Nginx, and create the certificate

brew install mkcert
brew install nginx
cd sandbox
mkcert "alloyio.com"

Edit your /etc/hosts file to include this line:

127.0.0.1 alloyio.com

Add a server file for Nginx config at /usr/local/etc/nginx/servers/alloyio.conf:

server {
  listen 443 ssl;
  ssl_certificate      /Users/josnyder/dev/alloy/sandbox/alloyio.com+1.pem;
  ssl_certificate_key  /Users/josnyder/dev/alloy/sandbox/alloyio.com+1-key.pem;

  server_name alloyio.com;
  location / {
    proxy_pass http://127.0.0.1:3000/;
  }
}

Start Nginx as root to be able to use port 443:

sudo nginx

Run the sandbox on port 3000:

cd sandbox
PORT=3000 npm start

Visit https://alloyio.com

To stop Nginx, run:

sudo nginx -s stop

Testing cross-domain features

You can run a second sandbox locally with a different domain name. Follow the steps above for a different domain name to have two running at the same time. This is especially useful for testing cross-domain iframe scenarios. For example setup an alternate domain and then hit /iframed.html, and make sure cookies can be written on the alternate domain.