Sharing local Docker Magento 2 development environment over the web

Preamble

Today’s e-commerce market stats show us, that the amount of web visitors using mobile devices has increased dramatically for the last few years and keeps rising. Most visitors access web resources via their smartphones.

Multiple companies, which is specialized in Magento development, have released their PWA implementations of Magento web-shops to improve customer experience in online shopping. Magento (as a company) also isn’t staying behind and preparing its own PWA implementation to release in the near future.

Magento developers, especially frontend developers are constantly looking for the best ways of testing Magento with mobile devices. While browser developer tools have solutions for such type of tests, they are not perfect. It is just emulation of mobile device behavior and screen-size and it does not represent real device usage.

Tests on real physical mobile devices are always more accurate, they give an understanding of how a website or PWA will perform on the end-user side.

Magento 2 Ngrok module & Ngrok docker image

To make developers life easier, I’ve made a set of tools to make it possible to test the local Docker Magento development environments with real mobile devices over the internet. This is done with the help of ngrok secure tunneling service.

With the help of these tools, you can get a special link to the Magento web-shop in your local development environment. It makes locally running web-shop accessible over the internet, so it can be shared to colleagues, testers or simply used for quick testing by the developer itself to check how latest changes are performing. If your code works on your machine, now you can prove it! 😄

Toolset includes

Magento 2 ngrok - Magento 2 module for ngrok service support. Automatically updates Magento base url based on domain used in the request. Modifies full-page and block-html caching to separate Magento caches for local and ngrok domains. No broken links or non loaded scripts and styles while browsing Magento web instance.

Docker Ngrok - A Docker image for ngrok service to expose a local docker environment or any other local server to the public internet over secure tunnels. The image is built using official busybox:glibc docker image, so no third party libraries are used, only official busybox and ngrok binary.

Installation

First of all, you will need to install the Magento 2 Ngrok module to your local Magento 2 dev environment. To do it, simply run the command below

composer require --dev shkoliar/magento-ngrok

and to enable the module

bin/magento module:enable Shkoliar_Ngrok

Optionally, you may also want to run a few extra commands to ensure that the enabled modules are properly registered and classes are generated. Here they are: bin/magento setup:upgrade, bin/magento setup:di:compile.

Docker Ngrok does not requires installation itself. Docker image will be automatically downloaded at the first usage.

Usage example

The example below assumes that you have running web server Docker container named dev_web_1 with exposed port 80 and dev_default is the name of the default network of your docker project. Make sure that your web server is configured to not redirect non-SSL ports to https. As a possible solution add extra not redirecting non-SSL port especially for ngrok service.

docker run --rm -it -p 0.0.0.0:4551:4551/tcp \
        --link dev_web_1 --net dev_default \
            shkoliar/ngrok ngrok http dev_web_1:80

Also, it is possible to pass more ngrok arguments for fine-tuning, for example

docker run --rm -it -p 0.0.0.0:4551:4551/tcp \
        --link dev_web_1 --net dev_default \
            shkoliar/ngrok ngrok http -region=eu \
            -bind-tls=true dev_web_1:80

The command above includes a defined region parameter -region=eu to tell ngrok service to use servers from the European region. Parameter -bind-tls=true instructs ngrok service to only use https for tunneling session.

Part of projects

You may check real life usage of this toolset in our Mage2click’s project. Pay attention to bin/share command and how it is implemented.

Summary

With the help of a few commands above, developers are getting the ability to temporary share their work to anyone over the web. All sharing sessions are temporary and fully controlled by the developer. Once the sharing session is closed, all public links become inactive while the local environment stays working as before.

In result, we are getting the useful tool which is not adding any extra complexity to the development environment and can be configured as a simple short command to run, as we did in our project listed above.

Thanks for reading this article, and hope it will help you in your day to day work!