|
1
|
# React and Vite Setup |
|
2
|
|
|
3
|
Configuration requirements for React applications using Vite in the Replit environment. |
|
4
|
|
|
5
|
## Mandatory Setup |
|
6
|
|
|
7
|
### Configure allowedHosts in vite.config.ts |
|
8
|
|
|
9
|
You **must** allow all hosts in your Vite configuration. Without this, the user will never see your application through the Replit proxy. |
|
10
|
|
|
11
|
```typescript |
|
12
|
import { defineConfig } from 'vite'; |
|
13
|
import react from '@vitejs/plugin-react'; |
|
14
|
|
|
15
|
export default defineConfig({ |
|
16
|
plugins: [react()], |
|
17
|
server: { |
|
18
|
host: '0.0.0.0', |
|
19
|
port: 5000, |
|
20
|
allowedHosts: true, |
|
21
|
// Or specify the Replit domains explicitly: |
|
22
|
// allowedHosts: ['.replit.dev', '.repl.co'] |
|
23
|
}, |
|
24
|
}); |
|
25
|
``` |
|
26
|
|
|
27
|
## Full Example Configuration |
|
28
|
|
|
29
|
```typescript |
|
30
|
import { defineConfig } from 'vite'; |
|
31
|
import react from '@vitejs/plugin-react'; |
|
32
|
import path from 'path'; |
|
33
|
|
|
34
|
export default defineConfig({ |
|
35
|
plugins: [react()], |
|
36
|
server: { |
|
37
|
host: '0.0.0.0', |
|
38
|
port: 5000, |
|
39
|
allowedHosts: true, |
|
40
|
strictPort: true, |
|
41
|
}, |
|
42
|
resolve: { |
|
43
|
alias: { |
|
44
|
'@': path.resolve(__dirname, './src'), |
|
45
|
}, |
|
46
|
}, |
|
47
|
build: { |
|
48
|
outDir: 'dist', |
|
49
|
sourcemap: true, |
|
50
|
}, |
|
51
|
}); |
|
52
|
``` |
|
53
|
|
|
54
|
## Hot Module Replacement (HMR) |
|
55
|
|
|
56
|
Vite's HMR works automatically in Replit. Frontend changes are reflected immediately without a manual restart. |
|
57
|
|
|
58
|
**Requires restart:** |
|
59
|
|
|
60
|
- vite.config.ts changes |
|
61
|
- Environment variable changes |
|
62
|
- Package installation |
|
63
|
|
|
64
|
**Does NOT require restart:** |
|
65
|
|
|
66
|
- React component changes |
|
67
|
- CSS/style changes |
|
68
|
- Asset changes |
|
69
|
|
|
70
|
## Connecting to Backend API |
|
71
|
|
|
72
|
When your React app calls a backend API, use the Replit domain instead of localhost: |
|
73
|
|
|
74
|
```typescript |
|
75
|
// Get the API URL from environment or use the Replit domain |
|
76
|
const API_URL = import.meta.env.VITE_API_URL || ''; |
|
77
|
|
|
78
|
// Fetch from your backend |
|
79
|
const response = await fetch(`${API_URL}/api/users`); |
|
80
|
``` |
|
81
|
|
|
82
|
For development, you can configure a proxy in vite.config.ts: |
|
83
|
|
|
84
|
```typescript |
|
85
|
export default defineConfig({ |
|
86
|
server: { |
|
87
|
host: '0.0.0.0', |
|
88
|
port: 5000, |
|
89
|
allowedHosts: true, |
|
90
|
proxy: { |
|
91
|
'/api': { |
|
92
|
target: 'http://localhost:8000', |
|
93
|
changeOrigin: true, |
|
94
|
}, |
|
95
|
}, |
|
96
|
}, |
|
97
|
}); |
|
98
|
``` |
|
99
|
|
|
100
|
## Troubleshooting |
|
101
|
|
|
102
|
### User Cannot See the Application |
|
103
|
|
|
104
|
1. Verify `allowedHosts: true` is in vite.config.ts |
|
105
|
2. Confirm server is bound to `0.0.0.0` (not `127.0.0.1` or `localhost`) |
|
106
|
3. Check port is 5000 |
|
107
|
4. Restart the workflow after config changes |
|
108
|
|
|
109
|
### Changes Not Appearing |
|
110
|
|
|
111
|
1. For config changes: Restart the workflow |
|
112
|
2. For component changes: HMR should handle it automatically |
|
113
|
3. If HMR fails: Check browser console for errors, then restart |
|
114
|
|
|
115
|
### Build Errors |
|
116
|
|
|
117
|
Check for: |
|
118
|
|
|
119
|
- Missing dependencies in package.json |
|
120
|
- TypeScript errors in source files |
|
121
|
- Invalid import paths |