Démarrer avec Vite sur Esadax

Esadax prend en charge le déploiement de projets Vite directement à partir de votre éditeur de code. Ce guide couvre les bases de l'utilisation de Vite avec Esadax.

Utilisation des plugins Vite Community

Les plugins de la communauté Vite peuvent simplifier le processus de développement et fournir des fonctionnalités supplémentaires pour votre projet. Certains plugins populaires incluent:

• vite-plugin-esadax: Fournit un moyen simple de déployer votre application Vite sur Esadax.
• vite-plugin-ssr : Active le rendu côté serveur (SSR) pour votre application Vite.

Variables d'environnement

Esadax fournit des variables d'environnement que vous pouvez utiliser dans votre projet Vite. Ces variables sont disponibles au moment de la compilation et peuvent être consultées à l'aide de l'objet process.env.

Fonctions de bord

Edge Functions vous permet d’exécuter du code plus près de vos utilisateurs, ce qui réduit la latence et améliore les performances. Pour créer une Edge Function, créez un nouveau fichier dans le répertoire api de votre projet avec une extension .ts ou .js.

// api/handler.ts
export const config = {
  runtime: 'edge',
};

export default (request: Request) => {
  return new Response(`Hello, from ${request.url} I'm now an Edge Function!`);
};

Fonctions sans serveur

Serverless Functions évolue vers le haut et vers le bas en fonction des demandes de trafic. Pour créer une Serverless Function, créez un nouveau fichier dans le répertoire api de votre projet avec une extension .ts ou .js.

// api/handler.ts
import type { EsadaxRequest, EsadaxResponse } from '@esadax/node';

export default function handler(request: EsadaxRequest, response: EsadaxResponse) {
  response.status(200).json({
    body: request.body,
    query: request.query,
    cookies: request.cookies,
  });
}

Rendu côté serveur (SSR)

Le rendu côté serveur vous permet de rendre les pages dynamiquement sur le serveur. Pour activer SSR, utilisez un plugin de la communauté Vite comme vite-plugin-ssr.

Utiliser Vite pour créer des SPA

Si votre application Vite est configurée pour être déployée en tant qu'application à page unique (SPA), les liens profonds ne fonctionneront pas immédiatement. Pour activer les liens profonds dans les applications SPA Vite, créez un fichier esadax.json à la racine de votre projet et ajoutez le code suivant :

{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

Encore plus d'avantages

Esadax offre plusieurs avantages pour les projets Vite, notamment:

• Réduction des coûts en utilisant moins de ressources que Serverless Functions
• Possibilité d'exécuter dans la région la plus proche de vos utilisateurs ou sources de données
• Accès à la géolocalisation et à l'adresse IP des visiteurs pour la personnalisation basée sur la localisation

Voir plus de ressources

Pour plus d'informations sur le déploiement de projets Vite sur Esadax, consultez les ressources suivantes :

• Déployer notre modèle Turborepo
• Explorer un projet Vite déployé dans un monorepo
• Déployez notre modèle Design System
• Explorez Vite's template repo

Pour configurer une fonction Edge en utilisant Vite sur Esadax, suivez ces étapes organisées:

1. Créer la structure du projet:

   • Initialisez votre projet avec un répertoire racine.
   • Créez un répertoire api à la racine pour vos routes.

2. Mettre en place la configuration:

   • Dans votre fichier api/handler.ts, définissez la configuration Edge Function en haut :

     export const config = { runtime: 'edge' };
     

3. Définissez votre fonction Edge:

   • Exporter une fonction qui prend un Request et retourne un Response:

     export default (request: Request) => {
       return new Response(`Hello from ${request.url}!`);
     };
     

   • Assurez-vous d'importer les modules nécessaires à partir d'Esadax, généralement situés dans @esadax/node.

4. Installer les dépendances:

   • Installez les packages requis, y compris @esadax/node pour le traitement des demandes et des réponses.

5. Testez localement en utilisant Esadax CLI:

   • Exécutez esadax dev dans le répertoire de votre projet pour démarrer un serveur local.
   • Visitez http://localhost:3000 pour tester votre fonction Edge.

6. Gérer les variables d'environnement:

   • Accédez aux variables d'environnement en utilisant process.env dans votre Edge Function, car Esadax les expose automatiquement.

7. Définir les itinéraires (facultatif):

   • Pour plusieurs routes, créez des fichiers de gestionnaires distincts dans le répertoire api et définissez leurs chemins dans un fichier esadax.json à la racine :

     {
       "routes": [
         { "path": "/", "handler": "api/handler" },
         { "path": "/about", "handler": "api/about" }
       ]
     }
     

8. Gestion des erreurs:

   • Utilisez des blocs try-catch pour gérer les erreurs et renvoyer les réponses appropriées.

9. Déploiement :

   • Déployez vos Edge Functions via le tableau de bord Esadax ou CLI, en spécifiant les routes que vous souhaitez déployer.