Spaces:
Running on CPU Upgrade
Running on CPU Upgrade
File size: 4,342 Bytes
61d29fc | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 | ---
sidebar_position: 12
---
# π¨ CRITICAL: Which Port to Use?
## TL;DR: Go to Port 5173 for the App
```
http://localhost:5173 β YOUR ORIGINAL DASHBOARD (search, filters, everything)
http://localhost:3000 β New documentation site (just guides/docs)
```
## The Confusion Explained
### What Happened
You asked to "change the react site to use docusaurus". I interpreted this as "add documentation using Docusaurus" but kept the React dashboard separate.
**Result:** You now have TWO separate websites running:
1. **Port 3000** - Docusaurus (NEW) - Documentation only
2. **Port 5173** - React Dashboard (ORIGINAL) - All your features
### What You're Seeing
If you go to `http://localhost:3000`, you see:
- β Marketing homepage with big buttons
- β Documentation pages
- β No search functionality
- β No filters
- β No heatmap
- β Looks completely different
**This is CORRECT - it's the documentation site!**
If you go to `http://localhost:5173`, you see:
- β
Your original dashboard
- β
Search and filter functionality
- β
Interactive heatmap
- β
Document explorer
- β
Nonprofit search
- β
Opportunity tracker
- β
All your original work UNCHANGED
## Quick Test
Open these two URLs in separate browser tabs:
### Tab 1: Documentation Site
```
http://localhost:3000
```
You'll see:
- Docusaurus marketing page
- "Get Started" and "Launch Dashboard" buttons
- Feature descriptions
- Big homepage
### Tab 2: React Dashboard (YOUR ORIGINAL APP)
```
http://localhost:5173
```
You'll see:
- Dashboard with stats cards
- Charts and visualizations
- Navigation: Dashboard, Heatmap, Documents, Opportunities, Nonprofits, Settings
- **THIS IS YOUR ORIGINAL APPLICATION**
## File Locations
### React Dashboard (Port 5173)
```
frontend/
src/
pages/
Dashboard.tsx β Your original homepage
Heatmap.tsx β Interactive map
Documents.tsx β Search functionality
Opportunities.tsx β Filters and tracking
Nonprofits.tsx β Nonprofit search
App.tsx β Routes
components/
Layout.tsx β Navigation
```
**Start with:** `cd frontend && npm run dev`
### Documentation Site (Port 3000)
```
website/
docs/ β Markdown documentation
src/pages/
index.tsx β Marketing homepage
dashboard.tsx β Redirect page
docusaurus.config.ts β Configuration
```
**Start with:** `cd website && npm start`
## Nothing Was Lost
β
All your React components: **Still in `frontend/src/pages/`**
β
All your search/filter code: **Unchanged**
β
All your API integrations: **Unchanged**
β
All your styling: **Unchanged**
The Docusaurus site was **ADDED**, not used to **REPLACE** anything.
## Solution
### Option 1: Just Use the Dashboard
```bash
# Ignore the docs site, just use the dashboard
cd frontend
npm run dev
# Open http://localhost:5173
```
### Option 2: Remove Docusaurus (if you don't want it)
```bash
# Delete the documentation site
rm -rf website/
# Update README to remove docs references
```
### Option 3: Understand the Architecture
Read [ARCHITECTURE.md](ARCHITECTURE.md) which explains the three-service model.
## Common Mistakes
β Opening `http://localhost:3000` and expecting to see the dashboard
β
Opening `http://localhost:5173` to see the dashboard
β Looking at `website/src/pages/index.tsx` for dashboard code
β
Looking at `frontend/src/pages/Dashboard.tsx` for dashboard code
β Thinking Docusaurus replaced the React app
β
Understanding Docusaurus is a separate documentation layer
## Questions?
**Q: Where's my search functionality?**
A: `http://localhost:5173` β Documents page
**Q: Where's my heatmap?**
A: `http://localhost:5173` β Heatmap page
**Q: Where are my filters?**
A: `http://localhost:5173` β Opportunities page
**Q: Why does port 3000 look different?**
A: Because it's a different site (documentation). Use port 5173.
**Q: Did I lose any work?**
A: NO! Everything is in `frontend/` directory, unchanged.
---
## Right Now: What You Should Do
1. Open browser to: **http://localhost:5173**
2. You'll see your original dashboard
3. Everything works exactly as before
4. Use port 3000 only for reading documentation
**Your work is NOT lost. You're just looking at the wrong port.**
|