How to use different URLs depending of Nuxt's environment?

Question

In vuex store I call up the API Gateway api like this:

import apigClientFactory from 'aws-api-gateway-client';

const apigClient = apigClientFactory.newClient({
    invokeUrl: 'https://blahblah.us-east-2.amazonaws.com/dev'
})

I'd like to invoke dev or prod versions of the API dependent on whether the app is in development or production mode. How can I achieve this?

I'm assuming that this is the proper way to go about having a web app use API Gateway. When I am doing development work, it should invoke a dev stage of the API that in turn uses development stage tools (like $latest for lambda). Once those tools are ready, they can be pushed to the stage that the production API is using.

UPDATE: I am not proud of this but I was able to just use an if/else statement to define the correct url based on stage like so:

if (process.env.NODE_ENV !== 'production') {
    var apigClient = apigClientFactory.newClient({
    invokeUrl: 'apiurl/dev'
    });
} else {
    var apigClient = apigClientFactory.newClient({
    invokeUrl: 'apiurl/prod'
    });
}

Unfortunately you cannot use export default in the index.js script so I still cannot find a way to use an envar for invokeUrl. — hipsterstomper69, Jul 01 '21 at 12:28

kissu · Answer 1 · 2021-06-30T13:50:00.120

0

You should use env variables and inject the proper dev or production URL there. This way, you could achieve a safe, quick and easy separation.

Give a look to my answer here to see the whole configuration needed: https://stackoverflow.com/a/67705541/8816585

export default ({ $config: { myFancyAwsVariableDefinedInNuxtConfig } }) => {
  const apigClient = apigClientFactory.newClient({
    invokeUrl: myFancyAwsVariableDefinedInNuxtConfig
  })
}

edited Jun 30 '21 at 13:50

answered Jun 30 '21 at 08:39

kissu

40,416
14
65
133

Why is it that the env variable cannot be accessed from the scope of the apigClient constant? I am able to console.log the environment variables from index.js but when I attempt to use them in the constant, I get an error: "invokeUrl must be specified!" ```const apigClient = apigClientFactory.newClient({invokeUrl: process.env.apiUrl});``` – hipsterstomper69 Jun 30 '21 at 13:37
@hipsterstomper69 where is the following code located? – kissu Jun 30 '21 at 13:38
It's in ~/store/index.js – hipsterstomper69 Jun 30 '21 at 13:40
Keep in mind I can console.log the envar from index.js but for some reason it cannot be accessed when defining the newClient – hipsterstomper69 Jun 30 '21 at 13:42
Mind using a "publicRuntimeConfig" variable rather than `process.env`? – kissu Jun 30 '21 at 13:43
Also, do you have some other code around this or this is the only thing inside of your file? – kissu Jun 30 '21 at 13:43
Using ```invokeUrl: publicRunTimeConfig.API_URL``` gives me 'publicRuntimeConfig is not defined'. There is some actions and mutations also in index.js but those work fine the issue is that the envars for some reason cannot be used when defining an apigClient – hipsterstomper69 Jun 30 '21 at 13:47
@hipsterstomper69 this is not how you're supposed to use this. Check my updated example for some code snippet. Also, can you maybe use a `fetch` or `axios` and see if the variable is passed to the client (by inespecting the URL in your browser's network tab). – kissu Jun 30 '21 at 13:51
You cannot export default in the index.js but I am experimenting with axios and might just use that instead of the aws-api-gateway-client module entirely. – hipsterstomper69 Jun 30 '21 at 14:16
@hipsterstomper69 I just realized that using context in the `index.js` vuex file is pretty tricky indeed. But at the end, Vuex is supposed to be used for data management only, the configuration should be done elsewhere IMO. – kissu Jul 01 '21 at 07:37

How to use different URLs depending of Nuxt's environment?

1 Answers1