A Guide to Build a URL Shortener App with Django

Hey there!

Shortening long, ugly URLs into clean, shareable links is an essential tool for marketers, social media gurus, and web developers alike.

In this comprehensive, 4000 word guide, you‘ll learn how to build a fully-functional URL shortener web app from scratch using the powerful Django Python framework. I‘ll share my insights as an experienced Django developer to help you master this essential skill.

Whether you‘re new to Django or a seasoned pro, you‘ll gain practical skills to shorten URLs for your next project. Let‘s get started!

Why Django for a URL Shortener?

There are many ways to build a URL shortener, so why choose Django?

As a Django expert, I‘m biased of course, but there are some great reasons:

Speed – Django lets you prototype and iterate quickly. Features like the ORM and admin save tons of development time.

Scalability – Django powers large sites like Instagram and Pinterest, so it can easily handle production traffic.

Security – Django provides protection against threats like SQL injection and cross-site scripting right out of the box.

Flexibility – You can choose from many databases and even build API endpoints alongside a web interface.

Django is perfect for rapid development of robust web applications. Let‘s explore by building a real-world URL shortener!

Overview: What We‘ll Build

Here‘s a quick overview of what we‘ll cover:

Project Setup: Initialize a Django project and app
Models: Define Link models to store data
Forms: Accept user input to create short links
Views: Write view logic to handle requests
URLs: Configure routes and redirects
Templates: Render HTML templates for web UI
Validation: Validate data and handle errors
Testing: Write tests to confirm functionality
API: Build API endpoints for link creation

When finished, we‘ll have a fully-functioning URL shortener web app with clean code and test coverage.

Excited? Let‘s get started!

Initial Setup

Every Django web app starts with a project. Let‘s create one:

Step 1 – Install Django

You‘ll need Python 3 and pip installed first. Then:

pip install django

This will install the latest Django version.

Step 2 – Start Project

django-admin startproject shorty

This generates a new shorty project directory containing:

manage.py: Executes commands
shorty/settings.py: Configuration settings
shorty/urls.py: Root URL routes

Step 3 – Create App

cd shorty
python manage.py startapp links

This will create a links app directory for our URL shortening functionality.

Step 4 – Add to Installed Apps

# shorty/settings.py

INSTALLED_APPS = [
    # ...
    ‘links‘,
]

Our project setup is complete! Now let‘s start modeling our data.

Modeling Links in the Database

Django includes a powerful object-relational mapper that lets you interface with databases through Python code.

Let‘s define models to store our short links.

In links/models.py:

from django.db import models

class Link(models.Model):
    original_url = models.URLField(max_length=2048)
    shortcode = models.CharField(max_length=6, unique=True)
    clicks = models.PositiveIntegerField(default=0)
    created_at = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return f‘{self.original_url} to {self.shortcode}‘

Let‘s break this down:

original_url: Stores the long URL
shortcode: A 6-char code for the short URL
clicks: Tracks how often a short link is visited
created_at: Automatically sets timestamp

We‘ve defined the blueprint for our Link objects. Next, migrations:

python manage.py makemigrations
python manage.py migrate

This syncs the models to the default SQLite database.

Our database schema is ready go! Now let‘s allow users to add data…

Building Our Link Creation Form

Forms allow users to submit data to the app. Let‘s build one for creating short links.

In links/forms.py:

from .models import Link
from django import forms

class CreateLinkForm(forms.ModelForm):
    class Meta: 
        model = Link
        fields = [‘original_url‘]

This simple ModelForm creates a form from the Link model with just the original_url field.

Django will generate HTML form fields and validate the URL when submitted. Next, the logic.

Handling Forms in the View

Views contain the logic to handle requests and return responses. Let‘s build one to handle our link creation form.

In links/views.py:

from .forms import CreateLinkForm

def create_link(request):
    form = CreateLinkForm()
    context = {‘form‘: form}

    if request.method == ‘POST‘:
        form = CreateLinkForm(request.POST)

        if form.is_valid():
            # Create short link
            new_link = form.save()
            return HttpResponseRedirect(new_link.get_absolute_url())
        else:
            context[‘errors‘] = form.errors

    return render(request, ‘links/create.html‘, context)

Here‘s what this does on POST request:

Validate form data
If valid, save new Link
Redirect to short URL page
If invalid, re-render form with errors

Now we can process link creation forms!

For users to access the app, we need to map URLs to views.

In shorty/urls.py:

from django.urls import path
from links.views import create_link

urlpatterns = [
    path(‘create/‘, create_link, name=‘create‘),
]

Now /create/ will hit our create_link view.

Let‘s also add a default root route:

from django.views.generic import RedirectView

urlpatterns = [
    path(‘‘, RedirectView.as_view(url=‘/create/‘)),
    #...
]

With URL routes in place, we‘re ready for templates.

Rendering Forms with Templates

Templates render data into HTML for display in the browser.

In links/templates/links/create.html:

{% extends ‘base.html‘ %}

{% block content %}



<form method="POST">
    {% csrf_token %}

    {{ form.as_p }}

    <input type="submit" value="Shorten!">
</form>

{% endblock %}

This displays our form rendered as paragraphs.

Let‘s also handle errors:

{% if form.errors %}
  <p>Please correct the errors below</p>
{% endif %}

With templates set up, we can now render the form!

Generating and Redirecting Shortcodes

When saving new Link instances, we want to:

Generate a unique shortcode
Redirect to the shortcode URL

Let‘s update models.py:

import random, string

class Link(models.Model):

    def generate_shortcode(self):
        length = 6
        chars = string.digits + string.ascii_letters
        return ‘‘.join(random.choices(chars, k=length))

    def save(self, *args, **kwargs):
        if not self.shortcode:
            self.shortcode = self.generate_shortcode()
        super().save(*args, **kwargs)  

    def get_absolute_url(self):
        return f‘/{self.shortcode}/‘

This will automatically:

Generate a random 6-char shortcode
Return the short URL

Now when we create a link, it will redirect properly.

Redirecting on Shortcode Visit

We also need to redirect users who visit a short URL.

In views.py:

from django.shortcuts import get_object_or_404

def redirect_url(request, code):
    link = get_object_or_404(Link, shortcode=code) 
    link.clicks += 1
    link.save()
    return HttpResponseRedirect(link.original_url)

This increments clicks and redirects.

In urls.py:

path(‘<str:code>/‘, views.redirect_url, name=‘redirect‘),

Visiting /abc123/ will now redirect to the original URL.

Link Validation

We should validate data before creating short links.

In forms.py:

from django import forms

class CreateLinkForm(forms.ModelForm):
    original_url = forms.URLField(
        widget=forms.URLInput(attrs={‘class‘: ‘form-input‘}),
        error_messages={‘invalid‘: ‘Enter a valid URL‘}
    )

    class Meta:
         # ...

This customizes the error message for invalid URLs.

In views.py:

from django.http import HttpResponseBadRequest

def create_link(request):

    #...

    if form.is_valid():
        # Shorten link
    else:
        context[‘errors‘] = form.errors
        return HttpResponseBadRequest(render(request, ‘links/create.html‘, context))

Now invalid submissions return 400 errors.

Writing Tests

Let‘s add some tests to confirm functionality.

In links/tests.py:

from django.test import TestCase
from .models import Link

class LinkTestCase(TestCase):

    def test_shortcode_generated_on_save(self):
        link = Link(original_url=‘https://www.example.com‘)
        link.save()

        self.assertTrue(link.shortcode)
        # Runs more tests...

We can also use Django‘s test client to simulate requests:

def test_redirect_view(self):
    link = Link(...)
    link.save()

    response = self.client.get(f‘/{link.shortcode}/‘)
    self.assertRedirects(response, link.original_url)

Testing helps confirm everything works as expected.

Building an API

Let‘s also create API endpoints to generate short links.

In links/api.py:

from rest_framework import generics
from .serializers import LinkSerializer
from .models import Link

class CreateLinkView(generics.CreateAPIView):
    serializer_class = LinkSerializer

    def perform_create(self, serializer):
        instance = serializer.save()
        instance.generate_shortcode()
        instance.save()

This uses serializers to validate/create links.

In urls.py:

path(‘api/links/‘, CreateLinkView.as_view()),

Clients can now POST to /api/links/ to shorten via API!

Final Touches

Some final touches to polish the app:

Add user auth to protect short links
Build a public homepage displaying click stats
Containerize app with Docker for easy deployment
Set up monitoring with Sentry

Small tweaks like this get your app production-ready!

Conclusion

We covered a lot of ground here! To quickly recap, you:

Learned Django project and app structure
Created models to represent link data
Allowed users to submit links via forms
Wrote views to handle logic and rendering
Mapped URLs to route requests
Built templates to cleanly display HTML
Validated data and handled errors
Tested functionality with Django unit tests
Added API endpoints for link creation

You should now have the skills to build your own production-ready URL shortener with Django!

There‘s always more to learn – here are some potential next steps:

Add user authentication and profiles
Integrate a front-end framework like React
Containerize app with Docker for deployment
Switch to Postgres or MySQL database
Implement caching to improve performance

Let me know in the comments if you have any questions! I‘m always happy to help explain concepts or best practices.

I hope you enjoyed learning alongside me. Keep practicing and you‘ll be a Django pro in no time!

Happy coding,

[Your Name]