Easy HTTPS Setup with Sail and FrankenPHP

If you're developing a Laravel application locally using Laravel Sail (Laravel's Docker-based development environment), you might notic...

If you're developing a Laravel application locally using Laravel Sail (Laravel's Docker-based development environment), you might notice it defaults to regular HTTP. In this guide, I'll show you how to upgrade your local development environment to support HTTPS using FrankenPHP, making it ready for implementing cool features like Passkeys.

FrankenPHP is a Go-powered application server that modernizes PHP applications with built-in HTTPS, HTTP/2, HTTP/3, and enhanced performance capabilities

Let’s run the commands to install necessary packages:

sail composer require laravel/octane
sail artisan octane:install --server=frankenphp

Finally, add these lines to the laravel.test service definition in your application’s docker-compose.yml file:

services:
  laravel.test:
    ports:
        - '443:443' 
        - '443:443/udp' 
    environment:
      SUPERVISOR_PHP_COMMAND: "/usr/bin/php -d variables_order=EGPCS /var/www/html/artisan octane:start --host=localhost --port=443 --admin-port=2019 --https --watch" 
      XDG_CONFIG_HOME:  '/var/www/html/config' 
      XDG_DATA_HOME:  '/var/www/html/data'

I added the --watch flag to the octane command, so it will automatically reload when any code changes. It relies on the file-watching package.

sail npm install chokidar --save-dev

Once the installation is completed, restart your container.

Add the root certificate in /data/caddy/pki/authorities/local/root.crt to your Trusted Root Certification Authorities store to avoid browser certificate warnings in your local dev environment.

sail down
sail up -d

Now, you should be able to access your application via https://localhost. Remember to update your .env file as well.

APP_URL=https://localhost