Envify

Inject environment variables into Shopify Extensions with ease. This CLI tool simplifies the process of creating vars.tsx or vars.jsx files in your Shopify extension projects, especially for React-based extensions.

Why?

Because Shopify Extensions do not support environment variables currently. This leads to developers hardcoding secrets like API hosts or public keys within their apps. This practice is very disruptive for teams and as well risky because it's easy to accidentally publish development variables by accident.

With envify, you can inject these variables from your environment into a simple JavaScript/TypeScript modules and import them into your Shopify Checkout, Customer Account or POS extensions.

Features

• Automatically locates React extesions within the extensions directory.
• Generates environment variable files (src/vars.tsx or src/vars.jsx) in each valid extension subdirectory.
• Supports TypeScript (.tsx) and JavaScript (.jsx) output.
• Skips non-React extensions (those without a src folder).
• Flexible: specify custom files or paths if needed.

Installation

Using npm

You can install the tool globally:

npm install -g @getverdict/envify

Or, run it directly with npx (no installation required):

npx @getverdict/envify

Usage

Basic Usage

Run envify with environment variables:

envify --vars API_KEY SECRET_KEY

This will:

• Search the extensions directory.
• Find subdirectories with a src folder.
• Create src/vars.jsx (default) or src/vars.tsx depending on --lang.
• Insert the values of API_KEY and SECRET_KEY from your environment.

Options

| Option | Description | Default | | ------------- | -------------------------------------------------------------------- | ------------------------------------------------------------------- | | -f, --files | Specify custom file paths (e.g. ./env.js, ./src/vars.tsx). | Auto-detected paths in extensions/<subdir>/src/vars.jsx or .tsx | | -v, --vars | List of environment variables to inject (e.g. API_KEY SECRET_KEY). | None (required) | | -l, --lang | Output language: js for .jsx or ts for .tsx. | js (JavaScript) |

Examples

Generate JavaScript Files

envify --vars API_KEY SECRET_KEY

Creates vars.jsx in each valid subdirectory.

Generate TypeScript Files

envify --vars API_KEY SECRET_KEY --lang ts

Creates vars.tsx files instead of vars.jsx.

Specify Custom Files

envify --files ./env.js ./config/vars.tsx --vars API_KEY SECRET_KEY

Writes to the specified files instead of using extensions.

Environment Variable File Example

Given:

envify --vars API_KEY SECRET_KEY --lang ts
export API_KEY="my-api-key"
export SECRET_KEY="my-secret-key"

src/vars.tsx will be:

// This file is auto-generated by envify

export const API_KEY = "my-api-key";
export const SECRET_KEY = "my-secret-key";

Then you can simply import the module into your React components:

import { API_KEY } from "./vars";

// rest of your Checkout UI Extension code

Using .envify.json for Configuration

You can provide default configuration values in a .envify.json file located in your project's root directory. This file allows you to specify which files to write and which environment variables to include without needing to pass them via CLI options every time.

Example .envify.json

{
  "files": ["./env.js", "./config/vars.tsx"],
  "vars": ["API_KEY", "SECRET_KEY", "ANALYTICS_ID"]
}

How It Works

• Files: If you omit the --files option, Envify will look at the files field in .envify.json.
• Variables: If you omit the --vars option, Envify will use the vars field from .envify.json.

If both .envify.json and CLI options are provided, the CLI options will take precedence.

Usage Without CLI Arguments

If you've defined your configuration in .envify.json, you can simply run:

envify

Envify will read the configuration from .envify.json and write your environment variables to the specified files.

If no .envify.json is found, Envify will revert to its default behavior, which involves searching the extensions directory and requiring you to provide --vars via the CLI.

Error Handling

1. No --vars provided:

   envify --vars

   Error: At least one environment variable must be provided using --vars.

2. No valid subdirectories with src:

   Error: No valid subdirectories with "src" folders found in "extensions".

3. Missing extensions directory:

   Error: "extensions" directory not found.

FAQs

Q: What if an environment variable isn't set?
A: A warning is logged and the variable appears with an empty value.

Q: Can I use this for non-React extensions?
A: By default, it only processes subdirectories with src. Use --files for custom paths if needed.

Q: Can I use this in CI/CD?
A: Yes. Ensure the required variables are set in your pipeline’s environment.

Development

git clone https://github.com/getverdict/envify.git
cd envify
npm install
npm link
envify --vars API_KEY SECRET_KEY

Contributing

Contributions are welcome! Please submit issues or pull requests.