codeYaan Logo Blog
Home Blog Services Courses
Login
How to Deploy Your First Web App
RELEASES Dec. 9, 2025, 5:30 p.m.

How to Deploy Your First Web App

Welcome to the exciting moment when your code steps out of the editor and into the wild! In this guide we’ll walk through every step needed to take a tiny Python web app from your laptop to a live URL that anyone can visit. No heavy‑duty DevOps wizardry, just practical, repeatable steps you can follow today.

Prerequisites

Before you dive in, make sure you have the basics covered. You’ll need a recent version of Python (3.9+ recommended), a Git client, and a free account on a cloud platform like Heroku, Render, or Vercel. If you’re on Windows, the official installer includes Git Bash, which makes the command line experience smoother.

  • Python installed and added to your PATH
  • Git configured with your username and email
  • A text editor or IDE you love (VS Code, PyCharm, etc.)
  • Basic knowledge of HTTP methods (GET, POST) and routing

Setting Up the Local Project

First, create a dedicated folder for your app. This keeps dependencies isolated and makes it easier to push to a remote repository later.

mkdir first-web-app
cd first-web-app
python -m venv venv
source venv/bin/activate   # Windows: venv\Scripts\activate

Activating the virtual environment ensures that any packages you install won’t clash with system‑wide libraries. Once active, install the lightweight Flask framework.

pip install flask

Project Structure

Keep the layout flat for this tutorial. A typical structure looks like this:

first-web-app/
│
├─ app.py          # main application file
├─ requirements.txt
└─ .gitignore

Writing Your First Endpoint

Open app.py and paste the following minimal Flask app. It defines a single route that returns a friendly greeting.

from flask import Flask, render_template_string

app = Flask(__name__)

@app.route("/")
def home():
    return render_template_string(
        "<h1>Hello, World!</h1><p>Your first web app is live.</p>"
    )

if __name__ == "__main__":
    # Enable debug mode for local development
    app.run(host="0.0.0.0", port=5000, debug=True)

Run the app locally with python app.py and open http://127.0.0.1:5000 in your browser. You should see the greeting rendered in HTML.

Adding a Simple Form

Let’s make the app a tiny bit more interactive by handling a POST request. Update app.py as follows:

from flask import Flask, request, render_template_string

app = Flask(__name__)

HTML_FORM = """
<h1>Say Hello</h1>
<form method="post">
    <input type="text" name="name" placeholder="Your name">
    <button type="submit">Greet</button>
</form>
{% if greeting %}
    <p>{{ greeting }}</p>
{% endif %}
"""

@app.route("/", methods=["GET", "POST"])
def home():
    greeting = None
    if request.method == "POST":
        name = request.form.get("name", "Stranger")
        greeting = f"Hello, {name}!"
    return render_template_string(HTML_FORM, greeting=greeting)

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=5000, debug=True)

Now the page displays a form; when you submit a name, the server responds with a personalized greeting. This tiny interaction already demonstrates the core request‑response cycle that powers real‑world web apps.

Preparing the App for Deployment

Cloud platforms need to know two things: which packages to install and how to start the server. Let’s generate those files.

Pinning Dependencies

Run pip freeze and redirect the output to requirements.txt. This file tells the remote environment exactly which libraries to install.

pip freeze > requirements.txt

Your requirements.txt will look similar to this:

Flask==2.3.2
Werkzeug==2.3.6
...

Creating a Procfile (Heroku/Render)

Many PaaS providers use a Procfile to understand how to launch your app. Create it in the project root with a single line:

web: gunicorn app:app

We’ll also add gunicorn to our dependencies because the built‑in Flask server isn’t suitable for production.

pip install gunicorn
pip freeze > requirements.txt   # update the list

.gitignore

Make sure you don’t push your virtual environment or secret files. A minimal .gitignore looks like this:

venv/
__pycache__/
*.pyc
.env

Version Control with Git

Initialize a Git repository, commit your code, and push to a remote service like GitHub. This step is required for most cloud platforms that pull code directly from a Git repo.

git init
git add .
git commit -m "Initial commit – first web app"
git branch -M main
git remote add origin https://github.com/yourusername/first-web-app.git
git push -u origin main
Pro tip: Keep your commit messages short but descriptive. A clear history makes debugging on the server much easier.

Deploying to Heroku (Free Tier)

Heroku abstracts away most of the infrastructure work. After signing up, install the Heroku CLI and log in.

curl https://cli-assets.heroku.com/install.sh | sh
heroku login

Create a new Heroku app and push your code.

heroku create first-web-app-demo
git push heroku main

Heroku will detect the requirements.txt and Procfile, install dependencies, and start the process defined in the Procfile. When the deployment finishes, you’ll see a URL like https://first-web-app-demo.herokuapp.com. Open it and test the form you built earlier.

Note: Free dynos sleep after 30 minutes of inactivity. The first request after a sleep may take a few seconds to spin up.

Deploying to Render (Alternative Free Option)

Render offers a similar experience with a modern UI. After creating an account, click “New Web Service”, connect your GitHub repo, and set the build command to pip install -r requirements.txt and the start command to gunicorn app:app. Render automatically provisions a PostgreSQL instance if you need a database later.

Once the build completes, Render provides a live HTTPS endpoint. The workflow mirrors Heroku’s, but Render’s free tier includes a higher monthly uptime limit, which can be handy for demo projects.

Deploying to Vercel (Serverless Edge)

If you prefer a serverless model, Vercel’s vercel-python runtime lets you run Flask apps as serverless functions. Install the Vercel CLI, then add a vercel.json configuration file.

{
  "functions": {
    "api/**/*.py": {
      "runtime": "python3.11"
    }
  }
}

Move your Flask app into an api/ folder and rename it to index.py. The entry point for a Vercel function must be a callable named handler. Here’s a quick adaptation:

from flask import Flask, request, render_template_string
from werkzeug.middleware.dispatcher import DispatcherMiddleware
from werkzeug.serving import run_simple

app = Flask(__name__)

@app.route("/")
def home():
    return "Hello from Vercel!"

# Vercel expects a WSGI callable named `handler`
handler = DispatcherMiddleware(app, {})

# Local testing (optional)
if __name__ == "__main__":
    run_simple("0.0.0.0", 5000, handler, use_reloader=True)

Deploy with a single command:

vercel --prod

Vercel will spin up a serverless instance, give you a URL, and handle scaling automatically. This approach shines when you anticipate burst traffic or want to integrate with a static front‑end built on Next.js.

Real‑World Use Cases for a Simple Web App

Even a tiny Flask app can serve as the backbone for many practical projects:

  1. Contact Form Backend: Capture user messages, store them in a database, and forward them via email.
  2. Feature Toggle Dashboard: Provide a secure UI for toggling flags that control experimental features in a larger product.
  3. Webhook Receiver: Accept POST payloads from third‑party services (GitHub, Stripe) and trigger internal processes.

All three scenarios start with the same fundamentals we covered: routing, request parsing, and a reliable deployment pipeline.

Pro Tips for Production‑Ready Deployments

  • Environment Variables: Never hard‑code secrets. Use .env locally and platform‑provided config vars in production (Heroku Config Vars, Render Secrets, Vercel Environment Variables).
  • Logging: Replace print statements with Python’s logging module. Most PaaS providers aggregate logs automatically.
  • Static Assets: Serve CSS/JS from a CDN or use Flask’s send_from_directory for small projects. For larger sites, consider a separate static host like Cloudflare Pages.
  • Health Checks: Implement an endpoint like /healthz that returns 200 OK. Load balancers use it to detect unhealthy instances.
  • Graceful Shutdown: Ensure your app can finish in‑flight requests before the process stops. Gunicorn’s --timeout flag helps.

Scaling Beyond the First App

Once you’ve mastered a single‑file Flask app, you’ll likely want to organize code into blueprints, add a database (SQLAlchemy), and write tests (pytest). The deployment steps remain largely unchanged; you only need to adjust the build commands to include migrations and static asset compilation.

For example, adding PostgreSQL on Render is as simple as enabling the “Free PostgreSQL” add‑on, then pulling the connection URL from the environment variable DATABASE_URL. In your code, you’d initialize SQLAlchemy with:

from flask_sqlalchemy import SQLAlchemy
import os

app.config["SQLALCHEMY_DATABASE_URI"] = os.getenv("DATABASE_URL")
db = SQLAlchemy(app)

After committing the changes, push again and the platform will rebuild with the new dependencies.

Conclusion

Deploying your first web app is a blend of coding, version control, and a few platform‑specific commands. By following the steps above—setting up a virtual environment, writing a minimal Flask endpoint, pinning dependencies, and pushing to a cloud provider—you’ll have a live URL in under an hour. From here, you can iterate, add databases, integrate CI/CD pipelines, and scale to handle real traffic. Happy deploying, and remember: every production‑grade service started with a single “Hello, World!”

Share this article
Back to Blog