Question 289725 in Firebase Question posted in
An extensive official documentation can be found here.

Vue3 + Firebase: Use Different .ENV File For Each Build Type

I’ve implemented two firebase projects; production (default) and staging

In my Vue3 project.. I have the following env files:

.env.local, .env.production, and .env.staging

npm run dev //uses .env-local. works fine

firebase deploy -P default //uses .env-production. works fine

HOWEVER.. running:

firebase deploy -P staging //uses .env-production. !!!WRONG!!!

My vite.config.js file:

export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    }
})

Example .env file:

VITE_ENV = "development"
VITE_FIREBASE_API_KEY = "sdasdasdsada"
VITE_FIREBASE_AUTH_DOMAIN = "sadadasdasd.firebaseapp.com"
VITE_FIREBASE_PROJECT_ID = "sadasdasd"
VITE_FIREBASE_STORAGE_BUCKET = "asdasdas"
...

QUESTION:

How do I get firebase deploy -P staging to use the .env.staging environment?

Tags:

2

Answers


  1. 0

    You might consider adding a new script for staging deployment in your package.json: that script will set the appropriate environment variables before deploying to Firebase.

    "scripts": {
    "deploy:staging": "cross-env VITE_ENV=staging vite build && firebase deploy -P staging"
}

    cross-env (npm install --save-dev cross-env) is used to set environment variables in a platform-independent way. It is in maintenance mode as a project, but still works well.

    Your package.json should now include the new deployment script:

    {
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "deploy:staging": "cross-env VITE_ENV=staging vite build && firebase deploy -P staging"
    // other scripts
  }
  // rest of your package.json
}

    The provided vite.config.js does not currently handle custom environment variables. You would need to modify it to make sure it loads the correct environment variables based on the VITE_ENV value.

    import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { fileURLToPath } from 'url';

export default defineConfig(({ mode }) => {
    const env = require(`./.env.${mode}.js`).default;
    return {
    plugins: [vue()],
    resolve: {
        alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
        },
    },
    // Add other necessary configurations
    define: {
        'process.env': env
    }
    };
});

    That would load the appropriate .env file based on the mode (which is set by cross-env VITE_ENV=staging or other environment settings).

    The example .env file you mention suggests that these are standard dotenv files.
    However, to be imported in vite.config.js, they need to be in JavaScript object format. Ypu might consider converting the .env files into JavaScript modules. For instance, consider using abdennour/dotenv-to-js-object (Dockerfile, using this bash script fry) to convert the .env files into JavaScript modules, which would look like.

    export default {
    VITE_ENV: "staging",
    VITE_FIREBASE_API_KEY: "your_staging_firebase_api_key",
    VITE_FIREBASE_AUTH_DOMAIN: "your_staging_firebase_auth_domain",
    // other staging variables
};

    Repeat this for each environment (.env.production.js, .env.local.js, etc.).

    That could be part of your npm script, to include this conversion step. For instance:

    "scripts": {
    "convert-env": "docker run --rm -v $(pwd):/app abdennour/dotenv-to-js-object /app/.env.staging",
    "deploy:staging": "npm run convert-env && vite build && firebase deploy -P staging"
}

    But you could use the fry script directly, without Docker:

    "scripts": {
  "convert-env": "./fry.sh --src=./.env.staging --env-vars --dest=./ --dest-filename=.env.staging.js", 
  "deploy:staging": "npm run convert-env && vite build && firebase deploy -P staging"
}

    That assumes your .env.staging file is in the root directory of your project. The convert-env script will create a .env.staging.js file, which can then be imported into your vite.config.js.
    That would automate the process of converting .env files.

    Now, when you want to deploy to your staging environment, you would use the new npm script:

    npm run deploy:staging

    That should make sure the correct environment variables are used for each deployment type.

    [ Vue3 App ] -- .env.staging -------------------- [ Vite Build ]
   |                                                    |
   |----------- .env.production -- [ Vite Build ]       |
                                                   (build artifacts)
                                                        |
                                                  [ Firebase Deploy ]
                                                        |-P staging
                                                        |-P default

    Make sure the .env files are correctly named (.env.local, .env.production, .env.staging) and contain the respective environment-specific variables.

    Login or Signup to reply.
  2. 0

    You want to make sure you initialize the correct project before deploying.

    Write a script that will initialize your secondary firebase project before deploying your code to it. Then add it to package.json.

    inside package.json

      "scripts": {
    "staging-deploy": "node deployScript.js"
  }

    rough script

    const { execSync } = require('child_process');
   const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);
// Deploy the Firebase project
execSync(`cd ${projectDirectory} && firebase deploy -P staging`);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search