How to configure production URL for Firebase callable function in nuxt app?

Question

I have a nuxt app uploaded to Firebase (served as cloud function). I have also a callable function that I'm trying to call from the app. The problem is that it tries to call localhost url instead of the production one.

My Firebase setup in nuxt.config.js looks like this:

module.exports = {
    env: {
        functionsURL: process.env.NUXT_ENV_FUNCTIONS === 'local' ? "http://localhost:5001/turniejomat/us-central1" : 'https://us-central1-turniejomat.cloudfunctions.net', // I would expect this to be applied
    },
    modules: [
        [
            '@nuxtjs/firebase',
            {
                config: {
                    // app config
                },
                services: {
                    functions: {
                        location: 'us-central1',
                        emulatorPort: 5001,
                    }
                }
            }
        ]
    ],
}

The firebase.nuxt.org documentation mentions only emulator configuration, but not production.

I'm calling the function like this:

const signUp = await this.$fire.functions.httpsCallable("signup")(configObject)

How do I make the function to use proper url in production?

EDIT:

This is package.json setting:

"scripts": {
        "dev": "SET \"NUXT_ENV_FUNCTIONS=local\" & nuxt",
        "build": "SET \"NUXT_ENV_FUNCTIONS=fire\" & nuxt build",
 } 

EDIT 2:

Apparently the env.functionsURL is applied properly, as the app code uses this variable directly for other purposes and it works correctly! It is the callable functions only that for some reason don't receive the relevant production url to be called. At the same time the only places in the code where 5001 port appears are:

1. nuxt.config.js / env setting
2. nuxt.config.js / modules / services / functions / emulatorPort setting
3. service.functions.js module in nuxt/firebase folder which is added automatically (by firebase.nuxtjs I guess?).

The module looks like this:

export default async function (session) {
  await import('firebase/functions')
  const functionsService = session.functions('us-central1')
  functionsService.useFunctionsEmulator('http://localhost:5001')
  return functionsService
}

So maybe for some reason the callable function thinks it should still use emulator settings? How could I prevent it?

The only place where the module is called is the nuxt/firebase/index.js, like this:

 if (process.server) {
    servicePromises = [
      authService(session, firebase, ctx, inject),
    firestoreService(session, firebase, ctx, inject),
    functionsService(session, firebase, ctx, inject),
    ]
  }

  if (process.client) {
    servicePromises = [
      authService(session, firebase, ctx, inject),
      firestoreService(session, firebase, ctx, inject),
      functionsService(session, firebase, ctx, inject),
    ]
  }

Which seems that indeed regardless of the environment the same settings are indeed applied by the Firebase's native code. I could modify the functionsService code, but it does not seem like an optimal solution as Firebase might overwrite it at some point, like during build or update. Or it could have been that these 'native' files were generated only at the beginning and did not update despite potential changes made in the config (which was incorrect, but now is correct).

How could I enforce changes to these Firebase's files distinguishing prod and dev environments and make them safely persist? Probably nuxt.config.js / modules / services / functions / should be configured differently, but how?

Answer 1

So the solution turned out to be to set up functions.emulatorPort setting in nuxt.config.js conditionally - only for the dev environment and undefined for production:

functions: {
    location: 'us-central1',
    emulatorPort: process.env.NUXT_ENV_FUNCTIONS === 'local' ? 5001 : undefined,                    
}

Answer 2

You might want to review the documentation again. I checked the previous steps and it seems like you are not initializing firebase and that you can also specify whether you want to work in the development or the production mode. You can find this in the Guide, the configuration is at the beginning. (guide/options/config) details for your nuxt.config.js file.

config

REQUIRED

Your firebase config snippet and other Firebase specific parameters. You can retrieve this information from your Firebase project's overview page:

https://console.firebase.google.com/project/<your-project-id>/overview

nuxt.config.js:

config: {
  // REQUIRED: Official config for firebase.initializeApp(config):
  apiKey: '<apiKey>',
  authDomain: '<authDomain>',
  projectId: '<projectId>',
  storageBucket: '<storageBucket>',
  messagingSenderId: '<messagingSenderId>',
  appId: '<appId>',
  measurementId: '<measurementId>'
}

Can be defined per NODE_ENV environment if put in child-objects config.production and config.development, meaning that e.g. config.production gets loaded when NODE_ENV === 'production'.

You can also specify multiple custom environments as mentioned in the customEnv option below.

And the guide/options/services part instructs you on how to initialize firebase.

services

REQUIRED

By default, NO Firebase products are initialized. To initialize a specific service, set its services flag to true or create a child object and name the key after the service.

Available services:

nuxt.config.js:

services: {
  auth: true,
  firestore: true,
  functions: true,
  storage: true,
  database: true,
  messaging: true,
  performance: true,
  analytics: true,
  remoteConfig: true
} 

Each service has advanced options that you can configure. See the service options section for more details.

EDIT If this is not working, I would like to know if you configured your firebase project in development mode, in that case the issue might be there. To change it to development mode or to troubleshoot that part you might need to create a new project from scratch and import/export your old project like they suggested in this question.

Answer 3

Use the publicRuntimeConfig in nuxt.config.js, in order to configure the environment:

export default {
  publicRuntimeConfig: {
    baseURL: process.env.BASE_URL || 'https://us-central1-turniejomat.cloudfunctions.net'
  }
}

Subsequently the dev script would be:

"dev": "SET \"BASE_URL=http://localhost:5001/turniejomat/us-central1\" & nuxt"

Always substitute production with development values, not the other way around.