Skip to content

Commit 10fb943

Browse files
author
martinmeerAT
committed
fix() wrong navigation
1 parent 767b726 commit 10fb943

File tree

6 files changed

+289
-19
lines changed

6 files changed

+289
-19
lines changed

‎DEPLOYMENT_FIX_SUMMARY.md‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
# GitHub Pages Deployment Fix - Summary
2+
3+
## ✅ What Was Fixed
4+
5+
The 404 error `GET https://martinmeer.github.io/ 404 (Not Found)` when clicking navigation buttons has been **fixed**.
6+
7+
### Root Cause
8+
The `NavigationService` was using incorrect URL construction:
9+
```typescript
10+
// ❌ WRONG - Strips the project path
11+
new URL('/#/register', 'https://martinmeer.github.io/my-car-tech-tracker-front')
12+
// Result: https://martinmeer.github.io/#/register (WRONG!)
13+
14+
// ✅ FIXED - Correctly preserves the full path
15+
`${baseUrl}/#/register`
16+
// Result: https://martinmeer.github.io/my-car-tech-tracker-front/#/register (CORRECT!)
17+
```
18+
19+
## 📝 Files Changed
20+
21+
1. `apps/marketing-site/src/services/NavigationService.ts` - Fixed all navigation methods
22+
2. `apps/main-app/src/services/NavigationService.ts` - Fixed all navigation methods
23+
3. `apps/marketing-site/src/config/app.config.js` - Added demo mode documentation
24+
4. `apps/main-app/src/config/app.config.js` - Added demo mode documentation
25+
26+
## 🚀 Next Steps - Deploy the Fix
27+
28+
### Option 1: Automatic Deployment (Recommended)
29+
30+
Simply push the changes to trigger GitHub Actions:
31+
32+
```bash
33+
git add .
34+
git commit -m "Fix navigation URL construction for GitHub Pages"
35+
git push origin main
36+
```
37+
38+
The GitHub Actions workflow will automatically build and deploy both apps.
39+
40+
### Option 2: Manual Build (For Local Testing)
41+
42+
```bash
43+
# Test marketing site locally
44+
cd apps/marketing-site
45+
npm run dev
46+
47+
# Test main app locally (in another terminal)
48+
cd apps/main-app
49+
npm run dev
50+
```
51+
52+
## ✅ Verification After Deployment
53+
54+
Once deployed, test these scenarios:
55+
56+
1. **Navigate to:** `https://martinmeer.github.io/my-car-tech-tracker-front/`
57+
2. **Click buttons:** Register, Login, Account navigation
58+
3. **Check console:** Should see no 404 errors
59+
4. **Test registration:** Create a new account (saves to localStorage)
60+
5. **Test login:** Log in with created account
61+
6. **Navigate to main app:** Should redirect to `/app` correctly
62+
63+
## 🔍 Expected Behavior
64+
65+
### Demo Mode (Current Configuration)
66+
- ✅ No backend required
67+
- ✅ All data stored in browser localStorage
68+
- ✅ Perfect for GitHub Pages deployment
69+
- ✅ Great for demos and portfolio
70+
71+
### URLs
72+
- Marketing Site: `https://martinmeer.github.io/my-car-tech-tracker-front/`
73+
- Main App: `https://martinmeer.github.io/my-car-tech-tracker-front/app/`
74+
75+
## 📚 Documentation
76+
77+
For detailed information, see:
78+
- `GITHUB_PAGES_404_FIX.md` - Complete technical documentation
79+
- `GITHUB_PAGES_DEPLOYMENT.md` - General deployment guide
80+
81+
## 💡 Future: Connecting to Real Backend
82+
83+
When you're ready to add a backend:
84+
85+
1. Update `API_URL` in both config files:
86+
```javascript
87+
API_URL: 'https://your-backend-api.com/api'
88+
```
89+
90+
2. Deploy your backend server
91+
3. Rebuild and redeploy
92+
93+
The app will automatically detect the valid API URL and switch from localStorage to backend mode!
94+
95+
## ❓ Troubleshooting
96+
97+
If you still see 404 errors after deployment:
98+
99+
1. **Wait 2-3 minutes** - GitHub Pages needs time to propagate changes
100+
2. **Hard refresh** - Press `Ctrl+Shift+R` (Windows) or `Cmd+Shift+R` (Mac)
101+
3. **Clear cache** - Clear browser cache and reload
102+
4. **Check Actions** - Verify workflow succeeded in GitHub Actions tab
103+
5. **Check Pages settings** - Ensure source is "GitHub Actions" (not branch)
104+
105+
## 🎉 Status
106+
107+
**All fixes applied and ready for deployment!**
108+
109+
No additional changes needed. Just push to GitHub and the fix will be live.
110+

‎GITHUB_PAGES_404_FIX.md‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
# GitHub Pages 404 Error Fix
2+
3+
## Issue Description
4+
5+
When deploying to GitHub Pages in demo mode, navigation functions (like `navigateToRegister()`) were causing 404 errors by trying to access `https://martinmeer.github.io/` instead of the correct path `https://martinmeer.github.io/my-car-tech-tracker-front/`.
6+
7+
## Root Cause
8+
9+
The problem was in the `NavigationService` URL construction using JavaScript's `URL` constructor:
10+
11+
```typescript
12+
// ❌ WRONG - Strips base path when hash is in first parameter
13+
const url = new URL('/#/register', 'https://martinmeer.github.io/my-car-tech-tracker-front');
14+
// Results in: https://martinmeer.github.io/#/register
15+
16+
// ✅ CORRECT - Concatenate strings then create URL
17+
let url = `${baseUrl}/#/register`;
18+
const urlObj = new URL(url); // For adding query params if needed
19+
```
20+
21+
### Why This Happens
22+
23+
When using `new URL(path, base)`:
24+
- If `path` starts with `/`, it **replaces** the path from the base URL
25+
- A hash `#` in the path makes it a fragment, which further complicates resolution
26+
- Result: `new URL('/#/login', 'https://example.com/my-app')` → `https://example.com/#/login`
27+
28+
## Files Fixed
29+
30+
### 1. Marketing Site Navigation
31+
**File:** `apps/marketing-site/src/services/NavigationService.ts`
32+
33+
**Changes:**
34+
- `navigateToLogin()` - Fixed URL construction
35+
- `navigateToRegister()` - Fixed URL construction
36+
- `navigateToAccount()` - Fixed URL construction
37+
- `navigateToMarketing()` - Fixed URL construction
38+
39+
### 2. Main App Navigation
40+
**File:** `apps/main-app/src/services/NavigationService.ts`
41+
42+
**Changes:**
43+
- `navigateToLogin()` - Fixed URL construction
44+
- `navigateToMarketing()` - Fixed URL construction
45+
46+
### 3. Configuration Comments
47+
**Files:**
48+
- `apps/marketing-site/src/config/app.config.js`
49+
- `apps/main-app/src/config/app.config.js`
50+
51+
**Changes:**
52+
- Added clear comments explaining demo mode configuration
53+
- Clarified that the placeholder API URL enables localStorage/demo mode
54+
55+
## How Demo Mode Works
56+
57+
The app is configured to run in **demo mode** (without backend) when deployed to GitHub Pages:
58+
59+
1. **API URL Check:** The `ConfigService.shouldUseBackend()` checks if API_URL contains `'your-api-domain.com'` or `'localhost'`
60+
2. **Demo Detection:** If it finds these placeholders, it returns `false` → uses localStorage
61+
3. **No Backend Needed:** All data is stored in browser localStorage, perfect for demos
62+
63+
### To Enable Real Backend
64+
65+
If you want to connect to a real backend API in production:
66+
67+
1. Update the API_URL in config files:
68+
```javascript
69+
production: {
70+
MARKETING_URL: 'https://martinmeer.github.io/my-car-tech-tracker-front',
71+
MAIN_APP_URL: 'https://martinmeer.github.io/my-car-tech-tracker-front/app',
72+
API_URL: 'https://your-actual-backend-api.com/api' // Your real backend
73+
}
74+
```
75+
76+
2. Deploy your backend and ensure CORS is configured
77+
3. Rebuild and redeploy both apps
78+
79+
## Testing the Fix
80+
81+
After deploying the fixed version:
82+
83+
1. **Navigate to marketing site:** `https://martinmeer.github.io/my-car-tech-tracker-front/`
84+
2. **Click "Register" or "Login"** - Should navigate correctly
85+
3. **Register a new user** - Should work with localStorage
86+
4. **Navigate to main app** - Should redirect correctly to `/app`
87+
88+
## Deployment
89+
90+
To deploy the fix:
91+
92+
```bash
93+
# Build both apps
94+
npm run build
95+
96+
# Or deploy via GitHub Actions (automatically triggered on push to main)
97+
git add .
98+
git commit -m "Fix navigation URL construction for GitHub Pages deployment"
99+
git push origin main
100+
```
101+
102+
The GitHub Actions workflow will automatically:
103+
1. Build both apps with `NODE_ENV=production`
104+
2. Deploy marketing site to root
105+
3. Deploy main app to `/app` subdirectory
106+
4. Create `.nojekyll` file to prevent Jekyll processing
107+
108+
## Verification Checklist
109+
110+
After deployment, verify:
111+
- [ ] Marketing site loads at root URL
112+
- [ ] Main app loads at `/app` URL
113+
- [ ] Navigation between pages works without 404 errors
114+
- [ ] Registration works (saves to localStorage)
115+
- [ ] Login works (uses localStorage)
116+
- [ ] Data persists across page reloads
117+
- [ ] Browser console shows no 404 errors
118+
- [ ] ConfigService debug info shows `Using Backend: false`
119+
120+
## Debug Tips
121+
122+
If issues persist:
123+
124+
1. **Check browser console:**
125+
```javascript
126+
// In browser console
127+
ConfigService.logDebugInfo();
128+
// Should show: Using Backend: false
129+
```
130+
131+
2. **Check localStorage:**
132+
```javascript
133+
// In browser console
134+
console.log(localStorage.getItem('auth_token'));
135+
console.log(localStorage.getItem('user_data'));
136+
```
137+
138+
3. **Check GitHub Actions:**
139+
- Go to repository → Actions tab
140+
- Verify "Deploy to GitHub Pages" workflow succeeded
141+
- Check build logs for errors
142+
143+
4. **Check GitHub Pages settings:**
144+
- Repository → Settings → Pages
145+
- Source should be: **GitHub Actions** (not "Deploy from a branch")
146+
147+
## Additional Notes
148+
149+
- Both apps run independently in demo mode
150+
- No backend server required for GitHub Pages deployment
151+
- Perfect for demonstrations, prototypes, or portfolio showcases
152+
- When ready for production, simply update the API_URL and deploy a backend
153+

‎apps/main-app/src/config/app.config.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@ export const APP_CONFIG = {
1313
production: {
1414
MARKETING_URL: 'https://martinmeer.github.io/my-car-tech-tracker-front',
1515
MAIN_APP_URL: 'https://martinmeer.github.io/my-car-tech-tracker-front/app',
16-
API_URL: 'https://your-api-domain.com/api' // TODO: Update with actual API URL
16+
// DEMO MODE: Keep this placeholder to run in localStorage/demo mode without backend
17+
// To use real API: Replace with your actual backend URL (e.g., 'https://api.yourserver.com/api')
18+
API_URL: 'https://your-api-domain.com/api'
1719
}
1820
},
1921

‎apps/main-app/src/services/NavigationService.ts‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,18 @@ export class NavigationService {
44
private static config = APP_CONFIG.getCurrentConfig();
55

66
static navigateToLogin(returnUrl?: string) {
7-
const url = new URL('/#/login', this.config.MARKETING_URL);
7+
let url = `${this.config.MARKETING_URL}/#/login`;
88
if (returnUrl) {
9-
url.searchParams.set('return_url', returnUrl);
9+
const urlObj = new URL(url);
10+
urlObj.searchParams.set('return_url', returnUrl);
11+
url = urlObj.toString();
1012
}
11-
window.location.href = url.toString();
13+
window.location.href = url;
1214
}
1315

1416
static navigateToMarketing(page: string = '/') {
1517
// Handle hash routing - if page doesn't start with #, add it
16-
const hashPage = page === '/' ? '/' : (page.startsWith('#') ? page : `/#${page}`);
17-
const url = new URL(hashPage, this.config.MARKETING_URL);
18-
window.location.href = url.toString();
18+
const hashPage = page === '/' ? '' : (page.startsWith('#') ? page : `#${page}`);
19+
window.location.href = `${this.config.MARKETING_URL}/${hashPage}`;
1920
}
2021
}

‎apps/marketing-site/src/config/app.config.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@ export const APP_CONFIG = {
1414
production: {
1515
MARKETING_URL: 'https://martinmeer.github.io/my-car-tech-tracker-front',
1616
MAIN_APP_URL: 'https://martinmeer.github.io/my-car-tech-tracker-front/app',
17-
API_URL: 'https://your-api-domain.com/api' // TODO: Update with actual API URL
17+
// DEMO MODE: Keep this placeholder to run in localStorage/demo mode without backend
18+
// To use real API: Replace with your actual backend URL (e.g., 'https://api.yourserver.com/api')
19+
API_URL: 'https://your-api-domain.com/api'
1820
}
1921
},
2022

‎apps/marketing-site/src/services/NavigationService.ts‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -30,32 +30,34 @@ export class NavigationService {
3030
*/
3131
static navigateToMarketing(page: string = '/') {
3232
// Handle hash routing - if page doesn't start with #, add it
33-
const hashPage = page === '/' ? '/' : (page.startsWith('#') ? page : `/#${page}`);
34-
const url = new URL(hashPage, this.config.MARKETING_URL);
35-
window.location.href = url.toString();
33+
const hashPage = page === '/' ? '' : (page.startsWith('#') ? page : `#${page}`);
34+
window.location.href = `${this.config.MARKETING_URL}/${hashPage}`;
3635
}
3736

3837
/**
3938
* Navigate to specific marketing pages
4039
*/
4140
static navigateToLogin(returnUrl?: string) {
42-
const url = new URL('/#/login', this.config.MARKETING_URL);
41+
let url = `${this.config.MARKETING_URL}/#/login`;
4342
if (returnUrl) {
44-
url.searchParams.set('return_url', returnUrl);
43+
const urlObj = new URL(url);
44+
urlObj.searchParams.set('return_url', returnUrl);
45+
url = urlObj.toString();
4546
}
46-
window.location.href = url.toString();
47+
window.location.href = url;
4748
}
4849

4950
static navigateToRegister(plan?: 'starter' | 'pro' | 'enterprise') {
50-
const url = new URL('/#/register', this.config.MARKETING_URL);
51+
let url = `${this.config.MARKETING_URL}/#/register`;
5152
if (plan) {
52-
url.searchParams.set('plan', plan);
53+
const urlObj = new URL(url);
54+
urlObj.searchParams.set('plan', plan);
55+
url = urlObj.toString();
5356
}
54-
window.location.href = url.toString();
57+
window.location.href = url;
5558
}
5659

5760
static navigateToAccount() {
58-
const url = new URL('/#/account', this.config.MARKETING_URL);
59-
window.location.href = url.toString();
61+
window.location.href = `${this.config.MARKETING_URL}/#/account`;
6062
}
6163
}

0 commit comments

Comments
 (0)