CLI tool for Environment Variables in Checkout Extensions

Extensions
, , ,
1

Hi all,

Had some extra time today and decided to release a tool I’ve written to help with the missing ENV variable functionality in Extensions.

Why?

Without environment variables, developers need to hardcode secrets like API hosts, or public keys.

This is accident prone and doesn’t scale well with teams. One accidental development variable being published can actually break your merchant’s checkouts for example.

Usage

envify shims environment variables into your Shopify Extensions. For example, if you have an ENV variable named API_HOST you can simply run:

npx @getverdict/envify --vars API_HOST

This will create a new vars.jsx file in every extension directory on your machine that can be used in your React components.

// extensions/your-checkout-ui/srcs/vars.tsx

export const API_HOST="https://example.com"

Then you can import it into your components:

import { API_HOST } from './vars'

// rest of your React component here

And that’s it. Now you can add these vars.jsx files to your .gitignore as well to prevent collisions with other developers on your team.

Other goodies

  • Configuration file support for sit and forget var sharing
  • Typescript support
  • Custom pathing support just in case

Questions?

Hit me up here! Or on X: x.com

Documentation:

3 Likes
2

This is awesome Dylan - thank you for sharing this here! I’m sure this will be super valuable for devs working on extensions!