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.
- Or, choose a template from Brimble’s marketplace
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 isvite-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)
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, theBRIMBLE_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:
.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, likevite-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:
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 asvite-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:
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
.
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 abrimble.json
file at
the root of your project and add the following code:
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.