Vercel Deployment Issues - Flask/React Application

Deployment URL or Custom Domain: [Your deployment URL]
Environment: production
Project Framework: Flask/React
Build Settings:
Framework Preset: Other
Build Command: N/A (Pre-built React)
Output Directory: N/A
Install Command: pip install poetry && poetry install
Node/Runtime Version: Python 3.10
Package Manager: Poetry
Relevant Packages: flask, flask-sqlalchemy, python-dotenv, authlib, supabase

Issue Synopsis:
I’m experiencing deployment issues with a Flask application that serves a pre-built React frontend. The React build is integrated into Flask’s directory structure before deployment, with built files residing in the backend/golf/static directory and index.html in backend/golf/blueprints/page/templates.

Current Behavior:
The deployment fails with two distinct errors:

  1. Module import error: Unable to import ‘golf’ module
  2. HTTP handler error with issubclass() argument

Expected Behavior:
The Flask application should serve the pre-built React files from its directory structure and handle API routes, connecting to Supabase for database operations and Auth0 for authentication.

Project Structure: (See Attached Mermaid Diagram)
My application uses a modular structure where the frontend is pre-built and integrated into the Flask backend before deployment. The backend directory contains the complete application with all static assets and templates already in place.

Reproduction Steps:

  1. Push code to GitHub repository
  2. Vercel attempts deployment
  3. Deployment fails at Python runtime initialization

Configuration:

{
    "version": 2,
    "builds": [
        {
            "src": "backend/golf/app.py",
            "use": "@vercel/python",
            "config": {
                "runtime": "python3.10"
            }
        }
    ],
    "routes": [
        {
            "src": "/(.*)",
            "dest": "backend/golf/app.py"
        }
    ],
    "env": {
        "FLASK_APP": "golf.app:create_app"
    }
}

Attempted Solutions:

  1. Modified PYTHONPATH settings
  2. Tried different root directory configurations
  3. Experimented with various vercel.json configurations
  4. Tested different Python runtime configurations

The application works perfectly in local development using Docker, suggesting the issues are specific to Vercel’s serverless environment.

Primary concerns are:

  1. Correct module import configuration
  2. Proper handling of the Flask application in Vercel’s serverless context
  3. Appropriate configuration for serving static files
  4. Poetry dependency management in the Vercel environment

Additional Information:

  • Using Supabase for PostgreSQL in production
  • Integrated with Auth0 for authentication
  • Frontend is pre-built and integrated before deployment
  • Using Poetry for dependency management

Could you please provide guidance on:

  1. Correct configuration for Flask applications with integrated frontend assets
  2. Proper PYTHONPATH setup for modular Flask applications
  3. Best practices for Poetry-managed Python applications on Vercel
  4. How to correctly configure my vercel.json file for subsequent Github commits and vercel deploys.

Directory Tree (From my codebase):

Hi, @jclewis1989! Welcome to the Vercel Community :smile:

For Flask applications with integrated frontend assets on Vercel, you need to ensure that your vercel.json file is correctly configured to serve both the Flask application and the static files. Here’s an improved version of your vercel.json:

 {{
  "version": 2,
  "builds": [
    {
      "src": "backend/golf/app.py",
      "use": "@vercel/python",
      "config": {
        "runtime": "python3.10",
        "maxLambdaSize": "15mb"
      }
    },
    {
      "src": "backend/golf/static/**",
      "use": "@vercel/static"
    }
  ],
  "routes": [
    {
      "src": "/static/(.*)",
      "dest": "backend/golf/static/$1"
    },
    {
      "src": "/(.*)",
      "dest": "backend/golf/app.py"
    }
  ],
  "env": {
    "FLASK_APP": "golf.app:create_app",
    "PYTHONPATH": "backend"
  }
}

This configuration adds a separate build step for static files and routes them appropriately.

To ensure proper module imports, you need to set the PYTHONPATH environment variable. In the vercel.json file above, we’ve added "PYTHONPATH": "backend" to the env section. This should help resolve the module import issues.

Vercel doesn’t natively support Poetry, but you can use a custom build script to install dependencies using Poetry. Create a build.sh file in your project root:

 #!/bin/bash#!/bin/bash
pip install poetry
poetry config virtualenvs.create false
poetry install --no-dev

Then, update your vercel.json to use this build script:

 {{
  "version": 2,
  "builds": [
    {
      "src": "backend/golf/app.py",
      "use": "@vercel/python",
      "config": {
        "runtime": "python3.10",
        "maxLambdaSize": "15mb",
        "buildCommand": "bash build.sh"
      }
    },
    // ... (rest of the configuration)
  ],
  // ... (rest of the file)
}

You might want to add a vercel-build script to your package.json file (if you have one) to ensure proper build steps:

 {{
  "scripts": {
    "vercel-build": "pip install poetry && poetry install && poetry run python -m flask db upgrade"
  }
}

This script installs Poetry, installs dependencies, and runs any necessary database migrations.

Could you give that a go and let us know how you get on?

You can also take a look at some resources:

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.