Have you ever encountered this error while developing in Django?

You're accessing the development server over HTTPS, but it only supports HTTP.

If you're used to accessing your development server via http://localhost:8000, this error can be frustrating - especially after updating firewall rules that enforce HTTPS connections. Instead of reverting security settings, there's a better solution: Ngrok.

What is Ngrok?

Ngrok is a powerful tool that exposes local applications to the internet without complex network configurations like port forwarding or DNS setup. Read more about ngrok in their official documentation.

Prerequisites

Before we begin, ensure you have:

• A Django project setup
• Python 3.x installed
• A virtual environment configured
• An ngrok account (free tier works fine)

Step-by-Step Setup

1. Install the pyngrok Package

Before we install anything, activate your virtual environment then install the Python wrapper for ngrok:

pip install pyngrok
pip freeze > requirements.txt

2. Configure Django Settings

Add ngrok's domain to your allowed hosts list in your project's settings.py:

# settings.py
ALLOWED_HOSTS = ['localhost', '127.0.0.1', '.ngrok-free.app']

This allows Django to accept requests from ngrok's dynamic URLs (*.ngrok-free.app). Django will not generate any errors even though we can't predict the random string part of the URL.

3. Start Your Django Server

In your project's root directory:

python manage.py runserver

Note: Windows users can use py manage.py runserver

4. Authenticate and Start Ngrok

• Sign up at ngrok.com
• Copy your authentication token from your dashboard
• In a new terminal window, authenticate ngrok:

ngrok config add-authtoken YOUR_TOKEN_HERE

Start the tunnel:

ngrok http 8000

Ensure that the ngrok and Django server ports are the same. The default port usually is 8000.

You should see output similar to:

Account                       Your Name (Plan: Free)
Version                       3.19.0
Region                       United States (us)
Latency                      Your Latency
Web Interface                An Unsecure HTTP address
Forwarding                   https://[random-id].ngrok-free.app -> http://localhost:8000

5. Testing Your Setup

Access your Django application using only the HTTPS URL provided by ngrok on your console window. It will look similar to the following:

https://[random-id].ngrok-free.app

Other Use Cases for ngrok

Ngrok isn't just for solving HTTPS issues. It's valuable for:

• Quick Internet Exposure: Share your local development work instantly
• Webhook Testing: Test integrations that require public URLs
• Client Previews: Let clients preview work without deployment
• Cross-Device Testing: Test your app on multiple devices easily

Troubleshooting Tips

• Check if your ngrok authentication token is properly configured
• Verify that your Django server is running before starting ngrok
• Monitor the ngrok interface for request logs and errors

Related Resources

Want to learn more about web development? Check out my other articles:

• Understanding Quality of Service (QoS)
• The Art of Making Responsive Websites

Thanks for your time and happy coding! Share your projects in the comments section.