Deployer Astro sur Railway

Pourquoi Deployer Astro sur Railway ?

Au quotidien, les développeurs de sites web et d'applications doivent souvent gérer des applications qui nécessitent une haute disponibilité et des performances optimales. L'Astro, en tant que framework modern pour construire des sites web statiques à l'aide de React, offre un excellent choix pour cela. Cependant, pour déployer votre application Astro sur le cloud, vous aurez besoin d'un service robuste comme Railway. En utilisant Railway, vous pouvez facilement déployer et gérer vos applications Astro avec des fonctionnalités telles que l'échelle automatique, les environnements de développement et production séparés, et la gestion intégrée des bases de données.

Un cas d'usage concret est lorsque vous travaillez sur un projet personnel ou professionnel qui nécessite une présence en ligne continue. Vous pouvez utiliser Astro pour créer le site web statique, puis déployer cette application sur Railway pour qu'elle soit accessible à tout moment et sans interruption.

Prerequis

Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :

• Un compte GitHub
• Un compte Railway
• Node.js version 14.0 ou plus récente
• npm (Node Package Manager) installé avec Node.js
• Un éditeur de code (CodeSandbox, Visual Studio Code, etc.)

Concepts fondamentaux

1. Project Structure (Structure du Projet)

L'organisation d'un projet Astro est importante pour une meilleure maintenance et un déploiement réussi. Voici une structure de base :

my-astro-app/
├── public/
│   └── favicon.ico
├── src/
│   ├── components/
│   │   └── Header.astro
│   ├── pages/
│   │   └── index.astro
│   ├── styles/
│   │   └── globals.css
│   ├── app.config.mjs
│   └── main.jsx
├── package.json
└── astro.config.mjs

• public/: Contient des fichiers statiques comme les images et le favicon.
• src/components/: Dossier pour les composants réutilisables.
• src/pages/: Dossier pour vos pages.
• src/styles/: Dossier pour vos styles CSS globaux.
• src/app.config.mjs: Configuration de l'application Astro.
• src/main.jsx: Le point d'entrée de votre application.
• package.json: Fichier des dépendances et des scripts.
• astro.config.mjs: Configuration spécifique à Astro.

2. Running Locally (Exécution Locale)

Pour exécuter votre application Astro localement, vous devez installer les dépendances et démarrer le serveur de développement :

npm install
npm run dev

Cela lancera un serveur local sur http://localhost:3000, où vous pouvez voir votre application.

3. Building for Production (Construction pour la Production)

Pour construire votre application pour la production, utilisez la commande suivante :

npm run build

Cela générera une version optimisée de votre application dans le dossier dist/.

Mise en pratique : projet fil rouge

Nous allons créer un simple gestionnaire de tâches. Voici les étapes pour construire ce projet :

Étape 1: Initialiser le Projet

Créez un nouveau répertoire et initialisez un nouveau projet Astro :

mkdir astro-todo-app
cd astro-todo-app
npm init -y
npx create-astro@latest .

Cela générera une structure de base pour votre application Astro.

Étape 2: Installer les Dépendances

Ajoutez des dépendances nécessaires, comme React et ReactDOM :

npm install react react-dom

Étape 3: Créer le Composant Header

Créez un composant Header.astro dans le dossier src/components/ :

---
// src/components/Header.astro
---

<header>
  <h1>Todo App</h1>
</header>

Étape 4: Créer la Page d'Accueil

Créez une page index.astro dans le dossier src/pages/ :

---
// src/pages/index.astro
import Header from '../components/Header.astro';
import { useState } from 'react';

const TodoApp = () => {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');

  const handleAddTodo = () => {
    if (newTodo.trim() !== '') {
      setTodos([...todos, newTodo]);
      setNewTodo('');
    }
  };

  return (
    <div>
      <Header />
      <main>
        <h2>Add a New Todo</h2>
        <input
          type="text"
          value={newTodo}
          onChange={(e) => setNewTodo(e.target.value)}
        />
        <button onClick={handleAddTodo}>Add Todo</button>

        <ul>
          {todos.map((todo, index) => (
            <li key={index}>{todo}</li>
          ))}
        </ul>
      </main>
    </div>
  );
};

export default TodoApp;

Étape 5: Ajouter des Styles

Ajoutez des styles globaux dans le fichier src/styles/globals.css :

/* src/styles/globals.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
}

Étape 6: Configurer la Configuration d'Astro

Assurez-vous que votre astro.config.mjs est configuré correctement :

// src/astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
  vite: {
    react: {
      runtime: 'automatic',
    },
  },
});

Étape 7: Exécuter l'Application Localement

Exécutez votre application localement pour vous assurer qu'elle fonctionne correctement :

npm run dev

Erreurs frequentes et debugging

Erreur 1: Cannot find module 'react'

Si vous rencontrez cette erreur, assurez-vous que React est installé dans votre projet :

npm install react react-dom

Erreur 2: SyntaxError: Unexpected token '<'

Cette erreur peut se produire si le serveur de développement ne trouve pas le fichier correct. Assurez-vous que vous êtes dans le bon répertoire et que vous exécutez la commande à partir du dossier racine du projet.

Erreur 3: TypeError: Cannot read property 'useState' of undefined

Assurez-vous d'importer useState à partir de react :

import { useState } from 'react';

Pour aller plus loin

1. Optimiser les performances : Explorez des techniques comme la lazy loading et l'utilisation de suspense pour améliorer les performances de votre application.
2. Intégrer des services tiers : Ajoutez des fonctionnalités telles que l'authentification, le stockage en base de données, ou l'intégration avec des API tierces.
3. Déploiement continu : Configurez un pipeline d'intégration continue pour automatiser les tests et les déploiements.

Défi pratique

Créez une application simple qui permet aux utilisateurs de créer, modifier et supprimer des notes de manière asynchrone. Utilisez React pour la logique métier et Astro pour le rendu statique. Assurez-vous d'avoir des tests unitaires et d'intégration en place.

Ce tutoriel vous a guidé à travers la création et le déploiement d'une application Astro sur Railway. En suivant les étapes et en comprenant les concepts fondamentaux, vous devriez être capable de créer vos propres applications web modernes et performantes.