|
| 1 | +# Deployment Guide |
| 2 | + |
| 3 | +This guide covers how to deploy the **ChainMatrix** application. |
| 4 | +- **Frontend**: Vercel |
| 5 | +- **Backend**: Vercel (Recommended) or Render |
| 6 | + |
| 7 | +## Option 1: Full Deployment on Vercel (Recommended) |
| 8 | + |
| 9 | +Since the backend includes a `vercel.json` configuration, you can deploy both the frontend and backend to Vercel. This is often the easiest path. |
| 10 | + |
| 11 | +### 1. Backend Deployment (Vercel) |
| 12 | + |
| 13 | +1. Push your code to a GitHub repository. |
| 14 | +2. Go to [Vercel Dashboard](https://vercel.com/dashboard) and click **Add New > Project**. |
| 15 | +3. Import your GitHub repository. |
| 16 | +4. **Framework Preset**: Select **Other**. |
| 17 | +5. **Root Directory**: Click "Edit" and select `backend`. |
| 18 | +6. **Environment Variables**: Add the following variables from your `.env`: |
| 19 | + - `FLARE_RPC` |
| 20 | + - `FTSO_ADDRESS` (use `0x3d893C53D9e8056135C26C8c638B76C8b60Df726`) |
| 21 | + - `SUPABASE_URL` |
| 22 | + - `SUPABASE_KEY` |
| 23 | + - `SPONSOR_WALLET_PRIVATE_KEY` (if using smart accounts) |
| 24 | +7. Click **Deploy**. |
| 25 | +8. **Note the URL**: You will get a URL like `https://your-backend.vercel.app`. |
| 26 | + |
| 27 | +### 2. Frontend Deployment (Vercel) |
| 28 | + |
| 29 | +1. Go to [Vercel Dashboard](https://vercel.com/dashboard) and click **Add New > Project**. |
| 30 | +2. Import the **SAME** GitHub repository. |
| 31 | +3. **Framework Preset**: Vercel should auto-detect **Vite**. |
| 32 | +4. **Root Directory**: Click "Edit" and select `frontend`. |
| 33 | +5. **Environment Variables**: |
| 34 | + - `VITE_API_URL`: Set this to your **Backend URL** from the previous step (e.g., `https://your-backend.vercel.app`). |
| 35 | + - `VITE_CLERK_PUBLISHABLE_KEY`: Your Clerk Key. |
| 36 | + - `VITE_PRIVY_APP_ID`: Your Privy App ID. |
| 37 | + - `VITE_MAPBOX_API`: Your Mapbox token. |
| 38 | + - Other `VITE_` variables from your `.env`. |
| 39 | +6. Click **Deploy**. |
| 40 | + |
| 41 | +--- |
| 42 | + |
| 43 | +## Option 2: Frontend on Vercel, Backend on Render |
| 44 | + |
| 45 | +If you prefer Render for the backend (e.g., for persistent background jobs), follow these steps. |
| 46 | + |
| 47 | +### 1. Backend Deployment (Render) |
| 48 | + |
| 49 | +1. Push your code to GitHub. |
| 50 | +2. Go to [Render Dashboard](https://dashboard.render.com/) and click **New > Web Service**. |
| 51 | +3. Connect your GitHub repository. |
| 52 | +4. **Root Directory**: `backend` |
| 53 | +5. **Build Command**: `npm install` |
| 54 | +6. **Start Command**: `node server.js` |
| 55 | +7. **Environment Variables**: Add all variables from your backend `.env`. |
| 56 | +8. Click **Create Web Service**. |
| 57 | +9. **Note the URL**: Copty the provided Render URL. |
| 58 | + |
| 59 | +### 2. Frontend Deployment (Vercel) |
| 60 | + |
| 61 | +Follow the same steps as **Option 1 (Frontend)**, but set `VITE_API_URL` to your **Render Backend URL**. |
| 62 | + |
| 63 | +--- |
| 64 | + |
| 65 | +## Important Configurations |
| 66 | + |
| 67 | +### 1. CORS |
| 68 | +Ensure your backend allows requests from your frontend domain. In `backend/server.js`, you might need to update CORS if it's too restrictive, but `app.use(cors())` usually allows all origins by default, which is fine for initial testing. |
| 69 | + |
| 70 | +### 2. FTSO Optimization |
| 71 | +The backend currently connects to the **Coston2 Testnet**. Ensure your frontend wallet (MetaMask) is also connected to Coston2 if you are interacting with smart contracts there. |
| 72 | + |
| 73 | + |
| 74 | +--- |
| 75 | + |
| 76 | +## Smart Contracts (Important!) |
| 77 | + |
| 78 | +You do **NOT** host smart contracts like a website. Instead, you **deploy** them to the blockchain once. They then live there correctly forever. |
| 79 | + |
| 80 | +### 1. Deploy to Flare Coston2 Testnet |
| 81 | +Run the following command in your `smart-contracts` folder: |
| 82 | + |
| 83 | +```bash |
| 84 | +npx hardhat run scripts/deploy-flare-adapter.js --network coston |
| 85 | +``` |
| 86 | + |
| 87 | +### 2. Update Environment Variables |
| 88 | +The deployment script will print the **Contract Address**. You must update this address in your project: |
| 89 | + |
| 90 | +1. **Frontend**: Update `VITE_FLARE_ADAPTER_ADDRESS` in `frontend/.env`. |
| 91 | +2. **Backend**: Update `FLARE_ADAPTER_ADDRESS` in `backend/.env`. |
| 92 | + |
| 93 | +Re-deploy your frontend and backend if you change these variables. |
| 94 | + |
| 95 | +--- |
| 96 | + |
| 97 | +## Verification |
| 98 | +After deployment: |
| 99 | +1. Open your Frontend URL. |
| 100 | +2. Navigate to **Live Charts**. |
| 101 | +3. Verify that prices are loading (this confirms Frontend -> Backend communication). |
| 102 | + |
| 103 | +--- |
| 104 | + |
| 105 | +## Troubleshooting |
| 106 | + |
| 107 | +### "404: NOT_FOUND" or "ID: bom1::..." Error |
| 108 | +If you see an error like `ID: bom1::...` when clicking confirm or entering amounts, it means your **Frontend cannot find your Backend**. |
| 109 | + |
| 110 | +**Cause**: `VITE_API_URL` is missing or incorrect in your Vercel Frontend settings. |
| 111 | + |
| 112 | +**Fix**: |
| 113 | +1. Go to your Vercel Project Settings -> **Environment Variables**. |
| 114 | +2. Add/Update `VITE_API_URL`. |
| 115 | +3. Value: Your **Render Backend URL** (e.g., `https://chain-matrix-backend.onrender.com`). |
| 116 | +4. **Important**: You must **Redeploy** the frontend for this change to take effect (go to Deployments -> Redeploy). |
0 commit comments