Sometimes you need to share your local Magento environment with the world. This may be to share it with someone, to test it on a real phone, or to test some kinds of api response for example.
Now you can go and open up your router settings and open a port to your computer, but that doesn't work in most company networks. Luckily for us there is tool which can bypass this all: ngrok.
ngrok basically opens a tunnel and publishes this at n url. It has SSL enabled by default. A big plus is that you get a panel where you can inspect all requests and even repeat them.
Hey, I'm running a developer focussed newsletter called MageDispatch.com, which is for the community and by the community. Here you can share links that you think that the community should know about. If you like this kind of technical content you will like this newsletter too.
Installing ngrok
This depends a bit on the used OS. Best is to follow the instructions on the ngrok website itself. Laravel Valet users are already done: it is included out of the box.
Running ngrok
The command to run ngrok is fairly simple:
ngrok http 80
Or, if you are a Laravel Valet user it is even easier. Navigate to the correct folder and run:
valet share
Rewriting the header
Now ngrok simply ports all traffic to your local port 80, but your development environment may not know which website it should serve. Ngrok has a configuration option for you to fix this: --host-header=rewrite. This way ngrok requests port 80 with the given host in the headers so your environment knows which host to serve.
ngrok http 80 --host-header=rewrite
Note: Laravel Valet users can skip this step, it is taken care of for you.
For the most common cases you are now ready to go.
Changing the urls for webhooks
Sometimes i work on projects where an api call is done which contains webhook urls, or users where the user is redirected to after an action for example. In these cases you want to provide the ngrok url. Herefore you need to change Magento base url.
When you start ngrok you get an screen similar to this, with the temporary url provided:
You can use n98-magerun2 to change the base url like this:
export SHOPHOST="acme-store.com" n98-magerun2 config:store:set web/unsecure/base_url http://$SHOPHOST/ n98-magerun2 config:store:set web/secure/base_url https://$SHOPHOST/ n98-magerun2 config:store:set web/unsecure/base_link_url https://$SHOPHOST/ n98-magerun2 config:store:set web/secure/base_link_url https://$SHOPHOST/ n98-magerun2 cache:flush
Putting it all together
So now we have a few puzzle pieces that we need to stitch together. First up: start ngrok. Normally we need to rewrite the host header, but in this case we want to respond to the actual url.
ngrok http 80
Now we need the webserver to now how to handle this url. In MAMP Pro you can change the url of the vhost. With Laravel Valet you can link an extra domain this way:
valet link acme-store.eu.ngrok.io
Note: There is an extra step for Laravel Valet users at the end of this post.
If you all did well you should now be able to access the ngrok url and see a working Magento store. To recap, this steps need to be taken:
Change the base urls.
Let your webserver know the correct domain.
Start ngrok without the
-host-header=rewriteparameter.
If it is not working for you dump the $_SERVER array in you index.php or pub/index.php and make sure the correct host is used.
Keeping the same domain
When you stop the ngrok command and restart it, you will get a new url everytime. When you're on a paid ngrok plan you can choose your own domain or ngrok subdomain, depending on the type of plan you have. You have to start the command like this:
ngrok http 80 -subdomain=acme-store -region eu
For Laravel Valet users this is a bit different:
valet share -subdomain=acme-store-com -region eu
Saving your configuration
I'm always looking in my terminal history what the exact command was. To fix this, i'm using the ngrok configuration to save this. Using it is quite simple. Just copy & paste this yml configuration in ~/.ngrok2/ngrok.yml:
tunnels:
acme-store:
proto: http
addr: 80
subdomain: acme-store
Note: the configuration file might be different on different platforms. Check the documentation for your OS.
Now you simply start the tunnel by running:
ngrok start acme-store
A note for Laravel Valet users
If you link the ngrok domain to your site, Valet automatically adds .test to the host. This causes Magento to redirect you to the correct domain without test, and thus you get in a redirect loop. There are a few possible fixes:
1. Disable base url checking:
n98-magerun2 config:store:set web/url/redirect_to_base 0
2. Add this code in your index.php or pub/index.php:
$_SERVER['HTTP_HOST'] = str_replace('.test', '', $_SERVER['HTTP_HOST']);
$_SERVER['SERVER_NAME'] = str_replace('.test', '', $_SERVER['SERVER_NAME']);
3. Create a custom Laravel Valet driver.
I haven't done this as i only needed this change for 1 host, but if you use this a lot this is a fine alternative.
Want to respond?