How to Use Ngrok to Share Your Local Development Server for Testing

on

Use Local Network Instead of Ngrok

Sometimes, you just need to test your site on another device within the same local network. You can find your local IP address and use it directly:

Find Your Local IP (macOS/Linux):

ipconfig getifaddr en0

Find Your Local IP (Windows):

ipconfig | findstr /i "IPv4 Address"

This will return an IP like:

192.168.1.2

Then, open this IP on your mobile device's browser:

http://192.168.1.2:8000

Make sure your local server is running with --host=0.0.0.0 so other devices can access it.


 When developing web applications locally, sometimes you need to test your site on a mobile device or share it with a client, tester, or colleague. However, localhost is only accessible on your own machine. This is where ngrok comes in handy.

Ngrok is a tool that creates a secure public URL for your local development server, allowing external access to it over the internet. In this article, we'll explore how to set up and use ngrok to share your local site easily.

Step 1: Install Ngrok

Before using ngrok, you need to install it on your machine. Follow these steps:

For macOS (Homebrew Users):

brew install ngrok

For Windows & Linux:

  1. Download ngrok from the official website: https://ngrok.com/download

  2. Extract the downloaded file.

  3. Move the ngrok binary to a directory in your system path, or run it from the extracted folder.

To confirm the installation, run:

ngrok version

If installed correctly, it will display the installed version.

Step 2: Start Your Local Server

Before using ngrok, ensure your local development server is running. If you're using Laravel, start the built-in server:

php artisan serve --host=0.0.0.0 --port=8000

If you're using Docker with Laravel Sail, run:

sail up -d

Your local application should now be accessible at:

http://127.0.0.1:8000

Step 3: Expose Your Localhost with Ngrok

Once your server is running, use ngrok to create a public tunnel:

ngrok http 8000

This will output something like:

Forwarding   https://random-id.ngrok.io -> http://127.0.0.1:8000

Now, anyone can access your local site using the ngrok URL (e.g., https://random-id.ngrok.io).

Step 4: Test on Mobile or Share with Others

  • If you want to test your site on an iPhone/Android, open the ngrok URL in a mobile browser.

  • If you want to share your local site with a client or tester, send them the ngrok link.

Step 5: Use Ngrok with Authentication (Optional)

If you want to restrict access, use authentication:

ngrok http --auth="username:password" 8000

Now, when someone visits your ngrok URL, they'll be prompted to enter a username and password.

Step 6: Use a Custom Ngrok Subdomain (Pro Users)

By default, ngrok generates a random subdomain. If you have a paid ngrok plan, you can set a custom subdomain:

ngrok http -subdomain=myapp 8000

This will create a link like:

https://myapp.ngrok.io

Step 7: Stop Ngrok

When you’re done, stop ngrok by pressing:

CTRL + C

If using Docker with Laravel Sail, you may also want to stop your container:

sail down

Conclusion

Ngrok is a powerful tool for sharing your local development environment securely over the internet. Whether you're testing on mobile, showcasing your work, or debugging API integrations, ngrok makes the process seamless.

Give it a try and let me know how it helps in your development workflow! 🚀

Comments

Post a Comment