conradfuhrman · June 19, 2025 14:02 · Aug 7, 2024 · Apr 4, 2024 · Apr 3, 2024 · Apr 3, 2024
diff --git a/herd-reverb-ssl.md b/herd-reverb-ssl.md
@@ -1,45 +1,55 @@
+*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.
+
+## Use a Dedicated Reverb Domain
 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:
 
-- **reverb-ssl** - This is a new Laravel 11 project using Breeze for the ease of Inertia. This also follows the setup for Reverb line by line.
-- **wss-reverb-ssl** - 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.
+- **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.
 
-![Screenshot 2024-04-03 at 2 33 08 PM](https://gist.github.com/assets/455824/44e2feb3-59ab-432d-ae65-67cc64b51e06)
+- **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.
 
 ![Screenshot 2024-04-03 at 2 36 17 PM](https://gist.github.com/assets/455824/3d21d22b-9957-4cf0-b00f-186db25ac431)
 
-Once this is running copy the enviroment variables and we'll adjust our Laravel Project which is the reverb-ssl directory.
+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://reverb-ssl.test
+APP_URL=https://mynewcoolsite.test
 
 REVERB_APP_ID=1001
 REVERB_APP_KEY=laravel-herd
 REVERB_APP_SECRET=secret
-REVERB_HOST="wss-reverb-ssl.test"
+REVERB_HOST="reverb.test"
 REVERB_PORT=443
 REVERB_SCHEME=https
 ```
 
-Notice that they match the app ID, and that the nost matches that additional directory that we setup and added an SSL to. This is very important as this Host is where we are going to now edit an Nginx conf file and setup our proxy.
+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/` directory, there will be a wss-reverb-ssl.test file. Open that and you'll find a faily standard Nginx config file. We're going to replace a few lines.
+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.
 
-You'll want to find these lines:
+In the .conf file you'll want to find these lines:
 ```
 location / {
     rewrite ^ "/Applications/Herd.app/Contents/Resources/valet/server.php" last;
 }
 ```
 
-And replace those lines with these:
+And replace it with the following lines:
 ```
 location / {
         proxy_http_version 1.1;
@@ -55,11 +65,115 @@ location / {
         proxy_pass http://0.0.0.0:8080;
         
         # This is for Windows
-        proxy_pass http://localhost:8080;
+        proxy_pass http://127.0.0.1:8080;
 }
 ```
 
-Once this is saved, stop and restart the general Herd services (Nginx, PHP, DNSMasq) and you should be all set. Visting reverb-ssl.test will now have the ability to listen to Reverb via Echo!
+**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!
 
 ![Screenshot 2024-04-03 at 2 52 15 PM](https://gist.github.com/assets/455824/676e4bf1-f47c-4965-9bc5-c9c9d8e9d150)
 
+## Integrate it into your existing domain
+
+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
+```
+
+## Open it up to your local Network 
+(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.
diff --git a/herd-reverb-ssl.md b/herd-reverb-ssl.md
@@ -51,7 +51,11 @@ location / {
         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://localhost:8080;
 }
 ```
 

diff --git a/herd-reverb-ssl.md b/herd-reverb-ssl.md
@@ -39,16 +39,19 @@ location / {
 }
 ```
 
-And replace them with these:
+And replace those lines with these:
 ```
-location ~ [^/]\.php(/|$) {
-    fastcgi_split_path_info ^(.+\.php)(/.+)$;
-    fastcgi_pass $herd_sock;
-    fastcgi_index "/Applications/Herd.app/Contents/Resources/valet/server.php";
-    include fastcgi_params;
-    fastcgi_param SCRIPT_FILENAME "/Applications/Herd.app/Contents/Resources/valet/server.php";
-    fastcgi_param HERD_HOME "/Users/conrad/Library/Application Support/Herd";
-    fastcgi_param PATH_INFO $fastcgi_path_info;
+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";
+
+        proxy_pass http://0.0.0.0:8080;
 }
 ```
 

diff --git a/herd-reverb-ssl.md b/herd-reverb-ssl.md
@@ -25,7 +25,7 @@ REVERB_APP_KEY=laravel-herd
 REVERB_APP_SECRET=secret
 REVERB_HOST="wss-reverb-ssl.test"
 REVERB_PORT=443
-REVERB_SCHEME=http
+REVERB_SCHEME=https
 ```
 
 Notice that they match the app ID, and that the nost matches that additional directory that we setup and added an SSL to. This is very important as this Host is where we are going to now edit an Nginx conf file and setup our proxy.

diff --git a/herd-reverb-ssl.md b/herd-reverb-ssl.md
@@ -24,7 +24,7 @@ REVERB_APP_ID=1001
 REVERB_APP_KEY=laravel-herd
 REVERB_APP_SECRET=secret
 REVERB_HOST="wss-reverb-ssl.test"
-REVERB_PORT=8080
+REVERB_PORT=443
 REVERB_SCHEME=http
 ```
 
@@ -52,26 +52,7 @@ location ~ [^/]\.php(/|$) {
 }
 ```
 
-In the `echo.js` file. I did need to adjust a few settings and hopefully this can also be resolved the further things progress:
-
-```
-import Echo from 'laravel-echo';
-
-import Pusher from 'pusher-js';
-window.Pusher = Pusher;
-
-window.Echo = new Echo({
-    broadcaster: 'reverb',
-    key: import.meta.env.VITE_REVERB_APP_KEY,
-    wsHost: import.meta.env.VITE_REVERB_HOST,
-    wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
-    //wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
-    //forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
-    enabledTransports: ['ws'],
-});
-```
-
-Once this is saved, stop, and restart the general Herd services (Nginx, PHP, DNSMasq) and you should be all set. Visting reverb-ssl.test will now have the ability to listen to Reverb via Echo!
+Once this is saved, stop and restart the general Herd services (Nginx, PHP, DNSMasq) and you should be all set. Visting reverb-ssl.test will now have the ability to listen to Reverb via Echo!
 
 ![Screenshot 2024-04-03 at 2 52 15 PM](https://gist.github.com/assets/455824/676e4bf1-f47c-4965-9bc5-c9c9d8e9d150)
 
diff --git a/herd-reverb-ssl.md b/herd-reverb-ssl.md
@@ -52,6 +52,25 @@ location ~ [^/]\.php(/|$) {
 }
 ```
 
+In the `echo.js` file. I did need to adjust a few settings and hopefully this can also be resolved the further things progress:
+
+```
+import Echo from 'laravel-echo';
+
+import Pusher from 'pusher-js';
+window.Pusher = Pusher;
+
+window.Echo = new Echo({
+    broadcaster: 'reverb',
+    key: import.meta.env.VITE_REVERB_APP_KEY,
+    wsHost: import.meta.env.VITE_REVERB_HOST,
+    wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
+    //wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
+    //forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
+    enabledTransports: ['ws'],
+});
+```
+
 Once this is saved, stop, and restart the general Herd services (Nginx, PHP, DNSMasq) and you should be all set. Visting reverb-ssl.test will now have the ability to listen to Reverb via Echo!
 
 ![Screenshot 2024-04-03 at 2 52 15 PM](https://gist.github.com/assets/455824/676e4bf1-f47c-4965-9bc5-c9c9d8e9d150)

diff --git a/herd-reverb-ssl.md b/herd-reverb-ssl.md
@@ -1,9 +1,9 @@
-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 to get it working.
+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 create two sites. The two I have here are as follows:
+First you will need to create two sites. The two I have here are as follows:
 
-- reverb-ssl - This is a new Laravel 11 project using Breeze for the ease of Inertia. This also follows the setup for Reverb line by line.
-- wss-reverb-ssl - This is an empty directory, we are going to use this soley to edit an Nginx config and setup a proxy to the reverb service.
+- **reverb-ssl** - This is a new Laravel 11 project using Breeze for the ease of Inertia. This also follows the setup for Reverb line by line.
+- **wss-reverb-ssl** - 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.
 
 ![Screenshot 2024-04-03 at 2 33 08 PM](https://gist.github.com/assets/455824/44e2feb3-59ab-432d-ae65-67cc64b51e06)
 

diff --git a/herd-reverb-ssl.md b/herd-reverb-ssl.md
@@ -1,4 +1,4 @@
-The biggest issue with Herd Pro is that you cannot use Reverb out of the bow with a site that has SSL enabled. Here is the workaround to get it working.
+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 to get it working.
 
 First create two sites. The two I have here are as follows:
 

diff --git a/herd-reverb-ssl.md b/herd-reverb-ssl.md
@@ -0,0 +1,58 @@
+The biggest issue with Herd Pro is that you cannot use Reverb out of the bow with a site that has SSL enabled. Here is the workaround to get it working.
+
+First create two sites. The two I have here are as follows:
+
+- reverb-ssl - This is a new Laravel 11 project using Breeze for the ease of Inertia. This also follows the setup for Reverb line by line.
+- wss-reverb-ssl - This is an empty directory, we are going to use this soley to edit an Nginx config and setup a proxy to the reverb service.
+
+![Screenshot 2024-04-03 at 2 33 08 PM](https://gist.github.com/assets/455824/44e2feb3-59ab-432d-ae65-67cc64b51e06)
+
+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.
+
+![Screenshot 2024-04-03 at 2 36 17 PM](https://gist.github.com/assets/455824/3d21d22b-9957-4cf0-b00f-186db25ac431)
+
+Once this is running copy the enviroment variables and we'll adjust our Laravel Project which is the reverb-ssl directory.
+
+The updated .env variables should now be:
+
+```
+APP_URL=https://reverb-ssl.test
+
+REVERB_APP_ID=1001
+REVERB_APP_KEY=laravel-herd
+REVERB_APP_SECRET=secret
+REVERB_HOST="wss-reverb-ssl.test"
+REVERB_PORT=8080
+REVERB_SCHEME=http
+```
+
+Notice that they match the app ID, and that the nost matches that additional directory that we setup and added an SSL to. 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/` directory, there will be a wss-reverb-ssl.test file. Open that and you'll find a faily standard Nginx config file. We're going to replace a few lines.
+
+You'll want to find these lines:
+```
+location / {
+    rewrite ^ "/Applications/Herd.app/Contents/Resources/valet/server.php" last;
+}
+```
+
+And replace them with these:
+```
+location ~ [^/]\.php(/|$) {
+    fastcgi_split_path_info ^(.+\.php)(/.+)$;
+    fastcgi_pass $herd_sock;
+    fastcgi_index "/Applications/Herd.app/Contents/Resources/valet/server.php";
+    include fastcgi_params;
+    fastcgi_param SCRIPT_FILENAME "/Applications/Herd.app/Contents/Resources/valet/server.php";
+    fastcgi_param HERD_HOME "/Users/conrad/Library/Application Support/Herd";
+    fastcgi_param PATH_INFO $fastcgi_path_info;
+}
+```
+
+Once this is saved, stop, and restart the general Herd services (Nginx, PHP, DNSMasq) and you should be all set. Visting reverb-ssl.test will now have the ability to listen to Reverb via Echo!
+
+![Screenshot 2024-04-03 at 2 52 15 PM](https://gist.github.com/assets/455824/676e4bf1-f47c-4965-9bc5-c9c9d8e9d150)
+