Deployment Strategy
Deployment Overview
Blogify is designed as a decoupled full-stack application. To achieve optimal performance and scalability, the architecture is split across specialized hosting providers:
- Frontend: Vercel (Next.js optimized hosting)
- Backend API: Railway (Containerized FastAPI hosting)
- Database, Auth & Storage: Supabase (PostgreSQL and Object Storage)
1. Database & Authentication (Supabase)
Before deploying the application code, you must set up your backend services and security policies.
Project Setup
- Create a new project in the Supabase Dashboard.
- Run the following SQL in the SQL Editor to create the necessary tables:
-- Create a posts table create table posts ( id uuid default gen_random_uuid() primary key, title text not null, content text not null, user_id uuid references auth.users not null, tags text[] default '{}', image_url text, created_at timestamp with time zone default now(), updated_at timestamp with time zone ); -- Enable Row Level Security (RLS) alter table posts enable row level security;
Storage Setup
- Navigate to Storage in Supabase.
- Create a new public bucket named
images. - Set up an RLS policy to allow authenticated users to upload files.
2. Backend Deployment (Railway)
The FastAPI backend handles high-performance API requests and can be deployed easily using Railway's GitHub integration.
Steps to Deploy
- Log in to Railway and click New Project.
- Select Deploy from GitHub repo and choose your
BLOGIFYrepository. - In the Settings tab, ensure the build command is detected and the start command is set to:
uvicorn main:app --host 0.0.0.0 --port ${PORT}
Environment Variables
Add the following variables in the Railway Variables tab:
MONGODB_URI: Your MongoDB Atlas connection string.MONGODB_DB: The name of your production database.
3. Frontend Deployment (Vercel)
The Next.js frontend is optimized for Vercel, supporting Server-Side Rendering (SSR) and efficient static generation.
Steps to Deploy
- Connect your GitHub account to Vercel.
- Select the
BLOGIFYrepository. - Vercel will automatically detect the Next.js framework.
- Set the Root Directory to
frontendif your repository structure is nested.
Environment Variables
Configure these variables in the Vercel project settings to connect the frontend to your services:
| Variable | Description |
| :--- | :--- |
| NEXT_PUBLIC_API_URL | The URL of your deployed Railway backend API. |
| NEXT_PUBLIC_SUPABASE_URL | Your Supabase Project URL (found in Project Settings). |
| NEXT_PUBLIC_SUPABASE_ANON_KEY | Your Supabase Project API "anon" key. |
Post-Deployment Checklist
After the services are live, verify the following:
- CORS Settings: Ensure your Backend API (Railway) allows requests from your Vercel domain. Update your FastAPI middleware configuration if necessary.
- Auth Redirects: In the Supabase Auth settings, add your Vercel URL to the Site URL and Redirect Allow List to ensure login flows work correctly.
- Storage Access: Test an image upload from a new blog post to ensure the
imagesbucket is accessible and the public URLs are rendering correctly.
Production Environment Summary
- Frontend URL:
https://your-app-name.vercel.app - Backend URL:
https://your-api-name.railway.app - Health Check: Access
https://your-api-name.railway.app/docsto verify the API is running.