296 lines
6.9 KiB
Markdown
296 lines
6.9 KiB
Markdown
# 🏥 Clinica Veterinaria Formiginese - Guida di Installazione
|
|
|
|
## Requisiti di Sistema
|
|
|
|
- **Node.js**: versione 18.x o superiore
|
|
- **npm** o **pnpm**: gestore pacchetti
|
|
- **Linux/Unix**: per il server di produzione
|
|
- **Porta disponibile**: 3000 (sviluppo) o 5000 (produzione)
|
|
|
|
---
|
|
|
|
## 📦 Struttura del Pacchetto
|
|
|
|
```
|
|
clinica-deploy/
|
|
├── clinica-app/ # Sorgenti React completi
|
|
│ ├── client/ # Frontend React
|
|
│ ├── server/ # Backend Express
|
|
│ ├── package.json # Dipendenze
|
|
│ └── ...
|
|
├── assets/ # Tutte le immagini (7 file)
|
|
│ ├── hero_dog_cat.jpg
|
|
│ ├── hero_dog.jpg
|
|
│ ├── hero_cat.jpg
|
|
│ ├── clinica_sede1.png
|
|
│ ├── clinica_ingresso1.png
|
|
│ ├── clinica_ingresso2.png
|
|
│ └── clinica_ingresso3.webp
|
|
└── SETUP_ISTRUZIONI.md # Questo file
|
|
```
|
|
|
|
---
|
|
|
|
## 🚀 Installazione Passo-Passo
|
|
|
|
### 1. Estrai il pacchetto ZIP
|
|
|
|
```bash
|
|
unzip clinica-veterinaria-deploy.zip
|
|
cd clinica-deploy
|
|
```
|
|
|
|
### 2. Copia le immagini nel progetto
|
|
|
|
```bash
|
|
cp -r assets/* clinica-app/client/public/images/
|
|
mkdir -p clinica-app/client/public/images
|
|
```
|
|
|
|
### 3. Installa le dipendenze
|
|
|
|
```bash
|
|
cd clinica-app
|
|
npm install
|
|
# oppure se usi pnpm:
|
|
pnpm install
|
|
```
|
|
|
|
### 4. Aggiorna i percorsi delle immagini
|
|
|
|
Apri il file `clinica-app/client/src/components/HeroSection.tsx` e sostituisci gli URL CDN con percorsi locali:
|
|
|
|
**Prima (URL CDN):**
|
|
```javascript
|
|
const heroImages = [
|
|
{
|
|
url: "https://d2xsxph8kpxj0f.cloudfront.net/310519663483796440/DLUbzKbSnCG3dLeob4sLeC/ChatGPTImage28mar2026,18_49_09_7d867bcd.png",
|
|
alt: "Clinica Veterinaria Formiginese - Sede esterna",
|
|
},
|
|
// ...
|
|
];
|
|
```
|
|
|
|
**Dopo (Percorsi locali):**
|
|
```javascript
|
|
const heroImages = [
|
|
{
|
|
url: "/images/clinica_sede1.png",
|
|
alt: "Clinica Veterinaria Formiginese - Sede esterna",
|
|
},
|
|
{
|
|
url: "/images/hero_dog_cat.jpg",
|
|
alt: "Golden retriever e gatto tabby insieme in un prato soleggiato",
|
|
},
|
|
{
|
|
url: "/images/clinica_ingresso1.png",
|
|
alt: "Clinica Veterinaria Formiginese - Ingresso e sala d'attesa",
|
|
},
|
|
{
|
|
url: "/images/hero_dog.jpg",
|
|
alt: "Ritratto maestoso di un Labrador",
|
|
},
|
|
{
|
|
url: "/images/clinica_ingresso2.png",
|
|
alt: "Clinica Veterinaria Formiginese - Ingresso con logo",
|
|
},
|
|
{
|
|
url: "/images/hero_cat.jpg",
|
|
alt: "Ritratto maestoso di un Maine Coon",
|
|
},
|
|
{
|
|
url: "/images/clinica_ingresso3.webp",
|
|
alt: "Clinica Veterinaria Formiginese - Ingresso principale",
|
|
},
|
|
];
|
|
```
|
|
|
|
### 5. Build per produzione
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
Questo creerà una cartella `dist/` con il sito compilato e ottimizzato.
|
|
|
|
### 6. Avvia il server di produzione
|
|
|
|
```bash
|
|
npm run start
|
|
```
|
|
|
|
Il sito sarà disponibile a: **http://localhost:3000**
|
|
|
|
---
|
|
|
|
## 🔧 Configurazione Avanzata
|
|
|
|
### Cambiare la porta
|
|
|
|
Modifica il file `server/index.ts`:
|
|
|
|
```typescript
|
|
const port = process.env.PORT || 5000; // Cambia 5000 con la porta desiderata
|
|
```
|
|
|
|
### Configurare Nginx come reverse proxy
|
|
|
|
Se usi Nginx, crea un file di configurazione:
|
|
|
|
```nginx
|
|
server {
|
|
listen 80;
|
|
server_name tuodominio.it;
|
|
|
|
location / {
|
|
proxy_pass http://localhost:3000;
|
|
proxy_http_version 1.1;
|
|
proxy_set_header Upgrade $http_upgrade;
|
|
proxy_set_header Connection 'upgrade';
|
|
proxy_set_header Host $host;
|
|
proxy_cache_bypass $http_upgrade;
|
|
}
|
|
}
|
|
```
|
|
|
|
### Usare PM2 per gestire il processo
|
|
|
|
```bash
|
|
npm install -g pm2
|
|
pm2 start npm --name "clinica" -- start
|
|
pm2 save
|
|
pm2 startup
|
|
```
|
|
|
|
---
|
|
|
|
## 📝 Modifiche Personalizzate
|
|
|
|
### Cambiare il numero di telefono
|
|
|
|
File: `client/src/components/HeroSection.tsx`
|
|
|
|
```typescript
|
|
<a href="tel:0598396263"> // Cambia questo numero
|
|
```
|
|
|
|
### Cambiare i testi
|
|
|
|
Tutti i testi sono nei componenti React in `client/src/components/`:
|
|
|
|
- `HeroSection.tsx` - Titolo, sottotitolo, CTA
|
|
- `AboutSection.tsx` - Descrizione della clinica
|
|
- `ServicesSection.tsx` - Descrizione servizi
|
|
- `TeamSection.tsx` - Nomi e specializzazioni
|
|
- `NewsSection.tsx` - Articoli del blog
|
|
- `BookingSection.tsx` - Form prenotazioni
|
|
- `AuthSection.tsx` - Registrazione/Login
|
|
- `Footer.tsx` - Informazioni di contatto
|
|
|
|
### Cambiare i colori
|
|
|
|
File: `client/src/index.css`
|
|
|
|
Cerca le variabili OKLCH e modifica i valori:
|
|
|
|
```css
|
|
--primary: oklch(0.623 0.214 259.815); /* Blu petrolio */
|
|
--accent: oklch(0.967 0.001 286.375); /* Verde acqua */
|
|
```
|
|
|
|
---
|
|
|
|
## 🐛 Troubleshooting
|
|
|
|
### Errore: "npm: command not found"
|
|
|
|
Installa Node.js:
|
|
```bash
|
|
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
|
|
sudo apt-get install -y nodejs
|
|
```
|
|
|
|
### Errore: "Port 3000 already in use"
|
|
|
|
Cambia la porta:
|
|
```bash
|
|
PORT=5000 npm start
|
|
```
|
|
|
|
### Immagini non si caricano
|
|
|
|
Verifica che le immagini siano in `client/public/images/` e che i percorsi in `HeroSection.tsx` siano corretti.
|
|
|
|
---
|
|
|
|
## 📊 Struttura dei Componenti
|
|
|
|
```
|
|
client/src/
|
|
├── components/
|
|
│ ├── Navbar.tsx # Barra di navigazione
|
|
│ ├── HeroSection.tsx # Carousel hero con immagini
|
|
│ ├── ServicesSection.tsx # Radiologia, Chirurgia, Laboratorio
|
|
│ ├── AboutSection.tsx # Chi Siamo
|
|
│ ├── TeamSection.tsx # I 6 professionisti
|
|
│ ├── NewsSection.tsx # Blog/News
|
|
│ ├── BookingSection.tsx # Prenotazione visite
|
|
│ ├── AuthSection.tsx # Registrazione/Login
|
|
│ ├── Footer.tsx # Footer
|
|
│ └── ui/ # Componenti shadcn/ui
|
|
├── pages/
|
|
│ ├── Home.tsx # Pagina principale
|
|
│ └── NotFound.tsx # Pagina 404
|
|
├── App.tsx # Router e layout
|
|
├── index.css # Stili globali
|
|
└── main.tsx # Entry point React
|
|
```
|
|
|
|
---
|
|
|
|
## 🎨 Design System
|
|
|
|
**Colori:**
|
|
- Blu petrolio (primary): `#1B4F72`
|
|
- Verde acqua (accent): `#4ECDC4`
|
|
- Sabbia (secondary): `#F5E6D3`
|
|
- Bianco (background): `#FFFFFF`
|
|
|
|
**Font:**
|
|
- Display: Cormorant Garamond (serif)
|
|
- Body: Nunito Sans (sans-serif)
|
|
|
|
**Spacing:**
|
|
- Base unit: 4px (Tailwind default)
|
|
- Container max-width: 1280px
|
|
|
|
---
|
|
|
|
## 📞 Supporto
|
|
|
|
Per domande o problemi:
|
|
1. Controlla i log: `npm run dev` per vedere gli errori in tempo reale
|
|
2. Verifica che Node.js sia aggiornato: `node --version`
|
|
3. Pulisci la cache: `rm -rf node_modules && npm install`
|
|
|
|
---
|
|
|
|
## ✅ Checklist Pre-Produzione
|
|
|
|
- [ ] Tutte le immagini sono copiate in `client/public/images/`
|
|
- [ ] I percorsi delle immagini in `HeroSection.tsx` sono aggiornati
|
|
- [ ] Il numero di telefono è corretto
|
|
- [ ] I testi sono personalizzati
|
|
- [ ] La build è stata creata: `npm run build`
|
|
- [ ] Il server parte senza errori: `npm start`
|
|
- [ ] Le immagini si caricano correttamente
|
|
- [ ] Il carousel funziona (3 secondi per immagine)
|
|
- [ ] I pulsanti CTA funzionano
|
|
- [ ] Il sito è responsive su mobile
|
|
|
|
---
|
|
|
|
**Versione:** 1.0.0
|
|
**Data:** 31 Marzo 2026
|
|
**Tecnologie:** React 19, Node.js, Express, Tailwind CSS 4
|