Production Deployment

This guide outlines the steps to deploy Blogify to a production environment using Railway for the FastAPI backend and Vercel for the Next.js frontend.

Prerequisites

Before starting, ensure you have the following:

• A GitHub repository containing your Blogify code.
• A Supabase project with Database, Auth, and Storage enabled.
• Accounts on Railway and Vercel.

1. Supabase Setup

Blogify relies on Supabase for data and authentication. Ensure your instance is configured:

1. Database Tables: Ensure your PostgreSQL schema includes posts and users tables as defined in the backend models.
2. Storage: Create a public bucket named images in Supabase Storage to handle post and profile image uploads.
3. Authentication: Enable Email/Password providers in the Supabase Auth settings.
4. JWT Secret: Locate your JWT Secret in Project Settings > API. This is required by the backend to verify user sessions.

2. Backend Deployment (Railway)

The FastAPI backend handles data logic and communicates with Supabase using the service role key.

1. Connect Repository: Log in to Railway, create a new project, and connect your GitHub repository.
2. Set Root Directory: Specify backend/ as the root directory for the service.
3. Build Configuration: Railway will automatically detect the requirements.txt. Ensure the start command is set to:

   python -m uvicorn APP.main:app --host 0.0.0.0 --port ${PORT}
   

4. Environment Variables: Add the following variables in the Railway dashboard:

| Variable | Description | | :--- | :--- | | SUPABASE_URL | Your Supabase project URL. | | SUPABASE_KEY | Your Supabase Service Role key (for admin access). | | SUPABASE_JWT_SECRET | The JWT Secret from Supabase settings. | | PORT | Set to 8080 (or leave as default). |

Once deployed, Railway will provide a public URL (e.g., https://backend-production.up.railway.app). Copy this URL for the frontend setup.

3. Frontend Deployment (Vercel)

The Next.js frontend is optimized for Vercel and handles the user interface and direct interactions with Supabase Auth/Storage.

1. Import Project: In Vercel, import your GitHub repository.
2. Set Root Directory: Select frontend/ as the root directory.
3. Framework Preset: Ensure "Next.js" is selected.
4. Environment Variables: Add the following variables:

| Variable | Description | | :--- | :--- | | NEXT_PUBLIC_SUPABASE_URL | Your Supabase project URL. | | NEXT_PUBLIC_SUPABASE_ANON_KEY | Your Supabase Anon key (client-side safe). | | NEXT_PUBLIC_API_URL | The public URL of your Railway backend. |

1. Deploy: Click "Deploy." Vercel will build the application and provide a production URL.

4. Final Configuration

CORS Settings

To allow the frontend to communicate with the backend, you must ensure the backend allows requests from your Vercel domain.

• In backend/APP/main.py, verify that allow_origins includes your production Vercel URL.
• If you used ["*"] for development, it is recommended to restrict this to your specific domain in production.

Supabase Redirect URLs

In the Supabase dashboard, navigate to Auth > URL Configuration and add your production Vercel URL to the Redirect URLs list. This ensures that authentication flows (like password resets or email confirmations) return users to the correct site.

Environment Variable Summary

Backend (.env)

SUPABASE_URL=https://your-project.supabase.co
SUPABASE_KEY=your-service-role-key
SUPABASE_JWT_SECRET=your-jwt-secret

Frontend (.env.local)

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
NEXT_PUBLIC_API_URL=https://your-backend-url.railway.app