Introduction: In this article, I'll share my experience deploying a Flask web application using GitHub Desktop and GitHub Pages, and then enhancing the deployment with Vercel. This approach allowed me to leverage the simplicity of GitHub Pages for hosting static content and extend functionality with Vercel's serverless environment for dynamic API endpoints.

Setting Up and Deploying with GitHub:

  1. Organizing the Project: I structured my project with directories: api/ for Flask and static/ for static files.
  2. Writing the Flask App (hello.py): I created a Flask app (hello.py) for an API endpoint (/api/hello) generating personalized greetings.

from flask import Flask, request, jsonify app = Flask(__name__) @app.route('/api/hello', methods=['GET']) def hello(): visitor_name = request.args.get('visitor_name', 'Visitor') client_ip = request.remote_addr # Hardcoded values for simplicity location = "New York" temperature = 11 response = { "client_ip": client_ip, "location": location, "greeting": f"Hello, {visitor_name}!, the temperature is {temperature} degrees Celsius in {location}" } return jsonify(response) if __name__ == '__main__': app.run(debug=True)

. Adding an HTML Page (index.html): I included an HTML page (index.html) in static/ with a button linking to my GitHub repository.

  1. Deploying to GitHub with GitHub Desktop: Using GitHub Desktop, I committed and pushed my project to GitHub. This step included both the Flask app and the static HTML page.
  2. Setting Up GitHub Pages: I enabled GitHub Pages to host my static HTML page. After pushing to GitHub, I configured GitHub Pages to serve content from the main branch and selected root as the source directory in repository settings.

Enhancing Deployment with Vercel:

. Creating vercel.json: I configured vercel.json to manage deployment of both the Flask API (/api/...) and static HTML file (/).

  • { "version": 2, "builds": [ { "src": "api/*.py", "use": "@vercel/python" }, { "src": "static/*.html", "use": "@vercel/static" } ], "routes": [ { "src": "/api/(.*)", "dest": "/api/hello.py" }, { "src": "/(.*)", "dest": "/static/index.html" } ] }

. Deploying to Vercel: Using the Vercel platform, I linked my GitHub repository and deployed the project. Vercel automatically detected vercel.json and configured the deployment based on its specifications.

. Deploying with Vercel CLI: After installing Vercel CLI (npm install -g vercel) and logging in (vercel login), I initiated deployment with vercel in my project directory.

Conclusion:

By combining GitHub Desktop and GitHub Pages for initial deployment, and then integrating Vercel for enhanced functionality, I successfully deployed a Flask app with both dynamic API capabilities and static content hosting. This approach not only simplifies deployment but also leverages the strengths of each platform for optimal project showcasing and functionality.

About the Author: I am a passionate software developer exploring innovative deployment strategies and sharing insights through articles. Connect with me on LinkedIn to stay updated on my latest projects and articles.

Feedback: I welcome your feedback and questions on this deployment process. Feel free to leave a comment below or contact me directly for further discussions.