Crusader of Friendship

I love Valet. It’s simple, lightweight, and fast. I also love WordPress. And most of the time, I use Valet when working on WordPress projects. For the most part, the process is super smooth with very few hiccups. But every now and then I come across a WordPress project that requires a publicly accessible site with a secure connection, and for a very long time I struggled to get Valet’s secure and share features to work in these cases.

Since there are plenty of alternative development environments out there, I simply made a switch whenever this issue came up. But finally, after deciding to tackle the issue head on, I was able to work out a solution! Since this was a pretty annoying issue for me, I thought I’d share what I found in case it is helpful to anyone else out there. To be thorough, I’ll assume you don’t have Valet installed.

Step 1 – Install Valet

You can find a complete installation guide at the Laravel website, but the gist is to install via composer with:

composer global require larval/valet
valet install

Step 2 – Serve your dev site with Valet

Again, you can find instructions at the same site linked above, but for convenience:

cd ~/path/to/your/dev/site
valet link

Step 3 – Secure your site

valet secure

Step 4 – Add URL and SSL workaround in WordPress

This is the meat of the solution. Here we need to trick WordPress so it doesn’t attempt to redirect to http_host and result in a redirect loop. You can do this by adding the following to the top of your wp-config.php file:

if ( isset( $_SERVER['HTTP_X_ORIGINAL_HOST'],$_SERVER['HTTP_X_FORWARDED_HOST'] ) ) {
	$_SERVER['HTTPS'] = 'on';
	$_SERVER['HTTP_HOST'] = $_SERVER['HTTP_X_FORWARDED_HOST'];
	define( 'WP_HOME', 'https://' . $_SERVER['HTTP_X_FORWARDED_HOST'] );
	define( 'WP_SITEURL', 'https://' . $_SERVER['HTTP_X_FORWARDED_HOST'] );
}

Step 5 – Import Valet certificate in your browser

This step is necessary to get your browser to trust your dev site. Rather than list out these additional steps, here is a great post describing the process in FireFox.

Step 6 – Share your dev site!

valet share

And voila! You should now have a randomly generated, publicly accessible, and secured URL for your dev site.

Optional step for paid ngrok accounts

Valet share uses ngrok to tunnel to localhost under the hood. So if you have a paid ngrok account, you are able to use a reserved domain. This is helpful as the random URL provided to free accounts changes each time you share your dev site. To do this, you can do the following:

Step 7 – Get your ngrok authtoken

You can find this in your ngrok dashboard.

Step 8 – Set your authtoken

~/.composer/vendor/laravel/valet/bin/ngrok authtoken [_your_authtoken_]

Step 9 – Specify a reserved domain when sharing with Valet

valet share -subdomain=[your_subdomain] -region=[your_region]

This will result in a URL that looks something like [your_subdomain].[your_region].ngrok.io

And that’s it! I hope this is helpful to someone. I know I certainly struggled with this for a while. I should note that I have shared this with colleagues and on one occasion the steps above didn’t work out, so I’m sorry in advance if you’re also in that boat. But for the most part, the above has worked very reliably for me.

Happy coding!