Currently validated through Herd 1.9.1. Last Updated August 7th, 2024
There are a few options to get Herd/Reverb working with SSL & across your local network among other devices:
- Use a dedicated reverb domain (reverb.test)
- Integrate it into your existing domain (mynewcoolsite.test)
- Open it up to your local Network.
The biggest issue with Herd Pro is that you cannot use Reverb out of the box with a site that has SSL enabled. Here is the workaround for it all to play nicely together.
First you will need to create two sites. The two I have here are as follows:
-
mynewcoolsite This is a new Laravel 11 project using Breeze for the ease of Inertia. This also follows the setup for Reverb line by line.
-
reverb This is an empty directory, we are going to use this only for editing a Nginx config and setting up a proxy to the reverb service.
Of note is that I'm using Herd Pro as well, so all additional services are being used directly though Herd Pro itself.
Onec those two sites have their SSL's as provisioned by Herd, we'll now fire up the Reverb Service. You can see I'm running both MySQL and Reverb as my Services and both are active.
Once this is running copy the enviroment variables and we'll adjust our Laravel Project which is the mycoolnewsite directory.
The updated .env variables should now be:
APP_URL=https://mynewcoolsite.test
REVERB_APP_ID=1001
REVERB_APP_KEY=laravel-herd
REVERB_APP_SECRET=secret
REVERB_HOST="reverb.test"
REVERB_PORT=443
REVERB_SCHEME=https
Notice that the variables for herd match the app ID, and that the host matches that additional directory that we setup and added an SSL to. Same for the Port. This is very important as this Host is where we are going to now edit an Nginx conf file and setup our proxy.
In your ~/Library/Application Support/Herd/config/valet/Nginx/ (Mac) directory, there will be a reverb.test.conf file. Open that and you'll find a faily standard Nginx config file. We're going to replace a few lines. The directory is similar on Windows, and I find it easiest to right click in the additional services section in Herd and navigate to the config directory that way. From here the directory structure is the same.
In the .conf file you'll want to find these lines:
location / {
rewrite ^ "/Applications/Herd.app/Contents/Resources/valet/server.php" last;
}
And replace it with the following lines:
location / {
proxy_http_version 1.1;
proxy_set_header Host $http_host;
proxy_set_header Scheme $scheme;
proxy_set_header SERVER_PORT $server_port;
proxy_set_header REMOTE_ADDR $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
# This is for Mac
proxy_pass http://0.0.0.0:8080;
# This is for Windows
proxy_pass http://127.0.0.1:8080;
}
Important! Ensure if you're on Windows to use https://127.0.0.1:8080. If you use http://localhost:8080, calls from Axios/Fetch will take up to 10x the response time based on our testing.
Once this is saved, stop and restart the general Herd services (Nginx, PHP, etc...) and you should be all set. Visting mynewcoolsite.test will now have the ability to listen to Reverb via Echo!
If you are not looking to use a seperate domain for resolution, you can also ensure this works on a singlar test domain. Hat tip to @isiungk for pointing this out.
The steps are very similar above, but you don't need to create an alternate domain. Simply secure the domain you want to use reverb on, and edit its Nginx conf file.
Do NOT remove the initial location lines of
location / {
rewrite ^ "/Applications/Herd.app/Contents/Resources/valet/server.php" last;
}
Instead, above that, add a new location line that targets the app directory. If you are using APIs you'll also want to target the apps directory as well. The Nginx conf should now look like this:
location /app {
proxy_http_version 1.1;
proxy_set_header Host $http_host;
proxy_set_header Scheme $scheme;
proxy_set_header SERVER_PORT $server_port;
proxy_set_header REMOTE_ADDR $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
# This is for Mac
proxy_pass http://0.0.0.0:8080;
# This is for Windows
proxy_pass http://127.0.0.1:8080;
}
location / {
rewrite ^ "/Applications/Herd.app/Contents/Resources/valet/server.php" last;
}
Lastly, ensure that your .env is updated with the proper credentials to the same host:
APP_URL=https://mynewcoolsite.test
REVERB_APP_ID=1001
REVERB_APP_KEY=laravel-herd
REVERB_APP_SECRET=secret
REVERB_HOST="mynewcoolsite.test"
REVERB_PORT=443
REVERB_SCHEME=https
(section WIP) If you wish to visit the site on your local network from multiple devices there are a few additional steps to take. We use this specifically to test across devices such as iPad controlled Pi based kiosk etc.
For Mac, we use NAMO for the ease of DNS resolution. Enter in the site name e.g. mynewcoolsite.test in NAMO and you're basically set.
Next, we need edit the sites Nginx conf file again to open it up. It should look like this at the top and we need to remove the 127.0.0.1's from both port 80 and 443.
server {
listen 127.0.0.1:80;
#listen 127.0.0.1:80; # valet loopback
server_name mynewcoolsite.test www.mynewcoolsite.test *.mynewcoolsite.test;
return 301 https://$host$request_uri;
}
server {
listen 127.0.0.1:443 ssl;
#listen VALET_LOOPBACK:443 ssl; # valet loopback
server_name mynewcoolsite.test www.mynewcoolsite.test *.mynewcoolsite.test;
...
It should now look like this:
server {
listen 80;
#listen 127.0.0.1:80; # valet loopback
server_name mynewcoolsite.test www.mynewcoolsite.test *.mynewcoolsite.test;
return 301 https://$host$request_uri;
}
server {
listen 443 ssl;
#listen VALET_LOOPBACK:443 ssl; # valet loopback
server_name mynewcoolsite.test www.mynewcoolsite.test *.mynewcoolsite.test;
...
Now you'll need to restart your Herd services for this change to take place.
Next you'll need to grab the valet certificate authority files and install those on the devices you want to test. Typically this just involves transfering the .pem file, or installing it in your Keychain Access on any additional devices. In Chromium you can add it directly thorugh the certificate settings of the program. We have tested this on Windows, Mac, and Ubuntu 24.04 with Gnome.
The file location for the files needed are in the config directory in valet/CA and should be listed as LaravelValetVASelfSigned. There are three of them.
Once those are installed AND trusted on the additional devices (make sure to trust them!) there is one last step and that is ensuring the device that is wanting to display this site needs to have their DNS entry set to your local servers IP. In a nutshell, your additional devices will resolve itself to the computer where NAMO/Herd is installed, and it will then resolve your .test domain(s) established in it.
For Windows we have been testing Technitium DNS Server but haven't gotten passthrough to work yet like NAMO.
That should be all that is needed to get your devices talking together on the same local network and utlizing SSL's properly though the entire process.
Amazing work! Thanks.
Leaving this here for someone that finds this and runs into the same issue as me:
Make sure to replace BOTH if it is not working.
location / { rewrite ^ "/Applications/Herd.app/Contents/Resources/valet/server.php" last; }Also for windows users, the NGINX .conf files are located here:
%USERPROFILE%\.config\herd\config\valet\Nginx