Learn how to use Brimble features with Vite.
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:
vite-plugin-ssr
, you leverage the full potential of Vite, bringing your development experience to the next level.
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:
.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:
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:
brimble cook
command.
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:
stale-while-revalidate
.brimble.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.