.5 Deployment & Hosting

Class-Guard is a fullstack app:

• Frontend: React + Permit.io integration (hosted on Netlify).
• Backend: Node.js server that talks to Permit.io PDP (can be hosted on Render, Railway, Vercel Serverless Functions, or local tunnel during dev).

---

Frontend Deployment (Netlify)

Prerequisites

• Your frontend is in a React app (structured with /src, App.jsx, index.js).
• You have pushed it to GitHub.

Steps

1. Push changes to GitHub

   git add .
   git commit -m "Deploy-ready: Frontend with Permit.io"
   git push origin main

2. Login to Netlify

   • Go to Netlify

   • Click “Add New Site” → “Import from Git”

   • Choose your GitHub repo (Class-Guard)

   • Set:

     • Build Command: npm run build

     • Publish Directory: build

     • Environment Variables (if needed):

       • REACT_APP_API_URL=https://your-backend-url.com

3. Deploy

4. Handle "Page Not Found"

   • React is SPA (Single Page App), so routes break on reload.

   • Fix:

     • Create a _redirects file in /public folder:

       /* /index.html 200
       

---

Backend Deployment (Render or Railway Recommended)

Option 1: Render (free-tier friendly)

1. Go to Render

2. Click New > Web Service

3. Connect GitHub > Choose backend repo or folder

4. Set:

   • Build Command: npm install

   • Start Command: node server.js

   • Environment Variables:

     PERMIT_TOKEN=your_permit_api_key
     PDP_URL=https://cloudpdp.api.permit.io
     

Option 2: Railway

1. Login to Railway
2. Create a new project > Deploy Node.js
3. Add server.js
4. Add environment variables
5. Deploy and copy your Backend URL

---

Connecting Frontend to Backend

In your frontend’s fetch calls (like in AdminDashboard.jsx), make sure the URL points to your backend:

fetch('https://your-backend-URL.com/api/check-permission', {
  ...
});

Or if you're using .env in React:

REACT_APP_API_URL=https://your-backend-URL.com

In code:

fetch(`${process.env.REACT_APP_API_URL}/api/check-permission`)

---

Testing Live

• Navigate to https://your-netlify-app.netlify.app/admin
• If permission is granted by Permit.io, the dashboard loads.
• If not, you see Access Denied.

---

Dev Workflow

When working locally:

1. Backend: Run with node server.js or nodemon

2. Frontend: Run with npm start

3. Use [CORS middleware](https://www.npmjs.com/package/cors) in server.js:

   const cors = require('cors');
   app.use(cors());