Frontend Environment Variables

Hilla
1

Is there a recommended way to handle frontend “environment variables” when using hilla, not secrets, but things like analytics tokens, etc. which may be different per environment / deployment.

Vite can read envfiles during build, and these can be configured using the --mode flag - see Env Variables and Modes | Vite . However I can’t see a way to configure this from the vaadin maven plugins / goals. (Actually, is vite used during production builds or only for the dev server, as I see references to webpack as well)

The other approach is to send all the envvars from my Spring app to the FE via a @BrowserCallable service, but wanted to see how others are dealing with this first.

2

The benefit of using Spring properties files would be that it would allow you to keep all environment configuration in one place.

1 Like
3

Using Vite should work as well. When you start the app it generates a vite.config.ts that you can customize. It is used both for dev mode and production.

1 Like
4

I’m using a @BrowserCallable FrontendConfigService.

5

Hi @Mandeep.3,
As mentioned by @sissbruecker, you could use Vite’s environment variable capabilities. I wrote a blog post about it, that may help you: How to display application information in Hilla? | René Wilby | Freelance Software Engineer.

6

Thanks for all the advice.

It would be great to be able to use the vite env support with separate .env.[mode] files, where mode could be ci|dev|staging|prod|....However I don’t see how I can pass the --mode setting to vite when vaadin calls it to configure which specific file to use when running the dev server or making a production build.

Perhaps possible to do within the vite.config.ts (Configuring Vite | Vite), but will stick with @BrowserCallable for now - it’s easier to have the logic for all the different environments in one place.