AWS Amplify - Runtime config

[cipami]

Anyone managed to inject .env to Node runtime on AWS Amplify?
Only docs about it I found is this: https://docs.aws.amazon.com/en_us/amplify/latest/userguide/ssr-environment-variables.html which doesn't work as Nuxt does not auto load .env files on prod.

[HaidarZ]

@cipami have you managed to make it work ?

[cipami]

@HaidarZ Sadly not still. any chance you maybe did? 😅

[adamkutak]

I'm also having this issue. I just want to use my environment variables on the server routes in Amplify!

[pi0]

Hi. Please consider linked example for Next.js assumes the env variables will get bundled during build process. You can do the same by passing build time runtime config.

I highly recommend using platform native Environment Variables for dynamic environment config (otherwise, you essentially need to commit a new .env + new deploy to make changes. It is available under App settings: Environment variables in your dashboard

Docs: https://docs.aws.amazon.com/amplify/latest/userguide/environment-variables.html

[pi0]

Something like this should allow build-time envs to be bundled

test: process.env. NUXT_PUBLIC_TEST || 'NOT SET'

[adamkutak]

I'm having this issue as well. On AWS Amplify, when my Nuxt server gets an env variable with process.env, the variable is not there (only the AWS-added env variables are present). @pi0 how can I access the .env variables in my Nuxt server routes on AWS amplify? The guide for next.js did not work for me.

Note that I do not have a runtimeconfig. That works fine on Vercel however, but AWS amplify does not work.

[keithrz]

Something like this should allow build-time envs to be bundled

test: process.env. NUXT_PUBLIC_TEST || 'NOT SET'

This did not work for me. THIS WORKED! (I said it didn't at first, but I hadn't realized that my build failed for a completely different reason).

Here is my code, for those who are looking for a more complete example:

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ["@nuxt/ui"],
  experimental: {
    externalVue: false,
  },
  // need to pre-populate these values with their process.env.* equivalent
  // this is needed for the deployments to staging and prod envs
  // more info here: https://github.com/nuxt/nuxt/discussions/24635
  runtimeConfig: {
    public: {
      aws: {
        appsync: {
          endpoint: process.env.NUXT_PUBLIC_AWS_APPSYNC_ENDPOINT || '',
          region: process.env.NUXT_PUBLIC_AWS_APPSYNC_REGION || '',
        },
        cognito: {
          region: process.env.NUXT_PUBLIC_AWS_COGNITO_REGION || '',
          identityPoolId: process.env.NUXT_PUBLIC_AWS_COGNITO_IDENTITY_POOL_ID || '',
          userPoolId: process.env.NUXT_PUBLIC_AWS_COGNITO_USER_POOL_ID || '',
          clientId: process.env.NUXT_PUBLIC_AWS_COGNITO_CLIENT_ID || '',
        }
      },
    },
  },
})

I'm using an .env file for local development, but for my deployments I am setting env vars in AWS Amplify "Environment variables" section as described by @pi0.

Does anyone have an example of this working with Nuxt 3 & Amplify? nvm, it works now.

Sidenote here: I feel like I shouldn't need these specific variables defined in this way - Amplify generates the files like .aws-exports and .amplifyconfiguration, that contain the values I already need, so in theory I could reference one of those files in my code directly, and generate the file using amplify pull -y --appId MYAPPID --envName $USER_BRANCH. But I couldn't get headless amplify pull working for me (even in the Amplify frontend build) because it needed me to authenticate to Amplify Studio.

[chuckntaylor]

Wow, glad I stumbled onto this. The documentation does not mention specifically referring to process.env when setting the runtimeConfig properties. The docs simply mention using env variables that start with NUXT_PUBLIC_ if they are going to be used in the runtimeConfig.public values.

However, that really is the missing ingredient -especially since the build process forces NODE_ENV=production. I was really stumped as to how to setup some other values for my development branch.

As a side note, when setting the runtimeConfig like this, it is not necessary to use the NUXT_PUBLIC_ prefix for the env variables.

The following worked just fine for me:

export default defineNuxtConfig({
runtimeConfig: {
    public: {
      appEnv: process.env.APP_ENV || '',
      apiBase: process.env.API_BASE || '',
      cdnBase: process.env.CDN_BASE || '',
      stripePublishableKey: process.env.STRIPE_PUBLISHABLE_KEY || '',
    }
  },
}

[keithrz]

Sidenote here: I feel like I shouldn't need these specific variables defined in this way - Amplify generates the files like .aws-exports and .amplifyconfiguration, that contain the values I already need, so in theory I could reference one of those files in my code directly, and generate the file using amplify pull -y --appId MYAPPID --envName $USER_BRANCH. But I couldn't get headless amplify pull working for me (even in the Amplify frontend build) because it needed me to authenticate to Amplify Studio.

I figured out how to do this. I needed to remove the "backend" section to my amplify.yml config file, and uncheck the option in Amplify Console:

Enable full-stack continuous deployments (CI/CD)
Full-stack CI/CD allows you to continously deploy frontend and backend changes on every code commit

Once I did this, the "Backend" part of my deploy generated an aws-exports file which I could use in my imports (and that's the only thing that was done in the "Backend" deploy). The aws-exports file was the same file generated in my local env after running amplify pull, so the transition from local to deployed env was pretty seamless.