Azure static web app environment variable

Question

I am trying to publish Gatsbyjs by Azure Static web app. I have a plugin (gatsby-source-contentful).

I need to pass variables like:

{
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: process.env.CONTENTFUL_SPACE_ID,
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
      },
},

Error:

Running 'npm run build'...


> [email protected] build /github/workspace
> gatsby build

success open and validate gatsby-configs - 0.021s
error Invalid plugin options for "gatsby-source-contentful":

- "accessToken" is required
- "spaceId" is required
not finished load plugins - 0.905s

Where can I pass this?

Thanks.

Millwater

Answer 1

For Azure Static Web Apps there is two ways to set environment variables one for front-end and one for back-end scenarios.

Since you are using Gatsby, I guess its safe to assume you are building your front-end. For that you will need to add the environment variables on your build configuration (azure-static-web-apps-.yml).

Like so:

env: # Add environment variables here
  CONTENTFUL_SPACE_ID: <your-id>

Here is the link for that in documenation.

Not to be confused with this one which is used for defining backend environment variables.

Garretson

its not safe to publish sensitive environment variables though – Schach

Absolutely, that is why you define your secrets first in Azure and so you it can supply it to your application on build time. – Garretson

Hi drinesteban. How can I get the value of the variable defined in Azure in Gatabyjs – Photophobia

Answer 2

They are called environment variables. They are intended to store sensitive data such as tokens, identifiers, etc, and they shouldn't be pushed in your repository, so you should ignore them (in your .gitignore file).

By default, Gatsby creates 2 environments without noticing you, one for each compilation method:

• gatsby develop: uses .env.development
• gatsby build: uses .env.production

Note: you can change this behavior if needed to add your own environments using NODE_ENV custom commands.

So, to pass your data to your gatsby-config.js you just need to create two files (.env.development and .env.production) at the root of your project. Then, add the following snippet at the top of your gatsby-config.js:

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

Note: dotenv is already a dependency of Gatsby so you don't need to install it again

This will tell Gatsby where to take the environment variables.

You just remain to populate both environment files. Look for the credentials in Contentful and add them in the files using the sane naming than you've set in your gatsby-config.js:

CONTENTFUL_SPACE_ID=123456789 
CONTENTFUL_ACCESS_TOKEN=123456789 

Keep also in mind that when dealing with Azure, Netlify, AWS, or similar CI/CD tools, you'll need to provide to the server the same environment files to avoid a code-breaking when pushing the changes.

Alyshaalysia

Thanks for your clarification. We have no problem in the local environment. The inquiry is how to provide the Azure server with these variables. – Millwater

cloudblogs.microsoft.com/opensource/2018/11/16/… – Alyshaalysia