Dev, staging and production modes/flavors?

1

Hi!
In Flutter, there are flavors, which allow us to choose a subset of features and also a difference database, etc. depending on if we are in production, or it’s just deployed locally on a developer’s laptop.

Is there such a thing in Framework7?

It seems like the best way to achieve this would be to create custom .env files for each flavor:

  • .env.production
  • .env.staging
  • .env.development

For Webpack, see EnvironmentPlugin | webpack

Vue 3 also offers “modes”: Modes and Environment Variables | Vue CLI

Any suggestion or code sample to do so in the most portable way?
Thank you!

2

Vite also offers them: Env Variables and Modes | Vite

3

I think some concepts are being mixed together. Framework7 is not a hybrid or cross-platform framework with native layers; it is a web framework, with some utilities to help when running inside Cordova or Capacitor environments. Everything still originates from the web layer.

If you are using Capacitor with Framework7, you can introduce environment-specific native configuration through Trapeze, which allows you to define environment configurations that are automatically applied on the native side without manual modification. It works with multiple environments such as .env.dev, .env.staging, and .env.prod.

If you are using Framework7 only for the web, then relying on separate .env files combined with custom run scripts in your package.json is sufficient. This aligns with how Vite and Vue 3 handle modes and environment variables.

Hope this clarifies the setup.
and please correct me if i misunderstood you.