4/27/2020 - #development #magento
by: Emilie Wittmann

Share and develop easily your local project!

What is ngrok? 

Ngrok is a tool that allows you to open your web development device from the outside, with a secured tunnel, with an url like qwerty.ngrok.io.
This url is accessible from the outside by anyone (your clients, your colleagues…) and from anywhere.

One of the first advantages is to easily test payment methods. In fact ngrok provides you an externally accessible url, it can also be contacted by PSP. So we can receive payment status informations on our local project and test one complete workflow of a payment and orders processing.

Another advantage is to see every HTTP requests that was made on your url on a local interface. You can also see every requests and replay them manually if needed.

For more security, you can also configure a password to close your local project to other people.

Ngrok et Magento

How to implement it?

  • You have to download and install the soft on your computer. You can find the download link in your ngrok dashboard after login.

  • For the first use of ngrok, you should execute one command line with the token. You can found this token in your ngrok dashboard. This token create a secure connexion with your computer and ngrok.

./ngrok authtoken $token

  • Then, you can start ngrok service on the port you want with this command line:

./ngrok http 80

You can find ngrok informations with the custom url open for your computer. In my example url is: http://62e73311.ngrok.io 

Session Status online
Account blackbird emilie (Plan: Free)
Update update available (version 2.3.35, Ctrl-U to update)
Version 2.3.34
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://62e73311.ngrok.io -> http://localhost:80
Forwarding https://62e73311.ngrok.io -> http://localhost:80

Connections ttl opn rt1 rt5 p50 p90
0 0 0.00 0.00 0.00 0.00

  • Then you have to set link between the DNS and your local ip address in your hosts file /etc/hosts: :

127.0.0.1 62e73311.ngrok.io

  • I added ServerName in my apache project virtual host file. I also added an alias so I don’t have to change hostname on each ngrok restart.

<VirtualHost *:80>
ServerName 62e73311.ngrok.io
ServerAlias *.ngrok.io
ServerAdmin webmaster@localhost
VirtualDocumentRoot /home/web/blackbird/htdocs/pub/
<Directory /home/web/blackbird/htdocs/pub/>
Options FollowSymLinks Multiviews Indexes
AllowOverride All
Require all granted
</Directory>
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
LogLevel warn
<FilesMatch ".+\.ph(p[3457]?|t|tml)$">
SetHandler "proxy:unix:/run/php/php7.1-fpm.sock|fcgi://localhost"
</FilesMatch>
</VirtualHost>

  • Finally, you have to restart apache.

sudo service apache2 restart

The process is similar for other web servers (httpd, nginx, etc) : you have to create your virtual host to handle calls on the url provided by Ngrok.

How can I use it with Magento?

  • To work with webservices

To use it on your Magento project you have to change some configurations. You have to disable “Auto-redirect to Base URL”. You can find this configuration in General / Web / Url Options / Auto-redirect to Base URL.
If this redirect isn’t disable, you will be redirect from your ngrok url 62e73311.ngrok.io to your base url. And you can lose the parameters from your HTTP request.

Magento config ngrok

  • To share your local project with your clients or to test it on a mobile device

In this case, I advise you to change your base url configuration with you ngrok url. If you don’t do that, you could have some problems with stylesheets or images.

Magento config ngrok 2

Examples of uses:

  • Test payments methods


The first interest for me was to communicate with payments methods on Magento. On one of my project MesSorties.fr I used it to easily develop and test my work on MangoPay.

I configured webhooks on my ngrok url like this:

Magento config ngrok webhook

For each exchange with MangoPay I can see each request log in the local ngrok interface : http://127.0.0.1:4040. I can also replay easily one of my previous requests.

Ngrok interface

  • Mobile Tests

I can get my local project on my mobile device and share the evolution of the project with the client if needed:

Utilisation de Ngrok pour tester un site en local sur mobile

Conclusion :

 

Ngrok allows you to quickly share your web development environment and to communicate easily with some hosted web services. I’m sure there are lots of different uses of ngrok, share yours with a comment.


I hope that this article will help you for your future developments. I also want to say this tool has to be used for development only. Do not use it on a live environment in any case.

Write your comment

Ready
for take-off?

Blackbird is a web agency specialized in the development of eCommerce websites. We are Magento Experts and we offer our services and advice for e-marketing, strategy, branding, deployment and methodology.

Contact
+339 50 66 21 38


Legal terms
Agency 30, Avenue du Rhin
67100 Strasbourg
France
SEE MAP
FR - EN