Skip to content

Commit a52932d

Browse files
NadeeshaNJNadeeshaNJ
committed
docs: Add automatic deployment guide
1 parent 793ccd4 commit a52932d

1 file changed

Lines changed: 235 additions & 0 deletions

File tree

‎ReadMe files/AUTO_DEPLOYMENT.md‎

Lines changed: 235 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
# 🚀 Automatic Deployment Guide
2+
3+
## Overview
4+
5+
The SkyNest project now uses **GitHub Actions** for automatic deployment. When you push to the `main` branch, the following happens automatically:
6+
7+
1. ✅ **Build** - React app is built with production settings
8+
2. ✅ **Test** - Code quality and security checks run
9+
3. ✅ **Deploy** - Automatically deployed to GitHub Pages
10+
4. ✅ **Live** - Changes appear on your live site within 2-3 minutes
11+
12+
---
13+
14+
## 🎯 How It Works
15+
16+
### When You Push to `main`:
17+
18+
```bash
19+
git add .
20+
git commit -m "Your commit message"
21+
git push
22+
```
23+
24+
**GitHub Actions automatically:**
25+
- Builds your React app
26+
- Uses production environment variables
27+
- Deploys to GitHub Pages (`gh-pages` branch)
28+
- Makes changes live at: `https://nadeeshanj.github.io/Database-Project`
29+
30+
---
31+
32+
## 📋 What Changed
33+
34+
### ❌ **OLD Process (Manual)**
35+
```bash
36+
npm run build # Build locally
37+
npm run deploy # Push to gh-pages manually
38+
```
39+
40+
### ✅ **NEW Process (Automatic)**
41+
```bash
42+
git push # That's it! GitHub Actions handles the rest
43+
```
44+
45+
---
46+
47+
## 🔍 Monitoring Deployments
48+
49+
### Check Deployment Status:
50+
51+
1. **GitHub Actions Tab**
52+
Go to: `https://github.com/NadeeshaNJ/Database-Project/actions`
53+
54+
2. **Watch the Workflow**
55+
You'll see: "SkyNest Frontend CI/CD"
56+
- 🟡 Yellow = Running
57+
- 🟢 Green = Success
58+
- 🔴 Red = Failed
59+
60+
3. **Deployment Time**
61+
Typically takes **2-3 minutes** from push to live
62+
63+
---
64+
65+
## 🌐 Live URLs
66+
67+
| Environment | URL | Updated By |
68+
|-------------|-----|------------|
69+
| **Production** | https://nadeeshanj.github.io/Database-Project | GitHub Actions (automatic on push to `main`) |
70+
| **Backend API** | https://skynest-backend-api.onrender.com | Render (automatic on push to `Database-Back/main`) |
71+
72+
---
73+
74+
## 🛠️ Environment Variables
75+
76+
The GitHub Actions workflow automatically uses these production settings:
77+
78+
```bash
79+
REACT_APP_API_BASE=https://skynest-backend-api.onrender.com
80+
REACT_APP_ENV=production
81+
REACT_APP_DEBUG=false
82+
```
83+
84+
These are **hardcoded in the workflow** so you don't need to worry about `.env` files being deployed.
85+
86+
---
87+
88+
## 🚨 Troubleshooting
89+
90+
### Changes Not Showing Up?
91+
92+
1. **Check GitHub Actions**
93+
- Go to Actions tab
94+
- Verify the workflow completed successfully (green checkmark)
95+
- If failed (red X), click to see error logs
96+
97+
2. **Clear Browser Cache**
98+
- Hard refresh: `Ctrl + Shift + F5`
99+
- Or use Incognito/Private mode
100+
- Or clear browser cache completely
101+
102+
3. **Wait for CDN**
103+
- GitHub Pages uses a CDN
104+
- Changes can take 2-5 minutes to propagate
105+
- Be patient!
106+
107+
### Workflow Failed?
108+
109+
**Common Causes:**
110+
- Build error (check logs in GitHub Actions)
111+
- Missing dependencies
112+
- Syntax errors in code
113+
114+
**Fix:**
115+
1. Check the error message in GitHub Actions
116+
2. Fix the issue locally
117+
3. Push again - workflow will re-run automatically
118+
119+
---
120+
121+
## 📊 Workflow Details
122+
123+
The workflow has 5 jobs:
124+
125+
1. **Build** 🏗️
126+
- Installs dependencies
127+
- Builds React app
128+
- Creates production bundle
129+
130+
2. **Quality** 📊
131+
- Checks project structure
132+
- Scans for console.log
133+
- Finds TODO/FIXME comments
134+
135+
3. **Security** 🔒
136+
- Runs npm audit
137+
- Checks for hardcoded secrets
138+
- Validates dependencies
139+
140+
4. **Deploy** 🚀
141+
- Only runs on `main` branch
142+
- Pushes build to `gh-pages` branch
143+
- Updates live site
144+
145+
5. **Report** 📝
146+
- Generates summary
147+
- Shows all job statuses
148+
- Provides live URL
149+
150+
---
151+
152+
## 💡 Benefits
153+
154+
### Before (Manual Deployment)
155+
- ❌ Had to remember to run `npm run deploy`
156+
- ❌ Could forget to build
157+
- ❌ Manual process prone to errors
158+
- ❌ Local build might differ from production
159+
160+
### After (Automatic Deployment)
161+
- ✅ Just push code
162+
- ✅ Consistent builds every time
163+
- ✅ Automatic deployment
164+
- ✅ Build artifacts tracked
165+
- ✅ Full CI/CD pipeline
166+
167+
---
168+
169+
## 🔐 Backend Deployment
170+
171+
The **backend** (Database-Back repo) also has GitHub Actions:
172+
173+
- **Repository:** https://github.com/NadeeshaNJ/Database-Back
174+
- **Workflow:** Backend CI/CD
175+
- **Triggers:** Push to `main` or `develop`
176+
- **Deployment:** Render (automatic)
177+
178+
Both frontend and backend are now fully automated! 🎉
179+
180+
---
181+
182+
## 📝 Quick Reference
183+
184+
| Action | Command |
185+
|--------|---------|
186+
| Deploy to Production | `git push` (to main) |
187+
| Check Deployment Status | Visit GitHub Actions tab |
188+
| View Live Site | https://nadeeshanj.github.io/Database-Project |
189+
| Manual Build (local testing) | `npm run build` |
190+
| Local Development | `npm start` |
191+
192+
---
193+
194+
## ⚙️ Advanced: Manual Trigger
195+
196+
You can also trigger deployment manually without pushing:
197+
198+
1. Go to: https://github.com/NadeeshaNJ/Database-Project/actions
199+
2. Click "SkyNest Frontend CI/CD"
200+
3. Click "Run workflow" button
201+
4. Select `main` branch
202+
5. Click green "Run workflow"
203+
204+
---
205+
206+
## 🎓 Summary
207+
208+
**What you need to know:**
209+
210+
1. ✅ Push to `main` = Automatic deployment
211+
2. ✅ Check GitHub Actions tab to monitor progress
212+
3. ✅ Wait 2-3 minutes for changes to go live
213+
4. ✅ Hard refresh browser if changes don't appear
214+
5. ✅ No more `npm run deploy` needed!
215+
216+
**Your new workflow:**
217+
218+
```bash
219+
# 1. Make changes to code
220+
vim src/pages/Dashboard.js
221+
222+
# 2. Commit and push
223+
git add .
224+
git commit -m "Update dashboard"
225+
git push
226+
227+
# 3. Wait ~3 minutes
228+
# 4. Hard refresh browser (Ctrl + Shift + F5)
229+
# 5. See your changes live! 🎉
230+
```
231+
232+
---
233+
234+
*Last Updated: October 19, 2025*
235+
*Deployment System: GitHub Actions + GitHub Pages*

0 commit comments

Comments
 (0)