Using ngrok with DDEV for site testing on mobile devices
Posted by: Karl Bowers | April 07 2020
When developing websites locally with DDEV, testing on mobile devices can be challenging. While DDEV provides a robust local development environment, accessing your local site from a mobile device isn’t straightforward without exposing your local development environment to the web. This is where ngrok comes in. Ngrok allows you to expose your local DDEV project to the internet via a secure tunnel, making it accessible on your mobile device for real-time testing.
In this article, we’ll walk you through the steps to set up ngrok with DDEV, enabling you to test your site on any mobile device easily.
Why Use ngrok for Mobile Testing?
Ngrok is a powerful tool that creates a secure tunnel from your local machine to a public URL. This is incredibly useful for:
- Mobile device testing: You can view your DDEV project on any device connected to the internet, not just your local network.
- Client previews: Share a live version of your in-progress site with clients for feedback, without needing to push to a staging server.
- Webhooks: Ngrok makes it easier to test webhooks by providing a live URL that services can interact with.
By combining ngrok with DDEV, you can simulate a live environment for testing responsiveness, performance, and user interactions on mobile devices.
Prerequisites
Before getting started, ensure you have the following installed on your machine:
- DDEV: A local PHP development environment. Download and install DDEV if you haven’t already.
- ngrok: A tunneling service to expose local servers. You can download ngrok here.
Additionally, you should have a working DDEV project ready for testing.
Step 1: Start Your DDEV Project
If your DDEV project isn’t already running, start it by navigating to your project directory in the terminal and using the following command:
ddev start
This will start your local development environment. Once DDEV is running, your project will be accessible via a local URL, typically something like https://yourproject.ddev.site.
Step 2: Install and Authenticate ngrok
After downloading and installing ngrok, you need to authenticate it with your ngrok account. Open your terminal and run the following command to authenticate ngrok:
ngrok authtoken YOUR_AUTH_TOKEN
You can find your authentication token in your ngrok account dashboard after signing up. This step is required to unlock more ngrok features, such as custom subdomains and extended session lengths.
Step 3: Expose Your DDEV Site with ngrok
To expose your DDEV site to the internet, use the following command in your terminal:
ngrok http https://yourproject.ddev.site
This command will create a secure tunnel to your DDEV site and provide you with a public URL. You should see output similar to this:
ngrok by @inconshreveable (Ctrl+C to quit)
Session Status online
Account Your Name (Plan: Free)
Version 3.x.x
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding https://1234abcd.ngrok.io -> https://yourproject.ddev.site
The Forwarding line displays the public URL (e.g., https://1234abcd.ngrok.io) that you can use to access your local DDEV project from any device with internet access.
Step 4: Test Your Site on Mobile Devices
Now that your site is accessible via a public URL, open that URL on your mobile device’s browser. Simply enter the ngrok-generated URL in your mobile browser’s address bar to load your local development site.
At this point, you can begin testing the following on your mobile device:
- Responsiveness: Ensure that your site looks and functions well on different screen sizes.
- Touch interactions: Test elements like buttons, menus, and forms for mobile usability.
- Performance: Assess how your site performs on mobile networks, checking for load times and resource efficiency.
Step 5: Secure Your ngrok Session (Optional)
Ngrok provides an encrypted tunnel, but you can add additional security layers for extra protection. For example, you can add password protection to your public URL by running the following command:
ngrok http -auth="username:password" https://yourproject.ddev.site
With this setup, users will need to enter the specified username and password to access your site, adding an extra layer of privacy during testing.
Step 6: Monitor Traffic with ngrok
Ngrok provides a web interface that allows you to monitor traffic coming through your tunnel. To access this interface, open your browser and visit:
http://127.0.0.1:4040
Here, you can view detailed logs of requests made to your ngrok URL, which can be helpful for debugging issues or monitoring performance.
Benefits of Using ngrok with DDEV
Using ngrok with DDEV offers several benefits that enhance the development and testing workflow:
- Live Mobile Testing: Test how your site looks and performs on different mobile devices in real time, without needing to push changes to a staging server.
- Easy Client Demos: Share your in-progress work with clients or team members using a live, secure URL.
- Webhooks: Easily test webhook integrations by providing services with a live URL to your local project.
- Quick Setup: The combination of DDEV and ngrok allows you to set up a testing environment in just a few minutes.
Conclusion
Using ngrok with DDEV is a simple and effective way to test your local development site on mobile devices. By creating a secure, temporary URL, you can preview your work in real-time on any device connected to the internet. This not only helps with responsive design testing but also provides an easy way to share progress with clients or colleagues. Whether you're testing performance, mobile interactions, or simply showcasing your project, ngrok makes it easy to extend your DDEV environment beyond the local machine.
Next time you're developing a project with DDEV, give ngrok a try to enhance your mobile testing process!
Posted by: Karl Bowers
Posted in: ExpressionEngine | Craft CMS | Development
Post Date: April 07 2020
