DEV Community

Cover image for How to deploy a Python/Flask App to Vercel
Andrew Baisden
Andrew Baisden

Posted on • Updated on

How to deploy a Python/Flask App to Vercel

This is just a quick simple example of course more complex applications will work as well.

Prerequisites

Step 1

Create an account with Vercel if you don't already have one.

Vercel is a cloud platform for static sites and Serverless Functions that fits perfectly with your workflow. It enables developers to host Jamstack websites and web services that deploy instantly, scale automatically, and requires no supervision, all with no configuration.

Step 2

Use npm to install Vercel globally on your computer https://www.npmjs.com/package/vercel

npm i -g vercel
Enter fullscreen mode Exit fullscreen mode

Step 3

Make sure that you have the latest version of Python3 installed and the Flask framework with pip3

https://pypi.org/project/Flask/

pip install Flask
Enter fullscreen mode Exit fullscreen mode

Setup the project

Create a project

If you are having problems getting the virtual environment to work then read this documentation https://docs.python.org/3/library/venv.html

mkdir vercel-python-app
cd vercel-python-app
python3 -m venv venv
. venv/bin/activate
cd venv
touch index.py
Enter fullscreen mode Exit fullscreen mode

Open the project in your code editor and then create a Python/Flask server in the index.py file

from flask import Flask


app = Flask(__name__)


@app.route('/')
def home():
    return 'Home Page Route'


@app.route('/about')
def about():
    return 'About Page Route'


@app.route('/portfolio')
def portfolio():
    return 'Portfolio Page Route'


@app.route('/contact')
def contact():
    return 'Contact Page Route'


@app.route('/api')
def api():
    with open('data.json', mode='r') as my_file:
        text = my_file.read()
        return text
Enter fullscreen mode Exit fullscreen mode

Setup the development environment by running these commands in your terminal.

export FLASK_APP=index.py   
export FLASK_ENV=development
Enter fullscreen mode Exit fullscreen mode

If you are using Windows then see here for the environment variable syntax https://flask.palletsprojects.com/en/1.1.x/quickstart/#a-minimal-application

Now create a data.json file and put it in the root folder for venv and add the .json below into it

[
    {
        "id": 1,
        "first_name": "Rene",
        "last_name": "Clemmett",
        "email": "rclemmett0@linkedin.com",
        "gender": "Male",
        "ip_address": "42.86.99.75"
    },
    {
        "id": 2,
        "first_name": "Rustie",
        "last_name": "Chrishop",
        "email": "rchrishop1@bloomberg.com",
        "gender": "Male",
        "ip_address": "197.128.10.252"
    },
    {
        "id": 3,
        "first_name": "Joe",
        "last_name": "Cocklie",
        "email": "jcocklie2@ustream.tv",
        "gender": "Male",
        "ip_address": "124.81.44.28"
    },
    {
        "id": 4,
        "first_name": "Diane",
        "last_name": "Catt",
        "email": "dcatt3@sogou.com",
        "gender": "Female",
        "ip_address": "169.47.61.184"
    },
    {
        "id": 5,
        "first_name": "Quinton",
        "last_name": "Shellsheere",
        "email": "qshellsheere4@icq.com",
        "gender": "Male",
        "ip_address": "2.57.97.184"
    },
    {
        "id": 6,
        "first_name": "Lena",
        "last_name": "Paull",
        "email": "lpaull5@tmall.com",
        "gender": "Female",
        "ip_address": "121.4.165.63"
    },
    {
        "id": 7,
        "first_name": "Corena",
        "last_name": "Lamswood",
        "email": "clamswood6@hud.gov",
        "gender": "Female",
        "ip_address": "78.65.53.3"
    },
    {
        "id": 8,
        "first_name": "Justinian",
        "last_name": "Nequest",
        "email": "jnequest7@virginia.edu",
        "gender": "Male",
        "ip_address": "62.24.98.224"
    },
    {
        "id": 9,
        "first_name": "Vladimir",
        "last_name": "Boeter",
        "email": "vboeter8@addthis.com",
        "gender": "Male",
        "ip_address": "87.119.34.255"
    },
    {
        "id": 10,
        "first_name": "Jillene",
        "last_name": "Eades",
        "email": "jeades9@amazon.de",
        "gender": "Female",
        "ip_address": "159.173.99.31"
    }
]
Enter fullscreen mode Exit fullscreen mode

Run the command below to see your Python/Flask app working locally in the browser

flask run
Enter fullscreen mode Exit fullscreen mode

Deploying to Vercel

Make sure that you are in the root folder for your project so inside of the venv folder and then run the command vercel in your terminal.

Use the project setup settings below as a guide to setup your own project with Vercel.

? Set up and deploy β€œ~/Desktop/username/vercel-python-app/venv”? [Y/n] y
? Which scope do you want to deploy to? username
? Link to existing project? [y/N] n
? What’s your project’s name? venv
? In which directory is your code located? ./
> Upload [====================] 98% 0.0sNo framework detected. Default Project Settings:
- Build Command: `npm run vercel-build` or `npm run build`
- Output Directory: `public` if it exists, or `.`
- Development Command: None
? Want to override the settings? [y/N] n
Enter fullscreen mode Exit fullscreen mode

Once that is complete it is going to give you some links. The app is NOT going to work yet it is only going to give you a browser file download of your index.py file. You need to create a vercel.json file and put it in the root folder so that Vercel knows that it is a Python application. And it is very important that your index.py file remains in the root folder along with your other server side code for the project otherwise your app won't work.

Create a vercel.json file and put it in the root of your project folder and then add the code below

{
    "version": 2,
    "builds": [
        {
            "src": "./index.py",
            "use": "@vercel/python"
        }
    ],
    "routes": [
        {
            "src": "/(.*)",
            "dest": "/"
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

Next manually create a requirements.txt file and put it in the root folder with the code below

flask==1.0.2
Enter fullscreen mode Exit fullscreen mode

When creating a more complex application that has multiple packages installed it is best to use the command below for automatically creating a requirements.txt file. This is the equivalent to a package.json file which you should be familiar with if you have worked with Node. You will need to have your dependancies install on the server for it to work. However for this simple example it is not required as the only package that we are using is flask.

pip3 freeze > requirements.txt
Enter fullscreen mode Exit fullscreen mode

Now run the command vercel --prod to deploy your app. Open the Production link and your app should be working online with full working routes.

Top comments (44)

Collapse
 
josiasaurel profile image
Josias Aurel

Hi. It didn't work for me . It's says bad gateway. Here is the link : pyvercel.vercel.app/

Collapse
 
andrewbaisden profile image
Andrew Baisden

Hey I just followed the tutorial I wrote it worked for me. What is your operating system I am using macOS. It should work fine for macOS and Windows however Linux might have some issues because it is not covered in the documentation.

Collapse
 
josiasaurel profile image
Josias Aurel

I am using a terminal emulator Termux which emulates Linux pretty well. I don't know if that's the problem. I'll retry

Thread Thread
 
headwinds profile image
brandon flowers • Edited

I'm also interested in this demo. Big thank you Andrew for writing it up!

I too was able to get your demo running locally but when I deployed it to Vercel - I also the got the bad gateway error! It deployed successfully and I can see in my builds logs that it looks good.

In the past, I have been able to deploy a Flask app to Vercel though so I'm troubleshooting too to see if I can see what has changed.

I'm on a Mac and share same environment as Andrew. I'll try to find what's going on and report back.

Thread Thread
 
headwinds profile image
brandon flowers

Just a follow up.... in my case, I forgot to include the requirements.txt file.

Once I added the requirements, I was able to deploy the app:

venv.headwinds1.vercel.app/

Thread Thread
 
josiasaurel profile image
Josias Aurel

I don't know what's happening really. I rebuilt the app three times and nothing. I'll retry one more time ;/

Thread Thread
 
headwinds profile image
brandon flowers

rebuilt eh?

Can you run the app locally in your browser?

Thread Thread
 
josiasaurel profile image
Josias Aurel

Yeah. It works correctly locally

Thread Thread
 
headwinds profile image
brandon flowers

I've pushed my source to github

github.com/headwinds/venv

Thread Thread
 
josiasaurel profile image
Josias Aurel

Thanks. I'll check it

Thread Thread
 
andrewbaisden profile image
Andrew Baisden

Yeah that requirements.txt file is essential without it the routing is broken. As for the problems Josias is having its likely because its Linux and because you are using Termux on Android I think. I don't have any experience with that setup my guess is its something to do with the paths similar to the issues that max had.

Thread Thread
 
headwinds profile image
brandon flowers

github.com/headwinds/venv

clone git@github.com:headwinds/venv.git
cd venv/venv
vercel

Thread Thread
 
josiasaurel profile image
Josias Aurel

Well Andrew you are probably right. Even when I cloned your repo it didn't work for as well. That's probably something with Termux. I am giving up on using only termux and I'll try another way . Thanks guys

Thread Thread
 
josiasaurel profile image
Josias Aurel • Edited

Hey. I gave myself a last try but this time I took away the virtual env. This means that the problem came from he fact that the virtual env replicated my architecture (aarch64) which is not compatible with vercel. I redeployed only with the main server, requirements.txt and the vercel.json config. Here is the basic server running and the
repo

Thread Thread
 
andrewbaisden profile image
Andrew Baisden

Well done you worked hard to find a solution congrats!

Thread Thread
 
josiasaurel profile image
Josias Aurel

Thanks. I am happy it works now

Thread Thread
 
headwinds profile image
brandon flowers

amazing - very happy to hear and also great that you shared your solution for others!

Collapse
 
maxdevjs profile image
maxdevjs

Hello, thank you for this tutorial.

Locally, if I do an export FLASK_APP=index.py I get a 127.0.0.1 - - [18/Sep/2020 08:24:15] "GET / HTTP/1.1" 500 terminal message and a flask.cli.NoAppException: Could not import "index". browser message.

Works correctly for routes with an export FLASK_APP=/absolute/path/to/index.py, but again I get a FileNotFoundError: [Errno 2] No such file or directory: './data.json'. If I use an absolute path also for the data.json file, it works (locally, but, obviously, breaks the api route when deployed).

flask --version
Python 3.7.7
Flask 1.1.2
Werkzeug 1.0.1
Enter fullscreen mode Exit fullscreen mode

Your version works perfectly when deployed to Vercel.

Any idea about those local paths?

P.S.: Vercel build log reports Warning: Due tobuildsexisting in your configuration file, the Build and Development Settings defined in your Project Settings will not apply. Is that right?

Collapse
 
andrewbaisden profile image
Andrew Baisden • Edited

Hi what operating system and code editor are you using? Check out the official docs here they might help flask.palletsprojects.com/en/1.1.x...

So about the build logs I just did a test. If you remove this code below from the vercel.json file then that log goes away however the routing will not work so it is needed. It's probably just a note and not a serious warning. And you can use the command vercel --prod for production deployments that will get rid of the production log note too I updated the guide to reflect this.

    "builds": [
        {
            "src": "./index.py",
            "use": "@vercel/python"
        }
    ],
Collapse
 
maxdevjs profile image
maxdevjs • Edited

Thank for the reply.

I use nvim on Solus.

I did not find anything really useful in the documentation about this case, probably because it is the first time I meet Flask :)

As a temporary solution I got this:

import os

with open(
            os.path.join(
            os.path.dirname(
            os.path.abspath(__file__)),
            'data.json')) as file:

I guess is not an optimal solution, but things like this are the only way that I found so far to make it work (don't mind the indentation). Quickly tested and works on Vercel too.

It seems related to how open behaves in Flask (perhaps the version I do have?). I am really curious about what can be the cause.

Thread Thread
 
andrewbaisden profile image
Andrew Baisden

Ah ok that explains it. So Solus is a version of Linux? The Flask documentation only mentions Mac and Windows in the documentation as far as I can see. However you seem to have figured out how to get it working. I am sure you will figure it out as you have experience working with Solus which I have never used before.

Thread Thread
 
maxdevjs profile image
maxdevjs

Yes, it is a Linux flavor. Thank you again for the tutorial :)

Collapse
 
zeraye profile image
Jakub Rudnik

You are using flask==2.0.1? Unfortunately vercel don't support it (I think so, I'm not vercel dev).
Quick fix:
requirements.txt

flask==1.1.4
Enter fullscreen mode Exit fullscreen mode

vercel.json

{
  "version": 2,
  "builds": [
    {
      "src": "./index.py",
      "use": "@vercel/python"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "index.py"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
whiterock profile image
whiterock

Thank you so much for this! I specifically signed up to this website for the sole reason to thank you - this information cannot be found anywhere else and I struggled with Flask 2.0.1 and vercel for hours today.

Collapse
 
headwinds profile image
brandon flowers

I know there are devs at Vercel who are very passionate about Python but - from an outsider's perspective - it appears that they are focussing on marketing & promoting more Node-related hosting like NextJS or Gatsby over other languages - there used to be more tutorials for Go and Python but they all seem to be javascript today:

vercel.com/docs

But where is the Python Flask quick start?! Well...right here.

Collapse
 
andrewbaisden profile image
Andrew Baisden

Javascript seems to have far more popularity because there are so many frameworks available and it is one of the core technologies of the web. I'm not sure there is even an official tag for Flask on here I know there is one for Django.

I think a lot of people prefer to use Python for scripting, scraping and machine learning as opposed to web development first and foremost.

Collapse
 
an4s911 profile image
Anas Basheer

Hi. I know this is an old post, but there are still people who are following this tutorial I believe just like me. But as of the latest update in the vercel.json file, the "version": 2" should not be used anymore. For more details you can refer to vercel.com/docs/projects/project-c....

I hope you can update the existing code you provided and it will help others in the future, because I followed your tutorial and got completely stuck and was trying to figure out what was going wrong, the deployment always resulted in 404: NOT FOUND, and I was so confused.

Collapse
 
huogerac profile image
Roger Camargo

Hi everyone!
It did work, however, I'd suggest few changes to make this post simpler:

  • Create the virtualenv first, preferably outside the project (instead of venv inside vercel-python-app, use ~/.venv/vercel for example)
  • active our virtualenv and install Flask
  • create the vercel-python-app folder, the index.py and the data.json
  • make sure it is working locally
  • create the requirements.txt and vercel.json inside the project folder (vercel-python-app)
  • lastly, inside the vercel-python-app (instead of venv folder), run the vercel command. In this way the deploy will work at first! It won't send all the site-packages, you won't need to duplicate the files

In another word, in this way, you can use the default python/flask structure. Just adding the vercel.json and running the vercel cmd, you make the deploy. Awesome!

Collapse
 
kyarottobacon profile image
Osman

i know i am absolutely late for the topic.but i gotta ask something..looked up everywhere to find a project that contains more than 1 python files deployed on vercel.in addition to app.py,i have 2 more classes with functions.deployment was an issue so i merged them all in app.py.want to set it up properly now.how should i write my vercel.json file? tried many things but could not manage to deploy.

Collapse
 
an4s911 profile image
Anas Basheer

Hi there, has it been resolved yet?

When you say more than 1 python file, you mean that you have more than 2 flask app files? It is possible, but there should always be one main module which imports all the other files, and that is the one you should include the vercel.json file.

Collapse
 
kyarottobacon profile image
Osman

I am importing the other files from "app.py" and the error i get is "module not found".

Collapse
 
nathanpamart profile image
Nathanpamart

Hi Andrew, just followed your post and it worked well for me. One question, I am trying to a build an app with next.js for the frontend and flask as the backend, within the same project on Vercel. How would you suggest setting this up?

Collapse
 
andrewbaisden profile image
Andrew Baisden

Hey I hope you found a solution sorry about the slow response I have a LOT of messages to check these days.

Collapse
 
sebasec96 profile image
SebasEC • Edited

Hi, i can't make it work. The deployment is successful but when i try to load the page it says 404: NOT_FOUND. Locally it works fine, i'm using wsl.

Collapse
 
sebasec96 profile image
SebasEC

Solution

{
    "version": 2,
    "builds": [
        {
            "src": "./index.py",
            "use": "@vercel/python"
        }
    ],
    "routes": [
        {
            "src": "/(.*)",
            "dest": "index.py"
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
adam_lala profile image
adam_lala • Edited

Update as of 1/1/2022

I used a vercel.json file with:

{
    "version": 2,
    "builds": [
        {
            "src": "index.py",
            "use": "@vercel/python"
        }
    ],
    "routes": [
        {
            "src": "/(.*)",
            "dest": "index.py"
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

Changing the src from ./index.py to index.py got rid of an error message:

WARN! You defined 1 build that did not match any source files (please ensure they are NOT defined in .vercelignore): 
Enter fullscreen mode Exit fullscreen mode
Collapse
 
andrewbaisden profile image
Andrew Baisden

Hey does wsl mean Windows Subsystem for Linux? If so that is likely why it is not working. I don't think this method works well on Linux see the comments. It's probably better to use lambda.

Collapse
 
leerob profile image
Lee Robinson

Hey there! Thank you for writing this.

We now have a one-click deployable Flask example included in our documentation, as well as Django and a simple Python API.

Collapse
 
gnvageesh profile image
GNVageesh

What command should we run after making an update to the project? And thanks for this tutorial

Kindly let me

Collapse
 
johnnjuki profile image
John Njuki

So helpful. Thanks

Collapse
 
tzllol profile image
tzllol

i have seen in some youtube video the get the domain like "example.now.sh" how do i do it?

Collapse
 
andrewbaisden profile image
Andrew Baisden

So they used to be called Zeit Now and then they rebranded to Vercel. I believe the old domains were "now.sh" and the new domains are "vercel.app".

Collapse
 
pierosalazaras1 profile image
Piero Salazar Ascencio

Hello, I have a app web deployed in vercel but when i add a library notify or plyer for web notifications my deploy not load. Maybe a suggestion plse?

Collapse
 
andrewbaisden profile image
Andrew Baisden

Hi I am going to archive this article because Vercel have changed their API and this code does not work as well anymore. They advise people to use Serverless Functions.