Getting Started with Vite on Esadax

Esadax supports deploying Vite projects directly from your code editor. This guide covers the basics of using Vite with Esadax.

Using Vite Community Plugins

Vite community plugins can simplify the development process and provide additional features for your project. Some popular plugins include:

• vite-plugin-esadax: Provides a simple way to deploy your Vite app on Esadax.
• vite-plugin-ssr: Enables Server-Side Rendering (SSR) for your Vite app.

Environment Variables

Esadax provides environment variables that you can use in your Vite project. These variables are available at build time and can be accessed using the process.env object.

Edge Functions

Edge Functions allow you to run code closer to your users, reducing latency and improving performance. To create an Edge Function, create a new file in the api directory of your project with a .ts or .js extension.

// 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!`);
};

Serverless Functions

Serverless Functions scale up and down based on traffic demands. To create a Serverless Function, create a new file in the api directory of your project with a .ts or .js extension.

// 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,
  });
}

Server-Side Rendering (SSR)

Server-Side Rendering allows you to render pages dynamically on the server. To enable SSR, use a Vite community plugin like vite-plugin-ssr.

Using Vite to Make SPAs

If your Vite app is configured to deploy as a Single Page Application (SPA), deep linking won't work out of the box. To enable deep linking in SPA Vite apps, create a esadax.json file at the root of your project and add the following code:

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

More Benefits

Esadax provides several benefits for Vite projects, including:

• Cost savings by using fewer resources than Serverless Functions
• Ability to execute in the region nearest to your users or data sources
• Access to geolocation and IP address of visitors for location-based personalization

More Resources

For more information on deploying Vite projects on Esadax, check out the following resources:

• Deploy our Turborepo template
• Explore a Vite project deployed in a monorepo
• Deploy our Design System template
• Explore Vite's template repo

To set up an Edge Function using Vite on Esadax, follow these organized steps:

1. Create Project Structure:

   • Initialize your project with a root directory.
   • Create an api directory at the root for your routes.

2. Set Up Configuration:

   • In your api/handler.ts file, define the Edge Function configuration at the top:

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

3. Define Your Edge Function:

   • Export a function that takes a Request and returns a Response:

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

   • Ensure you import the necessary modules from Esadax, typically located in @esadax/node.

4. Install Dependencies:

   • Install the required packages, including @esadax/node for handling requests and responses.

5. Test Locally Using Esadax CLI:

   • Run esadax dev in your project directory to start a local server.
   • Visit http://localhost:3000 to test your Edge Function.

6. Handle Environment Variables:

   • Access environment variables using process.env within your Edge Function, as Esadax automatically exposes them.

7. Define Routes (Optional):

   • For multiple routes, create separate handler files in the api directory and define their paths in a esadax.json file at the root:

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

8. Error Handling:

   • Use try-catch blocks to handle errors and return appropriate responses.

9. Deployment:

   • Deploy your Edge Functions through the Esadax dashboard or CLI, specifying the routes you want to deploy.