# How to Create a URL Shortener using Flask ## \# Introduction In this tutorial, we will build a URL shortener using Flask. This tool takes any URL and generates a shorter, more readable version like [bit.ly](https://bitly.com/). The application will allow users to enter a URL and an optional custom short id and generate a shorter version. Here's what we're going to build: %[https://youtu.be/g6chXThUReU] The frontend of the application is not attractive, because the main focus of the project is building a backend project. Some sample shortened URLs are and . ## Create the Virtual Environment and Install the Dependencies In this tutorial, we're going to use Pipenv to manage our virtual environment. [Pipenv](https://pypi.org/project/pipenv/) is a tool that automatically creates and manages a virtualenv for your projects, as well as adds/removes packages from your `Pipfile` as you install/uninstall packages. It also generates the ever-important `Pipfile.lock`, which is used to produce deterministic builds. You can read [this article](https://medium.com/analytics-vidhya/why-pipenv-over-venv-for-python-projects-a51fb6e4f31e) to learn more about it. Pipenv is an external library and we need to install it explicitly. To install the library, use the pip command: ```bash pip install pipenv ``` Once it's installed, we can create a virtual environment and activate it using this command: ```bash pipenv shell ``` To deactivate the virtual environment, we have a simple command: ```bash exit ``` Once you have created and activated the virtual environment, you're ready to install the required libraries. * [Flask](https://flask.palletsprojects.com/en/2.0.x/) is a simple, easy-to-use microframework for Python that can help build scalable and secure web applications. The module doesn't come pre-installed with Python, so we need to install it using the command: ```bash pipenv install Flask ``` * [Flask-Migrate](https://flask-migrate.readthedocs.io/en/latest/) is an extension that handles SQLAlchemy database migrations for Flask applications using Alembic. The database operations are made available through the Flask command-line interface. To install the module, use the command: ```bash pipenv install Flask-Migrate ``` * [Flask-SQLAlchemy](https://flask-sqlalchemy.palletsprojects.com/en/2.x/) is an extension for Flask that adds support for SQLAlchemy to your application. It helps you simplify things using SQLAlchemy with Flask by giving you useful defaults and extra helpers that make it easier to perform common tasks. To install the module, use the command: ```bash pipenv install Flask-SQLAlchemy ``` * [Psycopg2](https://pypi.org/project/psycopg2/) is the most popular PostgreSQL database adapter for the Python programming language. To install the module, use the command: ```bash pipenv install psycopg2 ``` * [Gunicorn](https://gunicorn.org/) is a Python WSGI HTTP Server for UNIX. To install the module, use the command: ```bash pipenv install gunicorn ``` * [Python Decouple](https://pypi.org/project/python-decouple/): We'll also use [environment variables](https://iread.ga/posts/49/do-you-really-need-environment-variables-in-python) in this project. So, we are going to install another module called python-decouple to handle this: ```bash pipenv install python-decouple ``` # **How to Set Up the Flask Project** The first thing we're going to do is to create a Flask project. If you check the [official documentation](https://flask.palletsprojects.com/en/2.0.x/quickstart/) of Flask, you'll find a [minimal application](https://flask.palletsprojects.com/en/2.0.x/quickstart/#a-minimal-application) there. But, we're not going to follow that. We are going to write an application that is more extensible and has a good base structure. If you wish, you can follow [this guide](https://iread.ga/posts/54/getting-started-with-flask) to get started with Flask. Our application will exist within a package called **core**. To convert a usual directory to a Python package, we just need to include an `__init__.py` file. So, let's create our core package first. ```bash $ mkdir core ``` After that, let's create the `__init__.py` file inside the core directory: ```bash $ cd core $ touch __init__.py $ cd .. ``` In the root directory of the project, create a file called `config.py`. We'll store the configurations for the project in this file. Within the file, add the following content: ```py from decouple import config DATABASE_URI = config("DATABASE_URL") if DATABASE_URI.startswith("postgres://"): DATABASE_URI = DATABASE_URI.replace("postgres://", "postgresql://", 1) class Config(object): DEBUG = False TESTING = False CSRF_ENABLED = True SECRET_KEY = config('SECRET_KEY', default='guess-me') SQLALCHEMY_DATABASE_URI = DATABASE_URI SQLALCHEMY_TRACK_MODIFICATIONS = False class ProductionConfig(Config): DEBUG = False class StagingConfig(Config): DEVELOPMENT = True DEBUG = True class DevelopmentConfig(Config): DEVELOPMENT = True DEBUG = True class TestingConfig(Config): TESTING = True ``` In the above script, we have created a `Config` class and defined various attributes inside that. Also, we have created different child classes (as per different stages of development) that inherit the `Config` class. Notice that we're using a few environment variables like **SECRET\_KEY** and **DATABASE\_URL**. Create a file named `.env` in the root directory and add the following content there: ```env SECRET_KEY=verysecretkey DATABASE_URL=sqlite:///shorty.db APP_SETTINGS=config.DevelopmentConfig FLASK_APP=core ``` Apart from the **SECRET\_KEY** and **DATABASE\_URL**, we've also specified **APP\_SETTINGS** and **FLASK\_APP**. The **APP\_SETTINGS** refers to one of the classes we created in the `config.py` file. We set it to the current stage of the project. The value of **FLASK\_APP** is the name of the package we have created. Now, we can add the following content in the `core/ __init__.py` file: ```py from flask import Flask from flask_sqlalchemy import SQLAlchemy from flask_migrate import Migrate from decouple import config app = Flask( __name__ ) app.config.from_object(config("APP_SETTINGS")) db = SQLAlchemy(app) migrate = Migrate(app, db) from core import routes ``` In the above Python script, we are first importing the Flask class from the Flask module that we have installed. Next, we're creating an object `app` of class Flask. We use the `__name__` argument to indicate the app's module or package, so that Flask knows where to find other files such as templates. Next we are setting the app configurations to the **APP\_SETTINGS** according to the variable in the `.env` file. To use Flask-SQLAlchemy and Flask-Migrate in our application, we just need to create objects of the `SQLAlchemy` class and `Migrate` class from the `flask_sqlalchemy` and `flask_migrate` libraries respectively. The application then imports the `routes` module, which doesn't exist yet. To run the application, we'll use a `main.py` file with the following content: ```py from core import app if __name__ == ' __main__': app.run() ``` ## How to Create the Database Table To define our database tables, we’ll create a `models.py` file within the core package. Inside that, we can write the following code: ```py from core import db from datetime import datetime class ShortUrls(db.Model): id = db.Column(db.Integer, primary_key=True) original_url = db.Column(db.String(500), nullable=False) short_id = db.Column(db.String(20), nullable=False, unique=True) created_at = db.Column(db.DateTime(), default=datetime.now(), nullable=False) ``` We first imported the `db` object that we had initialized in the `__init__.py` file. Then we created a `ShortUrls` class with a few fields such as **id** (primary key), **original\_url** (provided by the user), **short\_id** (generated by us or provided by the user), and **created\_at** (timestamp). We can then use **Flask-Migrate** commands to migrate the database with the new tables. The commands we'll use are: * `flask db init` — to initialize the database at the beginning (to be used only once) * `flask db migrate` — to migrate the new changes to the database (to be used every time we make changes in the database tables) * `flask db upgrade` — to upgrade our database with the new changes (to be used with the migrate command) After we run the database initialization we will see a new folder called “ **migrations** ” in the project. This holds the setup necessary for Alembic to run migrations against the project. Inside of “migrations”, we will see that it has a folder called “versions”, which will contain the migration scripts as they are created. ## How to Create the Homepage for Shortening URLs In this step, we will create a Flask route for the index page, which will allow users to enter a URL that we then save into the database. This route will use the custom short id provided by the user or generate one on its own, construct the short URL, and then render it as a result. First, let’s create a `routes.py` file in the core package and create a Python function to generate a short id. ```py from random import choice import string def generate_short_id(num_of_chars: int): """Function to generate short_id of specified number of characters""" return ''.join(choice(string.ascii_letters+string.digits) for _ in range(num_of_chars)) ``` In order to generate a short id, we have used the **choice** method from Python’s **random** module. Also, we have used Python’s in-built **string** module for letters (lowercase + uppercase), and digits. Now, we need to create a template for the index page that will be served by the index route. This template will have a simple form where a user can input the original URL and custom short id (optional) and submit it. But we’ll not create `index.html` directly. We can use the Template Inheritance concept in Jinja2. So, let's create a **templates** directory within the `core` package and create a `base.html` file inside that. You can paste the HTML code into that file. ```html {% block title %} {% endblock %}
{% for message in get_flashed_messages() %}
{{ message }}
{% endfor %} {% block content %} {% endblock %}
``` Note that, for styling, we’re using [Bootstrap](https://getbootstrap.com/) here. Most of the code in the preceding block is standard HTML code required for Bootstrap. The `` tags provide information for the web browser, the `` tag links the Bootstrap CSS files, and the `