Environment variables for your Shopify Extensions
npm install @getverdict/envifyInject 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.
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.
- 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.
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
Run envify with environment variables:
`bash`
envify --vars API_KEY SECRET_KEY
This will:
- Search the extensions directory.src
- Find subdirectories with a folder.src/vars.jsx
- Create (default) or src/vars.tsx depending on --lang.API_KEY
- Insert the values of and SECRET_KEY from your environment.
| Option | Description | Default |
| ------------- | -------------------------------------------------------------------- | ------------------------------------------------------------------- |
| -f, --files | Specify custom file paths (e.g. ./env.js, ./src/vars.tsx). | Auto-detected paths in extensions/ 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) |
#### 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.
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
`
for ConfigurationYou 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.
`json`
{
"files": ["./env.js", "./config/vars.tsx"],
"vars": ["API_KEY", "SECRET_KEY", "ANALYTICS_ID"]
}
- Files: If you omit the --files option, Envify will look at the files field in .envify.json.--vars
- Variables: If you omit the 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.
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.
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.
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.
`bash`
git clone https://github.com/getverdict/envify.git
cd envify
npm install
npm link
envify --vars API_KEY SECRET_KEY
Contributions are welcome! Please submit issues or pull requests.
`
``