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

$3

You can install the tool globally:

``bash
npm install -g @getverdict/envify
`

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

`bash
npx @getverdict/envify
`

Usage

$3

Run envify with environment variables:

`bash
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.

$3

| Option | Description | Default |
| ------------- | -------------------------------------------------------------------- | ------------------------------------------------------------------- |
| -f, --files | Specify custom file paths (e.g. ./env.js, ./src/vars.tsx). | Auto-detected paths in extensions//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) |

$3

#### Generate JavaScript Files

`bash
envify --vars API_KEY SECRET_KEY
`

Creates vars.jsx in each valid subdirectory.

#### Generate TypeScript Files

`bash
envify --vars API_KEY SECRET_KEY --lang ts
`

Creates vars.tsx files instead of vars.jsx.

#### Specify Custom Files

`bash
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:

`bash
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:

`tsx
// 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:

`javascript
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.

$3

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

$3

- 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.

$3

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

`bash
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:

`bash
envify --vars
`

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

2. No valid subdirectories with src:

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

3. Missing extensions directory:
`bash
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

`bash
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.

`

``