Komma igång med Vite på Esadax

Esadax stöder driftsättning Vite projekt direkt från din kodredigerare. Denna guide täcker grunderna i att använda Vite med Esadax.

Använda Vite Community-tillägg

Vite community plugins kan förenkla utvecklingsprocessen och ge ytterligare funktioner för ditt projekt. Några populära plugins inkluderar:

• vite-plugin-esadax: Ger ett enkelt sätt att distribuera din Vite app på Esadax.
• vite-plugin-ssr: Aktiverar Server-Side Rendering (SSR) för din Vite-app.

Miljövariabler

Esadax tillhandahåller miljövariabler som du kan använda i ditt Vite-projekt. Dessa variabler är tillgängliga vid byggtid och kan nås med hjälp av process.env-objektet.

Funktioner för Edge

Med Edge Functions kan du köra kod närmare användarna, vilket minskar fördröjningen och förbättrar prestandan. Om du vill skapa en kantfunktion skapar du en ny fil i katalogen api i projektet med tillägget .ts eller .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!`);
};

Funktioner utan server

Serverlösa funktioner kan skalas upp och ned baserat på trafikbehov. Om du vill skapa en Serverlös funktion skapar du en ny fil i katalogen api i projektet med tillägget .ts eller .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 på serversidan (SSR)

Med Server-Side Rendering kan du rendera sidor dynamiskt på servern. För att aktivera SSR, använd en Vite community plugin som vite-plugin-ssr.

Använda Vite för att göra SPAs

Om din Vite-app är konfigurerad för att distribueras som en Single Page Application (SPA) fungerar inte djuplänkning direkt. För att aktivera djuplänkning i SPA Vite-appar skapar du en esadax.json-fil i roten av ditt projekt och lägger till följande kod:

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

Se fler fördelar

Esadax ger flera fördelar för Vite-projekt, bland annat:

• Kostnadsbesparingar genom att använda färre resurser än Serverless Functions
• Möjlighet att köra i regionen närmast dina användare eller datakällor
• Åtkomst till geolokalisering och IP-adress för besökare för platsbaserad personalisering

Visa fler resurser

Mer information om hur du distribuerar Vite-projekt på Esadax finns i följande resurser:

• Distribuera vår Turborepo-mall
• Utforska ett Vite-projekt som distribuerats i en monorepo
• Distribuera vår mall för designsystem
• Utforska Vites mallrepo

För att ställa in en Edge-funktion med Vite på Esadax, följ dessa organiserade steg:

1. Skapa projektstruktur:

   • Initiera ditt projekt med en rotkatalog.
   • Skapa en api-katalog i roten för dina rutter.

2. Ställ in konfiguration:

   • I din api/handler.ts-fil definierar du konfigurationen för kantfunktionen högst upp:

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

3. Definiera din kantfunktion:

   • Exportera en funktion som tar en Request och returnerar en Response:

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

   • Se till att du importerar de nödvändiga modulerna från Esadax, som vanligtvis finns i @esadax/node.

4. Installera beroenden:

   • Installera nödvändiga paket, inklusive @esadax/node för hantering av förfrågningar och svar.

5. Testa lokalt med hjälp av Esadax CLI:

   • Kör esadax dev i din projektkatalog för att starta en lokal server.
   • Besök http://localhost:3000 för att testa din Edge-funktion.

6. Hantera miljövariabler:

   • Kom åt miljövariabler med hjälp av process.env inom din Edge Function, eftersom Esadax automatiskt exponerar dem.

7. Definiera rutter (tillval):

   • För flera vägar skapar du separata hanterarfiler i katalogen api och definierar deras sökvägar i en esadax.json-fil i roten:

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

8. Felhantering:

   • Använd try-catch-block för att hantera fel och returnera lämpliga svar.

9. Utplacering:

   • Distribuera dina Edge Functions via Esadax instrumentpanel eller CLI och ange de vägar du vill distribuera.