EgbieAndersonUku1 / Fullstack-fruit-and-veg

Fullstack Fruit & Veg Shop: A web application developed with HTML, CSS, and JavaScript for the frontend, and Django for the backend. Features include user authentication, a product catalogue, shopping cart functionality, and order management. and much more
https://fullstack-fruit-and-veg.vercel.app
0 stars 0 forks source link

**Title: Vercel Supports PostgreSQL but Doesn't Host It, Resulting in 500 Error with Django Sessions** #9

Closed EgbieAndersonUku1 closed 2 months ago

EgbieAndersonUku1 commented 2 months ago

Title: 500 Error on Vercel Due to Local PostgreSQL Database Connection

Issue:

I am deploying a Django application on Vercel, and the application is configured to use a PostgreSQL database hosted on my local machine. This setup results in a 500 Internal Server Error related to session storage and database connectivity.

Details:

Problem:

When deploying the application to Vercel, it fails to save session data and returns a 500 error. The application is configured to connect to a PostgreSQL database on my local machine, which is not accessible from Vercel.

Details

Context: The _add_basicdescription view is responsible for displaying a form where users can input basic product information. The form is prepopulated with any existing session data and updates the session with new data upon successful submission.

Issue: On Vercel, the application encountered a 500 Internal Server Error because it uses the database-backed session engine (django.contrib.sessions.backends.db). This error occurs due to the database (PostgreSQL) being hosted locally and thus not accessible from Vercel, leading to failures in session storage and retrieval.

Code overview

def add_basic_description(request):
    initial_data = request.session.get('basic_form_description', {})
    form = BasicFormDescription(initial=initial_data)  # Prepopulate the form with session data
    context = {"section_id": "basic-description"}

    if request.method == "POST":
        form = BasicFormDescription(request.POST)
        if form.is_valid():
            if form.has_changed():
                request.session["basic_form_description"] = form.cleaned_data  <------------------
            return redirect(reverse("detailed_description_form"))

    context["form"] = form
    return render(request, "account/product-management/add-new-product/basic-product-information.html", context=context)

Session Usage: The view relies on session data to retain user input across requests. It prepopulates the form with existing session data and updates the session with new data upon form submission.

Steps to Reproduce:

  1. Deploy a Django application on Vercel.
  2. Configure the application to use a PostgreSQL database hosted on a local machine.
  3. Ensure session storage is configured to use the database.
  4. Go to the add new category to add a new product located inside accounts under the product management
  5. Fill in the Basic description form and hit next

Expected Behaviour:

The application should be able to connect to save session data without encountering a 500 error and the go to the next based which is detailed description page

Actual Behaviour:

The application results in a 500 Internal Server Error due to the inability to connect to the PostgreSQL database required for session management. Although the application does not attempt to save session data to the database until the final form submission, it still requires access to the database for session operations. The PostgreSQL database is hosted locally and is not accessible from Vercel, which prevents session data management and leads to the internal server error.

Error Message:

Potential Cause:

Suggested Resolution:

  1. Update Database Hosting: Use a remote PostgreSQL database service (e.g., Heroku Postgres, Supabase, Railway) that is accessible from Vercel. This will resolve connectivity issues and allow the application to function as expected.

  2. Documentation: Clarify in the Vercel documentation that deploying applications that use local databases will not work due to the lack of external accessibility.

Error: error

Additional Information:

EgbieAndersonUku1 commented 2 months ago

Title: 500 Internal Server Error on Vercel Due to Local PostgreSQL Database Connection

Issue Overview:

I encountered a critical issue when deploying a Django application on Vercel, which was configured to use a PostgreSQL database hosted on my local machine. This setup led to a 500 Internal Server Error related to session management and database connectivity. The application failed to maintain session data, which is crucial for multi-step forms, due to the inaccessibility of the local database from Vercel's servers.

Context and Problem:

The Django application includes a view named _add_basic_description_ responsible for capturing and storing user input across multiple steps using session data. The session data is stored in session, configured to use Django’s django.contrib.sessions.backends.db session engine. While this setup worked flawlessly in my local development environment, it failed when deployed to Vercel. The root cause was that Vercel, being a cloud-based platform, could not access the locally hosted PostgreSQL database, resulting in an inability to store or retrieve session data and causing a 500 Internal Server Error and the second reason is that Vercel requires and external database to be linked to, as while it does support postgresl it doesn't actually have the one required to work with my application

The following code snippet illustrates the session-dependent logic that caused the issue:

def add_basic_description(request):
    initial_data = request.session.get('basic_form_description', {})
    form = BasicFormDescription(initial=initial_data)  # Prepopulate the form with session data
    context = {"section_id": "basic-description"}

    if request.method == "POST":
        form = BasicFormDescription(request.POST)
        if form.is_valid():
            if form.has_changed():
                request.session["basic_form_description"] = form.cleaned_data  # Session storage  <--
            return redirect(reverse("detailed_description_form"))

    context["form"] = form
    return render(request, "account/product-management/add-new-product/basic-product-information.html", context=context)

This logic, while effective locally, became problematic upon deployment because the session engine depended on a database that was unreachable in the cloud environment.

Steps Taken to Resolve the Issue:

  1. Switching to a Remote Database Service:

    • To solve this incompatible problem with Vercel's cloud environment, I transitioned the PostgreSQL database to a remote service. I chose Supabase, a fully managed PostgreSQL service, to host the database, ensuring that it would be accessible from anywhere, including Vercel. For more information, you can visit Supabase.
  2. Setting Up Supabase:

    • I created an account with Supabase and set up a new PostgreSQL database instance. Supabase provided all the necessary connection details, including a hostname, port, and credentials that were configured to allow secure access from my Vercel deployment.
  3. Updating Vercel Configuration:

    • I updated the database connection settings in my Django application, replacing the local PostgreSQL connection details with those provided by Supabase. This included updating environment variables in Vercel to securely store the new database credentials.
  4. Testing the Deployment:

    • After making these changes, I redeployed the application to Vercel. The application successfully connected to the Supabase-hosted PostgreSQL database, allowing session data to be stored and retrieved without errors. The 500 Internal Server Error was resolved, and the application functioned as expected, seamlessly handling session data across form submissions.

Outcome:

By switching to a remote database service, I was able to resolve the connectivity issues that were causing the 500 Internal Server Error. The application now runs smoothly on Vercel, with all session management and database interactions functioning correctly. Now you can fill in your form data for the first two pages and hit next which will redirect you to the next page. As for now only the first three pages have be issued to worked, the only will result in 404 because the view handlers haven't been built

Key Takeaways:

I chose Supabase because it is a Reliable Solution: and provides a straightforward and effective solution for hosting a PostgreSQL database, with easy integration into Vercel.