Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

Gatsby Client Variables Plugin

A Gatsby plugin to allow server-side runtime environment variables to be made available to client-side scripts.

By default, Gatsby only makes system environment variables prefixed with GATSBY_ available to client scripts. Using this plugin, you can make server-side runtime environment variables available within the browser i.e., env variables passed to docker container.


npm install gatsby-plugin-client-variables

How to use

In gatsby-config.js:

module.exports = {
  plugins: [
      resolve: `gatsby-plugin-client-variables`,
      options: {
        output: "config/gatsby-client-variables.json",


import variables from "gatsby-plugin-client-variables";
import { API_URL } from "gatsby-plugin-client-variables";


const initClientVariables = require("gatsby-plugin-client-variables/server");

async function main() {
  await initClientVariables("config/gatsby-client-variables.json", {
    publicDir: "public/",

  app.listen(3000, function () {
    console.log("App started on port 3000");

© 2023 Gatsby, Inc.