Build and Deploy a Python Flask Web App

For an absolute beginner to programming and web development, the best thing you can do is get up and running quickly by deploying a website you created from scratch. Below is a minimal step-by-step guide for creating a python flask web app.

1. Choose a web framework: There are many web app frameworks in Python, such as Flask, Django, Pyramid, and more. Choose one that suits your project requirements. For this simple tutorial, we will use Flask.

2. Set up your development environment: Install Python on your computer from https://www.python.org/. For development, you can choose to use the command line or an integrated development environment (IDE) such as Visual Studio Code, PyCharm, or Sublime Text.

For this example, we chose Flask. We can install it using the following command from the command line:

pip install flask

3. Create a new project: Open your IDE or terminal and create a new project. For example, create a new folder named myflaskapp and a new file named app.py.

In app.py, import Flask and create a new Flask instance. Here’s an example:

from flask import Flaskapp = Flask(__name__)

4. Define routes: A route maps URLs to Python functions that generate the content displayed in the browser. Define the routes you want to use for your app in your app.py file. Let’s start with some simple routes you might want for a personal website.

@app.route('/')def home():
    return render_template('home.html')

@app.route('/about')
def about():
    return render_template('about.html')

@app.route('/projects')
def projects():
    return render_template('projects.html')

5. Create templates: Templates are HTML files that define how the content should be displayed in the browser. Now let’s create HTML templates for your home page, about page, and projects page. For example, create a new folder named templates and create three new files named home.html, about.html, and projects.html:

home.html

<!DOCTYPE html>
<html>
<head>
        <title>My Personal Website</title>
</head>
    <body>
        <h1>Welcome to my website!</h1>
        <p>Learn more about me and my projects:</p>
        <ul>
            <li><a href="/about">About me</a></li>
            <li><a href="/projects">My projects</a></li>
        </ul>
    </body>
</html>

about.html

<!DOCTYPE html>
<html>
    <head>
        <title>About me</title>
    </head>
    <body>
        <h1>About me</h1>
        <p>My name is John, and I'm a web developer.</p>
        <p>Contact me at <a href="mailto:john@example.com">john@example.com</a>.</p>
    </body>
</html>

projects.html

<!DOCTYPE html>
<html>
    <head>
        <title>My projects</title>
    </head>
    <body>
        <h1>My projects</h1>
        <ul>
            <li>Project 1</li>
            <li>Project 2</li>
            <li>Project 3</li>
        </ul>
    </body>
</html>

6. Add static files: Static files such as images, CSS, and JavaScript are files that do not change and are served directly to the browser. You will add them to your project’s static folder. Create a new folder named static and add a CSS file named style.css. For example:

body {
    background-color: #f2f2f2;
    font-family: sans-serif;
}
h1, h2, h3 {
    color: #333;
}
a {
    color: #007bff;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

7. Test your app: Run your app by adding the following code to app.py:

if __name__ == '__main__':
    app.run(debug=True)

Then, from the command line, run python app.py from your project folder. That starts the application server, and you will see a message like ‘Running on your_localhost’. Open your browser and visit that location to see the contents of your website.

8. Deploy your app: Sign up for a free account on heroku.com and install the Heroku CLI. Then, create a new Heroku app using the following command:

heroku create myflaskapp

Then, deploy your app to Heroku using the following commands:

git init
git add .
git commit -m "Initial commit"
git push heroku master

9. Configure DNS settings: If you want to use your own custom domain name for your app, you have to configure your DNS settings to point to the URL provided by your hosting service provider.

On your domain name registrar’s website, create a new CNAME record pointing your custom domain name to your Heroku app’s URL. For example, create a CNAME record pointing my_example.com to myflaskapp.herokuapp.com.

10. Monitor and maintain your app: Use Heroku’s monitoring tools to monitor your app’s performance and uptime. Update your app on Heroku by modifying the code in app.py, templates, and static files and redeploying it using git push heroku master.

Congratulations! You now know how to create and deploy a simple python flask web app.

flask python web development