Flask is a popular Python web framework that makes it simple to create web applications and API's in a short period of time. If you've created a Flask app and are worried about configuring a server as Heroku's free plan is no more, then worry not; you can run Flask as a serverless function on Vercel (yes, you have heard it right; we are gonna deploy a Flask app on Vercel).
Prerequisites
Before we begin, you should have the following things set up:
- A Vercel account. You can sign up for a free account at vercel.com.
- The Vercel CLI (Command Line Interface) installed on your computer. You can install the Vercel CLI by running the following command in your terminal.
npm install -g vercel
Deploying the Flask App
Open up your favourite code editor and initialize the following files and folders in the below order:
project
│───vercel.json
│───requirements.txt
└───api
│───app.py
In the app.py
file. Lets us write a basic Hello World program which you can modify as per your needs.
from flask import Flask
app = Flask(__name__)
@app.get('/')
def hello_world():
return "Hello, World!"
In the requirements.txt
, write
Flask
It is the only PyPi package we need. The Web Server Gateway Interface (WSGI) is provided automatically by Vercel during the runtime.
The vercel.json
file contains the configuration for this project.
A Sample Configuration for Flask is:
{
"routes": [
{
"src": "/(.*)",
"dest": "api/app.py"
}
]
}
The above code routes any request to the original page to the Flask Server which was written in app.py
.
Now deploy the Flask app onto vercel by running:
vercel deploy --prod
Follow the prompts asked and Vercel will then build and deploy your app, and you will be provided with a URL where you can access your app. You can also access your website's URL by going to your Vercel dashboard.
The URL for my Flask App which I have made using above steps is vercel-flask-demo-one.vercel.app
Additional Configuration
If you want to customize the way your Flask app is deployed, you can add additional options to the vercel.json
file. For example, you can specify the Python version to use, or add environment variables to your app, specify the maximum execution time and the memory for a request etc.
Bonus
If you are thinking about running FastAPI in Vercel then its absolutely possible. Just replace Flask
in requirements.txt
with fastapi
and Vercel will automatically use the corresponding ASGI to serve it.
You can read more on: Python Runtimes
I have created this blog post to show that it is possible to deploy common Python Web apps like Flask and FastAPI on Vercel by use of Serverless Functions as many people just use Vercel for hosting their Frontends and never fully explore it. In the next article, I will show you how you can host Serverless Bots on Vercel.
In case if you still have any questions regarding this post or want to discuss something with me feel free to connect on LinkedIn or Twitter.
If you run an organization and want me to write for you please do connect with me on my Socials 🙃
Top comments (6)
Thank you for sharing this! I am trying to deploy a flask backend in the same project as a next js front end. Do you have any guidance for how to set this up?
Yes @nathanpamart, you can do that
I have created a test website that displays normal HTML page and also has Flask as serverless functions.
One thing to note is you need to prefix your routes with "/api" and it shall work fine.
You can check this repo, I made for you:
github.com/dhanushreddy291/flask-a...
Normal website link: test-vercel-rho-kohl.vercel.app
Flask function link: test-vercel-rho-kohl.vercel.app/ap...
Thanks Dhanush! Specifically what I'm struggling with is to call my Flask functions from my next.js app. Would you be able to put an example that does the link between the two? Thank you so much, you are helping a ton!
I have tried it, and I think its not possible yet, as both Vercel and Next use "/api" keyword.
You can maybe host Flask on other project on Vercel and setup a custom route in Nextjs that acts as Reverse Proxy to your Flask App.
You're a life saver!
If you hit any of the limits of requirements.txt, check out withcoherence.com/post/common-serv...