10

We're using Netlify's automatic deployment for all pushed git branches.

We want to include our analytics scripts (et al) only for the master branch, i.e. the version of the website that our users are visiting.

It's possible to build environment variables on Netlify, but I don't get if it's possible to differentiate variables for certain branches?

Abdulaziz
  • 119
  • 1
  • 2
  • 8
Fellow Stranger
  • 32,129
  • 35
  • 168
  • 232

1 Answers1

13

There is a way to setup environment variables based on the deploy context in Netlify in your netlify.toml file. This is being used in a production site using Hugo, but you can use any keys you want for the variables and commands.

An example netlify.toml

# Global settings applied to the whole site.
[build]
  command = "yarn build"
  publish = "public"

# build a preview of the site (Drafts and Future dates also)
[context.deploy-preview]
  command = "yarn build:preview"

[build.environment]
  HUGO_ENV = "development"

[context.production.environment]
  HUGO_VERSION = "0.29"
  HUGO_ENV = "production"
# you can lock a version of hugo for a deploy preview
[context.deploy-preview.environment]
  HUGO_VERSION = "0.29"
  HUGO_ENV = "deploy" # TEST: should be deploy or something other than production
# you can lock a version of hugo for a branch-deploy (other than previews)
[context.branch-deploy.environment]
  HUGO_VERSION = "0.30"
  HUGO_ENV = "development"

Also target a specific branch (example: new-branch)

# build a preview of the site (Drafts and Future dates also)
[context.new-branch]
  command = "yarn build:preview"

# you can also target a specific branch
[context.new-branch.environment]
  HUGO_VERSION = "0.29"
  HUGO_ENV = "deploy" # TEST: should be deploy or something other than production

Solution: Now there will be an environment variable called HUGO_ENV that will have a value to know the context (production, development, deploy) defined. The build language can now access those variables to make decisions on what to include in the build results.

NOTE:

  • Use any env variable name and values you need. The example targets the Hugo static site generator which has a function getenv to retrieve the value.
  • I have not tested how using context.branch-deploy affects targeting a custom branch, so be careful for overrides of those contexts.
  • Any variables specified in the netlify.toml overwrite the environment variables entered into the browser console on the Netlify site.
talves
  • 13,993
  • 5
  • 40
  • 63
  • 1
    Remember: env variariables are also build specific and must be baked into your code at build time if you need to use them within your code on the client. – talves Apr 08 '18 at 18:10
  • Hm, would you mind giving an example how an if statement in the code would look like that only includes a script tag in the production context? – Fellow Stranger Apr 08 '18 at 20:55
  • 1
    A developer on Netlify would use any number of solutions with different coding languages supported for a build. Ask a separate question targeting the specific problem you have and the coding language you are using to get the correct recommendations for using environment variables in your code. I will adjust the answer to explain how to use the setup above in general. – talves Apr 09 '18 at 14:07
  • 4
    How would you do this for secret env variables that cannot be committed to a netlify.toml file?/ – Tom Jun 05 '19 at 21:22
  • 1
    Store the secret keys in the app.netlify.com console. Unfortunately you would not be able to store by context, so would have to create a separate site for a staging branch and use the staging secrete key in that site. – talves Jun 06 '19 at 13:55
  • Could there be a way to get secrets from GitHub instead of using the Netlify UI, and passing them to netlify.toml? That would make it easier to add/update secrets – Robin Métral Jun 06 '20 at 14:05