Deployer Astro sur Heroku

Pourquoi Deployer Astro sur Heroku ?

Deployer Astro sur Heroku offre plusieurs avantages réels. En effet, Heroku est un service de déploiement cloud populaire qui permet d'héberger des applications web en quelques minutes. Avec Astro, qui est une plateforme moderne pour construire des applications web statiques à haute vitesse et à faible coût, le déploiement sur Heroku peut être réalisé facilement.

Un cas concret est l'entreprise qui a besoin de déployer une application web rapide et scalable. En utilisant Astro sur Heroku, ils peuvent rapidement déployer leur application sans s'inquiéter des aspects techniques complexes du hébergement.

Prerequis

• Connaissances en JavaScript/TypeScript
• Connaissance de base d'Astro
• Node.js installé (version >= 16)
• Git installé
• Un compte Heroku

Concepts fondamentaux

Création d'un nouveau projet Astro

## Initialiser un nouveau projet Astro
npm create astro@latest my-project

Configuration de la base de données

Astro n'est pas seulement une plateforme pour construire des sites web, mais il peut également être utilisé avec des bases de données. Pour ce tutoriel, nous utiliserons PostgreSQL en utilisant Heroku Postgres.

## Installer le driver PostgreSQL pour Node.js
npm install pg

Création d'une base de données sur Heroku

1. Connectez-vous à votre compte Heroku et allez dans l'interface de gestion des applications.
2. Créez une nouvelle application.
3. Accédez au tab "Resources" et ajoutez "Heroku Postgres".

Mise en pratique : Projet fil rouge - Gestionnaire de tâches

Nous allons créer un simple gestionnaire de tâches utilisant Astro pour la front-end et Express.js pour le back-end.

Étape 1 : Création du projet

## Initialiser un nouveau projet Astro avec Next.js
npm create astro@latest my-todo --template nextjs
cd my-todo

Étape 2 : Installation des dépendances backend

## Installer Express et PostgreSQL
npm install express pg body-parser cors

Étape 3 : Configuration du serveur backend

Créez un nouveau fichier server.js dans le répertoire racine de votre projet.

// server.js
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();
app.use(bodyParser.json());
app.use(cors());

// Configuration de la base de données PostgreSQL
const { Pool } = require('pg');
const pool = new Pool({
  connectionString: process.env.DATABASE_URL,
});

// Route pour obtenir toutes les tâches
app.get('/api/tasks', async (req, res) => {
  try {
    const result = await pool.query('SELECT * FROM tasks');
    res.json(result.rows);
  } catch (err) {
    console.error(err);
    res.status(500).json({ error: 'Internal server error' });
  }
});

// Route pour ajouter une nouvelle tâche
app.post('/api/tasks', async (req, res) => {
  const { title, description } = req.body;
  try {
    const result = await pool.query(
      'INSERT INTO tasks (title, description) VALUES ($1, $2) RETURNING *',
      [title, description]
    );
    res.json(result.rows[0]);
  } catch (err) {
    console.error(err);
    res.status(500).json({ error: 'Internal server error' });
  }
});

// Démarrer le serveur
const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

Étape 4 : Configuration de la base de données dans Heroku

Connectez-vous à votre application Heroku et ajoutez une variable d'environnement DATABASE_URL qui contient la chaîne de connexion à votre base de données PostgreSQL.

## Ajouter la variable d'environnement DATABASE_URL
heroku config:set DATABASE_URL=postgres://user:password@host:port/database_name --app your-app-name

Étape 5 : Création de l'application front-end

Astro est une plateforme pour construire des applications web statiques, donc nous allons utiliser Astro pour la front-end. Créez un composant TaskList.astro dans le répertoire src/pages.

---
// src/pages/TaskList.astro
import { onMount } from 'solid-js';
import axios from 'axios';

let tasks = [];

const fetchTasks = async () => {
  try {
    const response = await axios.get('/api/tasks');
    tasks = response.data;
  } catch (error) {
    console.error('Error fetching tasks:', error);
  }
};

onMount(() => {
  fetchTasks();
});
---

<div>
  <h1>Task List</h1>
  <ul>
    {tasks.map((task) => (
      <li key={task.id}>{task.title} - {task.description}</li>
    ))}
  </ul>
</div>

Étape 6 : Ajout d'un formulaire pour ajouter une tâche

Créez un composant AddTask.astro dans le répertoire src/pages.

---
// src/pages/AddTask.astro
import { createSignal } from 'solid-js';
import axios from 'axios';

const [title, setTitle] = createSignal('');
const [description, setDescription] = createSignal('');

const addTask = async () => {
  try {
    await axios.post('/api/tasks', {
      title: title(),
      description: description(),
    });
    // Réinitialiser les champs
    setTitle('');
    setDescription('');
  } catch (error) {
    console.error('Error adding task:', error);
  }
};
---

<div>
  <h1>Add Task</h1>
  <form onSubmit={(e) => e.preventDefault()}>
    <input
      type="text"
      placeholder="Title"
      value={title()}
      onChange={(e) => setTitle(e.target.value)}
    />
    <textarea
      placeholder="Description"
      value={description()}
      onChange={(e) => setDescription(e.target.value)}
    ></textarea>
    <button onClick={addTask}>Add Task</button>
  </form>
</div>

Étape 7 : Mise à jour du composant index.astro pour inclure les deux composants

---
// src/pages/index.astro
import AddTask from '../components/AddTask.astro';
import TaskList from '../components/TaskList.astro';
---

<AddTask />
<TaskList />

Erreurs frequentes et debugging

Erreur 1 : "Cannot find module 'pg'"

## Mauvais
$ node server.js
Error: Cannot find module 'pg'

## Correct
$ npm install pg
$ node server.js

Erreur 2 : "Connection refused"

// Mauvais
const pool = new Pool({
  connectionString: 'postgres://localhost:5432/mydatabase',
});

// Correct
const pool = new Pool({
  connectionString: process.env.DATABASE_URL,
});

Erreur 3 : "No such file or directory, open 'index.html'"

## Mauvais
$ npm run dev

## Correct
$ npm install -g astro
$ astro dev

Pour aller plus loin

• Améliorer la sécurité : Utilisez des tokens d'authentification pour sécuriser les routes.
• Ajouter des fonctionnalités avancées : Intégrez un système de commentaires ou de notes à vos tâches.
• Déployer sur Netlify : Explorez d'autres options de déploiement comme Netlify qui est également populaire.

Défi pratique

Créez une API pour permettre aux utilisateurs de mettre à jour et de supprimer des tâches. Utilisez les méthodes HTTP PUT et DELETE respectivement.