How to Expose a Django Demo App to the Internet with Ngrok

Let‘s learn how to expose a Django demo app to the internet, without deploying it to a hosting service. Configuring a staging environment just to show a quick demo of your Django app is overkill. Even more so if you only need a public URL for a few minutes to show a client or teammate.

The best option is to use a tool that can expose your local development server publicly. With this, people all around the world will be able to access what‘s on your localhost.

For this purpose, we‘ll use Ngrok. Ngrok allows us to create public URLs that tunnel to local ports on our machine. This is made possible by the magic of tunneling protocols.

All the code examples in this tutorial are available in this Github repo.

Pre-requisites

To follow along with this tutorial, you‘ll need:

Python 3.6+ installed on your machine
Basic knowledge of using command-line interfaces
Some experience with Django
Understanding of the Django-admin and manage.py scripts

It‘s okay if you‘re missing some of these skills. You should still be able to follow along without too many issues.

Creating a Django Project

To demonstrate the full process, we‘ll walk through creating a Django project from scratch. If you already have a project, feel free to skip to the "Exposing with Ngrok" section.

Setting up a Virtual Environment

First, let‘s create a Python virtual environment:

Open your terminal or shell prompt. If you aren‘t familiar with this, you can use your code editor‘s built-in terminal instead.
- For example, in Visual Studio Code, go to Terminal > New Terminal.
Use the python -m venv command to create a virtual environment:

python -m venv .venv

This tells Python to create a virtual environment named .venv in the current directory.

Activate the virtual environment:

source .venv/bin/activate

The exact command depends on your platform and shell. Refer to the table below from the official Python docs if you need help:

Platform	Shell	Activate command
POSIX	bash/zsh	`$ source <venv>/bin/activate`
	fish	`$ source <venv>/bin/activate.fish`
	csh/tcsh	`$ source <venv>/bin/activate.csh`
PowerShell Core		`$ <venv>/bin/Activate.ps1`
Windows	cmd.exe	`C:\> <venv>\Scripts\activate.bat`
	PowerShell	`PS C:\> <venv>\Scripts\Activate.ps1`

Once activated, you should see the virtual environment‘s name in your prompt:

$ source .venv/bin/activate
(.venv) $

Installing Django

With the virtual environment active, install the latest Django version:

pip install django

This will download and install Django along with its dependencies.

Now we can create a Django project. We‘ll call ours mytestingproject:

django-admin startproject mytestingproject

This generates the boilerplate Django project structure. Let‘s cd into the new project and run the dev server:

# Navigate to the project folder
(.venv) $ cd mytestingproject

# List files  
(.venv) $ ls
manage.py mytestingproject/

# Run dev server
(.venv) $ python manage.py runserver

Open your web browser and go to http://localhost:8000 to see the default Django welcome page.

This confirms everything is working locally. Now let‘s look at exposing this to the public internet.

Exposing a Django App with Ngrok

As mentioned earlier, Ngrok creates public URLs that tunnel to your local ports.

Downloading and Installing Ngrok

First, download the latest Ngrok release for your platform. Follow the installation instructions on their site.

Once installed, you can test it out by running:

ngrok help

This will print out the available commands and confirm the install was successful.

Exposing the Local Server

To expose our Django dev server, we run:

ngrok http 8000

This tells Ngrok to create a public URL that tunnels to port 8000 on localhost, where our Django app is running.

Here‘s what the output looks like:

ngrok by @inconshreveable                      

Session Status                online
Session Expires               1 hour, 59 minutes
Version                       2.3.35
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://abc123.ngrok.io -> http://localhost:8000

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

Ngrok generates a unique URL like http://abc123.ngrok.io that points to our local server.

When you visit that URL in your browser, you‘ll see the Django welcome page exposed publicly!

Updating Django Settings

Ah oh, we‘re getting an error about an invalid DisallowedHost! This is because Django restricts incoming requests to your ALLOWED_HOSTS by default.

Check the Django and Ngrok console output:

# Django 
Invalid HTTP_HOST header: ‘abc123.ngrok.io‘. You may need to add ‘abc123.ngrok.io‘ to ALLOWED_HOSTS.

# Ngrok
GET / 404 Not Found

To fix this, open settings.py in your Django project and update the ALLOWED_HOSTS like so:

# myproject/settings.py

ALLOWED_HOSTS = ["*"]

The wildcard allows all hosts. Reload the ngrok URL and everything should now work!

With that, you now have a publicly accessible URL for your local Django dev server. As you add views, URLs, apps, etc. they‘ll all be visible through that URL.

Note: In production, you‘ll want to restrict ALLOWED_HOSTS for security. The wildcard is just for local testing.

Wrapping Up

In this tutorial, you learned:

How to quickly create a public URL for a Django project without deploying it.
The basics of starting a Django project and modifying Django settings.
How to use Ngrok to expose any local dev server publicly.

Check out other popular Python web frameworks that you can use for building APIs and web apps.