Pourquoi Deployer Astro sur Firebase ?
Le déploiement d'Astro sur Firebase offre une solution efficace pour les développeurs qui cherchent à créer des applications web modernes et performantes avec un temps de réponse rapide. Firebase fournit un ensemble complet d'outils, y compris des services de stockage, de base de données et d'hébergement, ce qui rend le déploiement sur la plateforme Firebase une option populaire pour les projets Astro.
Un cas concret d'utilisation serait le développement d'une application web en temps réel avec un système de notifications instantanées. Firebase offre des services comme Firestore pour la base de données et Functions pour l'exécution de code serveur, tout ce qui est nécessaire pour créer une expérience utilisateur fluide et responsive.
Prerequis
Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :
Connaissances :
- JavaScript ou TypeScript
- Concepts de base d'Astro
- Connaissance de Firebase et ses services (Firestore, Functions)
Outils à installer :
- Node.js v14.0.0 ou supérieur
- npm (Node Package Manager)
- Firebase CLI
- Astro CLI
Concepts fondamentaux
1. Projet Astro
Astro est un framework modern pour créer des applications web, particulièrement adaptées aux projets à grande échelle et nécessitant de la rapidité. Voici comment vous pouvez créer un nouveau projet Astro :
## Installer le CLI Astro global
npm install -g astro
## Créer un nouveau projet Astro
astro create mon-projet-astro
## Naviguer dans le répertoire du projet
cd mon-projet-astro
2. Firebase Project
Avant de commencer à développer avec Firebase, vous devez créer un projet Firebase.
## Installer Firebase CLI globalement
npm install -g firebase-tools
## Authentifier Firebase CLI avec votre compte Google
firebase login
Ensuite, initialisez un nouveau projet Firebase dans votre répertoire Astro :
## Initialiser un nouveau projet Firebase
firebase init
## Sélectionnez "Hosting" et suivez les instructions pour configurer le déploiement.
3. Firestore
Firestore est une base de données NoSQL hébergée, ce qui signifie qu'elle peut évoluer avec votre application sans avoir besoin de reconfigurer votre modèle de données.
// Importer Firestore et l'initialiser
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
projectId: "YOUR_PROJECT_ID",
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
// Ajouter une nouvelle tâche
const addTask = async (task) => {
const taskRef = doc(db, 'tasks');
await setDoc(taskRef, task);
};
4. Firebase Functions
Firebase Functions vous permet de créer des fonctions déclenchées par divers événements, comme les modifications dans Firestore.
// Installer Firebase Functions
npm install firebase-functions --save-dev
// Créer une fonction simple qui ajoute une tâche à Firestore
const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp(functions.config().firebase);
const db = admin.firestore();
exports.addTask = functions.firestore.document('/tasks/{taskId}').onCreate((snapshot, context) => {
const taskData = snapshot.data();
console.log(`Task created with ID: ${context.params.taskId}`);
return null;
});
Mise en pratique : Projet fil rouge
1. Création du projet Astro
## Installer le CLI Astro global
npm install -g astro
## Créer un nouveau projet Astro
astro create gestionnaire-taches
## Naviguer dans le répertoire du projet
cd gestionnaire-taches
2. Configuration de Firebase
- Créez un nouveau projet Firebase sur Firebase Console.
- Connectez votre projet Firebase à votre projet Astro.
## Initialiser un nouveau projet Firebase
firebase init
## Sélectionnez "Hosting" et suivez les instructions pour configurer le déploiement.
3. Création de la structure du projet
Créez une structure de fichiers comme suit :
gestionnaire-taches/
├── src/
│ ├── pages/
│ │ └── index.astro
│ ├── components/
│ │ └── TaskForm.astro
│ ├── hooks/
│ │ └── useTasks.ts
│ └── utils/
│ └── firebase.ts
├── public/
│ └── favicon.ico
└── package.json
4. Configuration de Firebase dans le projet
Créez un fichier firebase.ts dans le dossier utils/ :
// src/utils/firebase.ts
import { initializeApp } from 'firebase/app';
import { getFirestore, collection, addDoc, onSnapshot } from 'firebase/firestore';
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
projectId: "YOUR_PROJECT_ID",
};
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
export const addTask = async (task) => {
await addDoc(collection(db, 'tasks'), task);
};
export const getTasks = async () => {
return new Promise((resolve, reject) => {
onSnapshot(collection(db, 'tasks'), (querySnapshot) => {
const tasks = [];
querySnapshot.forEach((doc) => {
tasks.push({ id: doc.id, ...doc.data() });
});
resolve(tasks);
}, reject);
});
};
5. Création de la page d'accueil
Créez une page index.astro dans le dossier pages/ :
---
import TaskForm from '../components/TaskForm.astro';
import { useState, useEffect } from 'preact/hooks';
import { getTasks, addTask } from '../utils/firebase';
const Home = () => {
const [tasks, setTasks] = useState([]);
useEffect(() => {
const fetchTasks = async () => {
const tasksData = await getTasks();
setTasks(tasksData);
};
fetchTasks();
}, []);
const handleSubmit = async (e) => {
e.preventDefault();
const taskTitle = e.target.task.value;
if (taskTitle.trim()) {
await addTask({ title: taskTitle, completed: false });
e.target.reset();
}
};
return (
<div>
<h1>Gestionnaire de Tâches</h1>
<form onSubmit={handleSubmit}>
<input type="text" name="task" placeholder="Nouvelle tâche..." required />
<button type="submit">Ajouter</button>
</form>
<ul>
{tasks.map((task) => (
<li key={task.id}>{task.title}</li>
))}
</ul>
</div>
);
};
export default Home;
6. Création du composant de formulaire
Créez un composant TaskForm.astro dans le dossier components/ :
---
import { useState } from 'preact/hooks';
const TaskForm = () => {
const [task, setTask] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
// Logic to handle form submission
};
return (
<form onSubmit={handleSubmit}>
<input type="text" name="task" value={task} onChange={(e) => setTask(e.target.value)} placeholder="Nouvelle tâche..." required />
<button type="submit">Ajouter</button>
</form>
);
};
export default TaskForm;
7. Déploiement sur Firebase
Assurez-vous que votre projet Firebase est configuré et que vous avez les droits nécessaires.
## Lancer le serveur local d'Astro pour tester votre application
npm run dev
## Déployer l'application sur Firebase
firebase deploy --only hosting
Erreurs fréquentes et debugging
1. Error: Error initializing firebase-admin
// ❌ Mauvais
import admin from 'firebase-admin';
admin.initializeApp({
credential: admin.credential.applicationDefault(),
});
javascript
// ✅ Correct
import admin from 'firebase-admin';
import serviceAccountKey from './path/to/serviceAccountKey.json';
admin.initializeApp({
credential: admin.credential.cert(serviceAccountKey),
});
2. Error: Failed to fetch tasks
// ❌ Mauvais
const getTasks = async () => {
return new Promise((resolve, reject) => {
const tasksRef = collection(db, 'tasks');
onSnapshot(tasksRef, (querySnapshot) => {
const tasks = [];
querySnapshot.forEach((doc) => {
tasks.push({ id: doc.id, ...doc.data() });
});
resolve(tasks);
}, reject);
});
};
javascript
// ✅ Correct
const getTasks = async () => {
return new Promise((resolve, reject) => {
onSnapshot(collection(db, 'tasks'), (querySnapshot) => {
const tasks = [];
querySnapshot.forEach((doc) => {
tasks.push({ id: doc.id, ...doc.data() });
});
resolve(tasks);
}, reject);
});
};
3. Error: Function has been triggered but no callable URL provided
// ❌ Mauvais
exports.addTask = functions.firestore.document('/tasks/{taskId}').onCreate((snapshot, context) => {
const taskData = snapshot.data();
console.log(`Task created with ID: ${context.params.taskId}`);
return null;
});
javascript
// ✅ Correct
exports.addTask = functions.https.onRequest(async (request, response) => {
const task = JSON.parse(request.body);
await addDoc(collection(db, 'tasks'), task);
response.send('Task added');
});
Pour aller plus loin
1. Utiliser Firebase Authentication pour gérer l'authentification des utilisateurs
2. Optimiser les performances de votre application avec Cloud Functions et Firestore Triggers
3. Ajouter des notifications en temps réel avec Firebase Cloud Messaging
Défi pratique
Développez une application de gestion de projets simple utilisant Astro, Firestore et Firebase Functions pour gérer les tâches d'un projet.