How to use AWS Amplify env vars in gatsby-config.js? - encryption

Question

I am building an app with GatsbyJS. I am using environment variables in my gatsby-config.js. GatsbyJS app builds fine locally, by using .env.* files. However, when building from AWS Amplify it complains about an invalid value retrieved from environment variables. Indeed, it seems that when using process.env.MY_VAR inside gatsby-config.js the value retrieved is encrypted (as per AWSAmplify docs).
I tried with hardcoding the value of the env. var to confirm that encryption was the problem.
The error that I am getting is:
TypeError [ERR_INVALID_URL]: Invalid URL: 6fbaeed85a68.
Which clearly indicates that the value retrieved from process.env.HOSTNAME is 6fbaeed85a68 and not the actual value that I provided in AWS Amplify web's interface.
Below is my gatsby-js.config:
const path = require(`path`);
const queries = require('./src/utils/algolia');
const feedOptions = require('./src/utils/feed');
require('dotenv').config({
path: `.env.${process.env.NODE_ENV}`,
});
module.exports = {
siteMetadata: {
siteUrl: new URL(process.env.HOSTNAME).href,
title: `APP_TITLE`,
},
plugins: [
{
resolve: `gatsby-source-kentico-cloud`,
options: {
deliveryClientConfig: {
projectId: process.env.KENTICO_PROJECT_ID,
},
languageCodenames: process.env.KENTICO_LANGUAGES.split(';'),
},
},
{
resolve: `gatsby-plugin-algolia`,
options: {
appId: process.env.GATSBY_ALGOLIA_APP_ID,
apiKey: process.env.ALGOLIA_ADMIN_KEY,
queries,
chunkSize: 10000,
},
},
`gatsby-plugin-react-helmet`,
`gatsby-plugin-sitemap`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `APP_NAME`,
short_name: `APP_SHORT_NAME`,
start_url: `/`,
background_color: `#dbdcd1`,
theme_color: `#1ad2eb`,
display: `standalone`,
icon: `src/images/logo-simple-transp-square-260x260.png`,
include_favicon: true,
},
},
`gatsby-plugin-offline`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: path.join(__dirname, `src`, `images`),
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-sass`,
options: {
includePaths: ['src/styles/_variables'],
},
},
{
resolve: 'gatsby-plugin-mailchimp',
options: {
endpoint: process.env.MAILCHIMP_ENDPOINT,
},
},
{
resolve: 'gatsby-plugin-transition-link',
options: {
layout: require.resolve(`./src/layout`),
},
},
{
resolve: `gatsby-plugin-feed`,
options: feedOptions,
},
{
resolve: `gatsby-plugin-google-tagmanager`,
options: {
id: process.env.GTM_CODE,
includeInDevelopment: false,
},
},
],
};
I don't understand how I am supposed to retrieve env vars. Any help would be greatly appreciated.

Answer 1

When adding environment variables to AWS Amplify App under App Setting -> Environment Variables, just prefix GATSBY_ to all your environment variable names. Remember to change your code to use the new names.
Adding GATSBY_ makes env variables accessible to browser javascript.
Read more about it in the official documentation.