35. frameworks: vite | Customer Portal

Getting Started with Vite on Epycbyte

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

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-epycbyte: Provides a simple way to deploy your Vite app on Epycbyte.
vite-plugin-ssr: Enables Server-Side Rendering (SSR) for your Vite app.

Environment Variables

Epycbyte 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 { EpycbyteRequest, EpycbyteResponse } from '@epycbyte/node';

export default function handler(request: EpycbyteRequest, response: EpycbyteResponse) {
  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 epycbyte.json file at the root of your project and add the following code:

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

More Benefits

Epycbyte 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 Epycbyte, 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 Epycbyte, follow these organized steps:

Create Project Structure:
- Initialize your project with a root directory.
- Create an api directory at the root for your routes.
Set Up Configuration:
- In your api/handler.ts file, define the Edge Function configuration at the top:
```
export const config = { runtime: 'edge' };
```
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 Epycbyte, typically located in @epycbyte/node.
Install Dependencies:
- Install the required packages, including @epycbyte/node for handling requests and responses.
Test Locally Using Epycbyte CLI:
- Run epycbyte dev in your project directory to start a local server.
- Visit http://localhost:3000 to test your Edge Function.
Handle Environment Variables:
- Access environment variables using process.env within your Edge Function, as Epycbyte automatically exposes them.
Define Routes (Optional):
- For multiple routes, create separate handler files in the api directory and define their paths in a epycbyte.json file at the root:
```
{
  "routes": [
    { "path": "/", "handler": "api/handler" },
    { "path": "/about", "handler": "api/about" }
  ]
}
```
Error Handling:
- Use try-catch blocks to handle errors and return appropriate responses.
Deployment:
- Deploy your Edge Functions through the Epycbyte dashboard or CLI, specifying the routes you want to deploy.