How to build full-stack apps in Replit

1// server/index.js
2import express from 'express';
3import pg from 'pg';
4
5const app = express();
6const PORT = 3001;
7
8app.use(express.json());
9
10// Database connection
11const pool = new pg.Pool({
12  connectionString: process.env.DATABASE_URL
13});
14
15// Health check
16app.get('/api/health', (req, res) => {
17  res.json({ status: 'ok', timestamp: new Date().toISOString() });
18});
19
20// Users API
21app.get('/api/users', async (req, res) => {
22  try {
23    const result = await pool.query('SELECT * FROM users ORDER BY id');
24    res.json(result.rows);
25  } catch (err) {
26    console.error('Database error:', err.message);
27    res.status(500).json({ error: 'Database query failed' });
28  }
29});
30
31app.post('/api/users', async (req, res) => {
32  const { name, email } = req.body;
33  try {
34    const result = await pool.query(
35      'INSERT INTO users (name, email) VALUES ($1, $2) RETURNING *',
36      [name, email]
37    );
38    res.status(201).json(result.rows[0]);
39  } catch (err) {
40    console.error('Insert error:', err.message);
41    res.status(500).json({ error: 'Failed to create user' });
42  }
43});
44
45app.listen(PORT, '0.0.0.0', () => {
46  console.log(`Server running on port ${PORT}`);
47});

1# .replit
2entrypoint = "client/src/App.tsx"
3modules = ["nodejs-20:v8-20230920-bd784b9"]
4
5# Run both frontend and backend
6run = "cd server && node index.js & cd client && npm run dev & wait"
7
8[nix]
9channel = "stable-24_05"
10
11[deployment]
12run = ["sh", "-c", "cd server && node index.js"]
13build = ["sh", "-c", "cd client && npm install && npm run build"]
14deploymentTarget = "cloudrun"
15
16[[ports]]
17localPort = 5173
18externalPort = 80
19
20[[ports]]
21localPort = 3001
22externalPort = 3001
23
24hidden = [".config", "package-lock.json", "node_modules"]

1// client/src/App.tsx
2import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
3import Home from './pages/Home';
4import Users from './pages/Users';
5import About from './pages/About';
6
7function App() {
8  return (
9    <BrowserRouter>
10      <nav className="p-4 bg-gray-100 flex gap-4">
11        <Link to="/" className="text-blue-600 hover:underline">Home</Link>
12        <Link to="/users" className="text-blue-600 hover:underline">Users</Link>
13        <Link to="/about" className="text-blue-600 hover:underline">About</Link>
14      </nav>
15      <main className="p-4">
16        <Routes>
17          <Route path="/" element={<Home />} />
18          <Route path="/users" element={<Users />} />
19          <Route path="/about" element={<About />} />
20        </Routes>
21      </main>
22    </BrowserRouter>
23  );
24}
25
26export default App;

1// client/vite.config.ts
2import { defineConfig } from 'vite';
3import react from '@vitejs/plugin-react';
4
5export default defineConfig({
6  plugins: [react()],
7  server: {
8    host: '0.0.0.0',
9    port: 5173,
10    proxy: {
11      '/api': {
12        target: 'http://localhost:3001',
13        changeOrigin: true
14      }
15    }
16  }
17});
18
19// client/src/pages/Users.tsx
20import { useEffect, useState } from 'react';
21
22interface User {
23  id: number;
24  name: string;
25  email: string;
26}
27
28export default function Users() {
29  const [users, setUsers] = useState<User[]>([]);
30
31  useEffect(() => {
32    fetch('/api/users')
33      .then(res => res.json())
34      .then(setUsers)
35      .catch(console.error);
36  }, []);
37
38  return (
39    <div>
40      <h1 className="text-2xl font-bold mb-4">Users</h1>
41      <ul className="space-y-2">
42        {users.map(user => (
43          <li key={user.id} className="p-2 bg-gray-50 rounded">
44            {user.name} — {user.email}
45          </li>
46        ))}
47      </ul>
48    </div>
49  );
50}

1// Add to server/index.js — after all API routes
2import path from 'path';
3import { fileURLToPath } from 'url';
4
5const __dirname = path.dirname(fileURLToPath(import.meta.url));
6
7// Serve React build files in production
8if (process.env.REPLIT_DEPLOYMENT) {
9  app.use(express.static(path.join(__dirname, '../client/dist')));
10
11  // Catch-all: send index.html for client-side routes
12  app.get('*', (req, res) => {
13    res.sendFile(path.join(__dirname, '../client/dist/index.html'));
14  });
15}