Ionic 7 + Vue/Vite + Capacitor 5 set .env file for ionic capacitor run

Ionic Framework
1

Hi, i want to execute “ionic capacitor run android -l --external” to run my project on android. How can i set the .env-file to use? i have a .env file and an .env.mobile but i cant find the option so set the env file to .env.mobile. I tried “–mode mobile” without a result.

2

I’ve done it with angular, hope it can be helpful

for example, this is how my file looks (i’ve added staging)
image

and my angular.json
 "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            },
            "staging": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.staging.ts"
                }

when i need to run a certain env i add the parameter --configuration=staging

–configuration=NAMEOFYOURENV

2 Likes
3

@kstk let us know if this example helped. If so, I’ll mark the solution and close the thread!

2 Likes
4

This should work for you, but you will need to install dotenv npm package

vite.config.json

import legacy from "@vitejs/plugin-legacy";
import vue from "@vitejs/plugin-vue";
import path from "path";
import { defineConfig } from "vite";
import dotenv from "dotenv";

export default defineConfig(({ mode }) => {
  const envFiles = {
    development: ".env.development",
    mobile: ".env.mobile",
  };

  const envFile = dotenv.config({ path: envFiles[mode] }).parsed;

  console.log(envFile);

  return {
    plugins: [vue(), legacy()],
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "./src"),
      },
    },
    test: {
      globals: true,
      environment: "jsdom",
    },
    // Other Vite configurations...
    define: {
      "process.env": JSON.stringify(envFile),
    },
  };
});

.env.development

VITE_API_BASE_URL=https://development.example.com
VITE_DEBUG=true

.env.mobile

VITE_API_BASE_URL=https://mobile.example.com
VITE_DEBUG=true

Output with vite --mode development

aaronksaunders@Aarons1ProM1Pro ionicIssues % vite --mode development
{
  VITE_API_BASE_URL: 'https://development.example.com',
  VITE_DEBUG: 'true'
}

  VITE v4.3.9  ready in 350 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

Output with vite --mode mobile

aaronksaunders@Aarons1ProM1Pro ionicIssues % vite --mode mobile
{
  VITE_API_BASE_URL: 'https://mobile.example.com',
  VITE_DEBUG: 'false'
}

  VITE v4.3.9  ready in 350 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

Access Values In Code

const VITE_API_BASE_URL = import.meta.env.VITE_API_BASE_URL
3 Likes
5

Thank you for your answers!

6

no problem, I have a bunch of Ionic Vue Content here, so feel free to reach out here in forum or in Discord I try to help out

7

For posterity, I got around this by running ‘ionic capacitor run android -l --external – --mode staging’ and have a .env.staging file in the same directory. The only way I knew that ‘–’ would work is because I asked chatGPT, I wish capacitor documented that there is a way to pass options to vite underneath.