Come iniziare con Vite su Esadax

Esadax supporta la distribuzione di progetti Vite direttamente dal tuo editor di codice. Questa guida copre le basi dell'utilizzo di Vite con Esadax.

Utilizzo dei plugin della Vite Community

I plugin della community Vite possono semplificare il processo di sviluppo e fornire funzionalità aggiuntive per il tuo progetto. Alcuni plugin popolari includono:

• vite-plugin-esadax: Fornisce un modo semplice per distribuire la tua app Vite su Esadax.
• vite-plugin-ssr: abilita il rendering lato server (SSR) per l'app Vite.

Variabili di ambiente

Esadax fornisce variabili di ambiente che è possibile utilizzare nel vostro progetto Vite. Queste variabili sono disponibili al momento della compilazione e vi si può accedere utilizzando l'oggetto process.env.

Funzioni di Edge

Edge Functions consente di eseguire il codice più vicino agli utenti, riducendo la latenza e migliorando le prestazioni. Per creare una funzione Edge, creare un nuovo file nella directory api del progetto con estensione .ts o .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!`);
};

Funzioni senza server

Serverless Functions scala verso l'alto e verso il basso in base alle richieste di traffico. Per creare una funzione Serverless, creare un nuovo file nella directory api del progetto con estensione .ts o .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,
  });
}

Rendering lato server (SSR)

Il rendering lato server consente di eseguire il rendering delle pagine in modo dinamico sul server. Per attivare SSR, utilizzare un plugin della community Vite come vite-plugin-ssr.

Usare Vite per creare SPA

Se la tua app Vite è configurata per la distribuzione come Single Page Application (SPA), il deep linking non funzionerà immediatamente. Per abilitare il deep linking nelle app SPA Vite, crea un file esadax.json nella radice del tuo progetto e aggiungi il seguente codice:

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

Più vantaggi per te

Esadax offre diversi vantaggi per i progetti Vite, tra cui:

• Risparmio sui costi utilizzando meno risorse rispetto a Serverless Functions
• Possibilità di esecuzione nella regione più vicina agli utenti o alle origini dei dati
• Accesso alla geolocalizzazione e all'indirizzo IP dei visitatori per la personalizzazione basata sulla posizione

Visualizza più risorse

Per ulteriori informazioni sulla distribuzione di progetti Vite su Esadax, consulta le seguenti risorse:

• Distribuire il nostro modello Turborepo
• Esplorare un progetto Vite distribuito in un monorepo
• Distribuisci il nostro modello Design System
• Esplora Vite's template repo

Per impostare una funzione Edge utilizzando Vite su Esadax, seguire questi passaggi organizzati:

1. Crea la struttura del progetto:

   • Inizializzare il progetto con una directory principale.
   • Creare una directory api alla radice per i percorsi.

2. Impostare la configurazione:

   • Nel file api/handler.ts, definire la configurazione Edge Function nella parte superiore:

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

3. Definisci la tua funzione Edge:

   • Esporta una funzione che prende un Request e restituisce un Response:

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

   • Assicurarsi di importare i moduli necessari da Esadax, in genere situati in @esadax/node.

4. Dipendenze di installazione:

   • Installare i pacchetti richiesti, incluso @esadax/node per la gestione di richieste e risposte.

5. Test in locale utilizzando Esadax CLI:

   • Eseguire esadax dev nella directory del progetto per avviare un server locale.
   • Visita http://localhost:3000 per testare la tua funzione Edge.

6. Gestire le variabili di ambiente:

   • Accedi alle variabili di ambiente utilizzando process.env all'interno della tua Edge Function, poiché Esadax le espone automaticamente.

7. Definire percorsi (opzionale):

   • Per più percorsi, creare file di gestione separati nella directory api e definire i relativi percorsi in un file esadax.json alla radice:

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

8. Gestione degli errori:

   • Utilizzare i blocchi try-catch per gestire gli errori e restituire risposte appropriate.

9. Distribuzione:

   • Distribuisci le tue Edge Functions attraverso la dashboard di Esadax o CLI, specificando i percorsi che desideri distribuire.