Vite is a powerful, opinionated build tool designed to streamline the development experience for modern web projects. It offers a fast dev server packed with advanced features like pre-bundling NPM dependencies and hot module replacement. When it’s time to go live, Vite’s build command optimizes your code and produces static assets ready for production.

These capabilities make Vite a compelling choice over standard CLIs, especially for larger projects involving multiple developers and sophisticated frameworks.

Vite powers popular frameworks like , and is often used in large projects built with , , , , , ., and more.

​
Getting Started

Ready to dive into Vite with Brimble? Here’s how to get started:

  • Clone an Example Repo: Choose one of our Vite example repositories and clone it to your favorite git provider.

Live Example

Repository Link

​
Using Vite community plugins

While Vite comes packed with modern features like SSR and Serverless Functions, setting these up can sometimes be complex. That’s where the vibrant Vite community comes in. Many developers turn to popular community plugins to streamline their workflow and avoid configuration headaches.

Vite’s plugin system is built on Rollup’s plugin interface, which means you have access to a wealth of tools from both the Rollup and Vite ecosystems. This opens up a world of possibilities for enhancing your project with tried-and-true plugins.

We recommend leveraging popular Vite plugins whenever possible to simplify and supercharge your development process.

​
vite-plugin-ssr

One standout plugin in the Vite community is vite-plugin-ssr. This powerful tool, adhering to the Build Output API spec, significantly extends the capabilities of your Vite applications. With vite-plugin-ssr, you can seamlessly implement:

  • Server-Side Rendering (SSR)
  • Serverless Functions
  • Edge Functions
  • Static Site Generation (SSG)

These features can elevate your project, allowing for more dynamic and versatile web applications. By integrating vite-plugin-ssr, you leverage the full potential of Vite, bringing your development experience to the next level.

​
Environment Variables

Brimble automatically populates a set of System Environment Variables for your projects. For instance, the BRIMBLE_GIT_PROVIDER variable reveals the Git provider that initiated your project’s deployment on Brimble.

These environment variables are readily available to your project, and you can manage their availability in your project settings on Brimble. For more details, refer to our Environment Variables documentation.

To utilize Brimble’s System Environment Variables in Vite during the build process, prefix the variable name with VITE_. For example, VITE_BRIMBLE_ENV will indicate whether the app is running in a preview, production, or development environment.

Here’s an example of a Vite config file that sets VITE_BRIMBLE_ENV as a global constant available throughout the app:

// vite.config.js
export default defineConfig(() => {
  return {
    define: {
      __APP_ENV__: process.env.VITE_BRIMBLE_ENV,
    },
  };
});

Integrating this configuration ensures your application can dynamically adapt based on the deployment environment, enhancing its flexibility and robustness.

If you want to read environment variables from a .env file, additional configuration is required. See the Vite config docs to learn more.

To summarize, the benefits of using System Environment Variables with Vite on Brimble include:

  • Dynamic Deployment Information: Access Brimble deployment details dynamically or statically using our preconfigured System Environment Variables.
  • Seamless Integrations: Automatically-configured environment variables provided by integrations for your preferred services.
  • Efficient Management: Easily search and filter environment variables by name and environment in Brimble’s dashboard.

​
Edge Functions

Edge Functions are a fast, scalable solution for delivering dynamic content to users. By default, Edge Functions are deployed globally and will be invoked in one of Brimble’s data centers near your site’s visitors.

Edge Functions are ideal for scenarios requiring rapid data interactions, such as executing OAuth callbacks, responding to webhook requests, or interacting with APIs that have stringent time limits.

If your project uses a Vite community plugin, like vite-plugin-ssr, follow that plugin’s documentation for integrating Edge Functions.

For frameworks built on Vite, consult the framework’s official documentation or our dedicated framework docs. Some frameworks, such as SvelteKit, support Edge Functions natively. We recommend using the framework’s method for implementing Edge Functions.

If you’re not using a framework or plugin that supports Edge Functions, you can still leverage them by creating route modules in an api directory at the root of your project.

Here’s an example of a basic api/handler Edge Function route:

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

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

You can test your Edge Function routes locally using with the brimble cook command.

​
Serverless Functions

Serverless Functions scale dynamically based on traffic demands, preventing failures during peak hours and minimizing costs during low activity periods.

If your project uses a Vite community plugin, such as vite-plugin-ssr, follow the plugin’s documentation for integrating Serverless Functions.

For frameworks built on Vite, refer to the framework’s official documentation or our dedicated framework docs. Some frameworks, like SvelteKit, natively support Serverless Functions. We recommend using the framework’s method for implementing Serverless Functions.

If you’re not using a framework or plugin that supports Serverless Functions, you can still implement them by creating routes in an api directory at the root of your project.

To deploy your routes as Edge Functions, see our Edge Functions section.

Here’s an example of a basic Serverless Function defined in an api directory:

import type { BrimbleRequest, BrimbleResponse } from '@brimble/node';

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

​
Server-Side Rendering (SSR)

Server-Side Rendering (SSR) allows you to render pages dynamically on the server, which is ideal for pages that require unique data for each request, such as those checking user authentication or considering the location of incoming requests.

While Vite provides a low-level API for implementing, we recommend using a Vite community plugin for most cases. You can explore the SSR section of Vite’s plugin repository for a comprehensive list of SSR plugins.

With SSR on Brimble, you benefit from:

  • Zero-to-scale: SSR pages scale down to zero when not in use, saving resources.
  • Automatic scaling: Seamlessly handles traffic spikes with automatic scaling.
  • Cache-Control support: Zero-configuration support for Cache-Control headers, including stale-while-revalidate.

Learn more about SSR with Brimble to fully leverage these capabilities.

​
Using Vite to Make SPAs

When deploying your Vite app as a Single Page Application (SPA), deep linking won’t function correctly out of the box. To enable deep linking, you need to create a brimble.json file at the root of your project and add the following code:

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

This configuration ensures that all routes are redirected to index.html, allowing your SPA to handle routing properly.

For production builds, we recommend deploying your app in Multi-Page App (MPA) mode. MPA mode offers better performance and SEO benefits.

Learn more about Multi-Page App mode in the Vite documentation.