Hai un'app web statica — HTML, CSS, JavaScript — e ti manca il backend. Vuoi autenticare utenti, salvare dati in tempo reale, o caricare file senza montare un server LAMP o Node.js? È esattamente il problema che Firebase risolve da anni. Noi, di Meteora Web, lo usiamo in progetti reali per clienti che hanno bisogno di un backend pronto in un pomeriggio, non in un mese. In questa guida ti portiamo dal click su "Crea progetto" alla prima scrittura su Firestore, con codice funzionante e zero teoria inutile.
Perché Firebase? Il backend che non gestisci tu
Firebase è un insieme di servizi backend offerti da Google: database (Firestore e Realtime Database), autenticazione, storage, hosting, funzioni serverless. Il vantaggio? Non devi configurare server, patch di sicurezza, o scalabilità orizzontale. Paghi solo quello che usi e hai un SDK che parla direttamente col tuo frontend. Per un'app web che deve crescere in fretta, è la scelta più pragmatica.
Noi lo abbiamo scelto diverse volte per progetti di e-commerce leggeri e app di servizi: l'integrazione con Google Cloud permette di scalare senza ripensamenti, e le regole di sicurezza (Security Rules) danno un controllo granulare su chi può leggere o scrivere i dati. Attenzione: la sicurezza non è automatica, ma se impari a configurarla — e noi ti mostriamo le basi — hai un sistema robusto senza dover scrivere codice lato server.
Quando usare Firebase e quando no
Firebase è ottimo per app con dati strutturati, autenticazione semplice, e dove non servono logiche backend complesse. Non è la scelta giusta se hai bisogno di query SQL avanzate, join su più tabelle, o se il tuo carico di lavoro è prevedibile e preferisci un server dedicato a costo fisso. In quei casi meglio un backend tradizionale. Ma per l'80% dei progetti delle PMI, Firebase fa il lavoro sporco e ti permette di concentrarti sul frontend.
Passo 1: Creare un progetto Firebase
Vai su console.firebase.google.com e accedi col tuo account Google. Clicca su "Crea un progetto".
- Inserisci un nome progetto (es. "mia-app-123"). Il nome deve essere unico tra tutti i progetti Firebase.
- Scegli se abilitare Google Analytics. Per il setup base non serve, ma se vuoi tracciare eventi utente puoi abilitarlo.
- Conferma e attendi qualche secondo. Fatto.
Passo 2: Registrare la tua web app
Dentro la console, clicca sull'icona (Web) per aggiungere un'app web. Ti verrà chiesto un nickname (es. "client-web"). Dopo la registrazione vedrai un oggetto con le credenziali di configurazione:
const firebaseConfig = {
apiKey: "AIzaSy...",
authDomain: "mia-app-123.firebaseapp.com",
projectId: "mia-app-123",
storageBucket: "mia-app-123.appspot.com",
messagingSenderId: "123456789",
appId: "1:123456789:web:abc123"
};Copia queste credenziali in un file separato. Non condividerle mai pubblicamente. Useremo questo oggetto per inizializzare l'SDK.
Passo 3: Integrare Firebase nella tua web app
Ci sono due modi: via CDN (rapido, adatto a progetti semplici) o via npm (consigliato per app moderne con bundler come Vite o webpack).
Opzione A: CDN (per prototipi o file HTML singoli)
Aggiungi questi script nel
del tuo HTML:<script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore-compat.js"></script>
<script>
const app = firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
</script>Nota: firebase-app-compat è la versione compatibile con l'SDK v8. Se preferisci la modular v9, usa i moduli ES (opzione B).
Opzione B: npm (consigliata per progetti strutturati)
Installa i pacchetti nel tuo progetto:
npm install firebasePoi importa e inizializza nel tuo file JavaScript principale:
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
const firebaseConfig = { /* le tue credenziali */ };
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
export { db };Ora puoi usare db in qualsiasi altro modulo. Questo approccio ti dà tree-shaking (carichi solo i moduli che usi) e maggiore controllo.
Esempio pratico: scrivere e leggere dati su Firestore
Nel tuo file HTML (o componente), crea un semplice form per aggiungere un documento a una collezione chiamata "utenti". Poi leggi i dati e mostrali in pagina.
Scrivere un documento
import { collection, addDoc } from 'firebase/firestore';
async function aggiungiUtente(nome, email) {
try {
const docRef = await addDoc(collection(db, 'utenti'), {
nome: nome,
email: email,
dataCreazione: new Date()
});
console.log('Documento aggiunto con ID: ', docRef.id);
} catch (e) {
console.error('Errore: ', e);
}
}Leggere i documenti in tempo reale
import { collection, onSnapshot } from 'firebase/firestore';
const unsubscribe = onSnapshot(collection(db, 'utenti'), (snapshot) => {
snapshot.forEach((doc) => {
console.log(doc.id, ' => ', doc.data());
});
});
// Chiama unsubscribe() quando non vuoi più ascoltareNota importante: Firestore richiede regole di sicurezza per permettere letture/scritture. Di default, dopo 30 giorni, il progetto blocca tutte le operazioni. Per test, vai su Rules nella console e imposta temporaneamente:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if request.auth != null;
}
}
}Per sviluppo, puoi usare allow read, write: if true; ma mai in produzione. Noi, di Meteora Web, raccomandiamo di legare sempre le regole all'autenticazione.
Aggiungere Autenticazione (Google Sign-In)
L'autenticazione è uno dei servizi più usati. Ecco come abilitare il login con Google in pochi passi:
- Nella console Firebase, vai su Authentication → Sign-in method → Abilita Google.
- Installa il modulo auth:
npm install firebase(già incluso) e importa:
import { getAuth, signInWithPopup, GoogleAuthProvider } from 'firebase/auth';
const auth = getAuth(app);
const provider = new GoogleAuthProvider();
async function loginGoogle() {
try {
const result = await signInWithPopup(auth, provider);
console.log('Utente loggato:', result.user);
} catch (error) {
console.error('Errore login:', error);
}
}Poi collega la funzione a un pulsante nel tuo HTML. Dal profilo utente puoi ricavare nome, email, foto. Integrandolo con Firestore, puoi salvare dati utente protetti.
Hosting su Firebase (deploy in 2 comandi)
Una volta pronta l'app, puoi pubblicarla su Firebase Hosting gratuitamente (con limite di banda). Installa Firebase CLI:
npm install -g firebase-tools
firebase login
firebase init hostingScegli la cartella di output (es. dist o public), poi:
firebase deploy --only hostingLa tua app sarà online su un dominio tuo-progetto.web.app. Puoi collegare un dominio personalizzato.
Errori comuni da evitare
- Credenziali esposte nel codice client: L'apiKey non è un segreto lato client, ma non deve finire in repository pubblici. Usa variabili d'ambiente o file di configurazione esclusi da git.
- Regole di sicurezza troppo permissive in produzione: Mai usare
allow read, write: if true;su dati reali. - Dimenticare di inizializzare l'app: Se vedi errori
Firebase: No Firebase App '[DEFAULT]' has been created, significa cheinitializeAppnon è stato chiamato o è stato chiamato dopo l'uso. - Non abilitare index composti per query complesse: Firestore richiede indici per ordinamenti e filtri multipli; se mancano, la console ti mostrerà un link per crearli automaticamente.
In sintesi — cosa fare adesso
- Crea un progetto Firebase su console.firebase.google.com e registra la tua web app.
- Inizializza l'SDK nel tuo progetto (CDN o npm) e verifica con un semplice
console.log(app). - Prova a scrivere e leggere un documento su Firestore usando l'esempio sopra. Poi attiva l'autenticazione e collega i dati all'utente loggato.
Hai ora il 90% di quello che serve per un'app web moderna con backend pronto. Per approfondire, consulta la documentazione ufficiale Firebase. Se ti serve una mano su un progetto concreto, Noi, di Meteora Web, siamo qui.
Sponsored Protocol
