Shopify 扩展结帐中的环境变量

Question

我有一个调用服务器端点的 Shopify 结帐扩展程序。此服务器端点对于本地、暂存和生产有所不同。我尝试按照本教程在 GitHub Actions 中引入 ci/cd 进行扩展：https://shopify.dev/docs/apps/tools/cli/ci-cd。但是，我不知道是否可能或如何传递环境变量或扩展。

// I want this to change depending on the environment
export const apiUrl = "https://staging_endpoint.com";

该扩展程序在浏览器的沙箱中运行，因此它无法访问环境变量，因为它不是节点进程。该扩展是一个打字稿，并与以下 tsconfig 发生反应：

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "strict": true,
    "types": ["react"]
  },
  "include": ["./src"]
}

这是扩展名.toml：

api_version = "2023-07"

[[extensions]]
type = "ui_extension"
name = "zipr-discount-ext"
handle = "zipr-discount-ext"

[[extensions.targeting]]
module = "./src/index.tsx"
target = "purchase.checkout.block.render"
[extensions.capabilities]
network_access = true
block_progress = false
api_access = true

shopify 应用程序前端是使用

vite

构建的，这些是软件包版本：

    "@shopify/app": "^3.50.0",
    "@shopify/cli": "^3.50.0",
    "@shopify/ui-extensions": "^2023.10.0",
    "@shopify/ui-extensions-react": "^2023.10.0",
    "@shopify/shopify-api": "^7.3.1",

我尝试过像这样引入 dotenv 包：

import dotenv from "dotenv";

dotenv.config();
const myVariable = process.env.REACT_APP_MY_VARIABLE;

或者使用VITE__

但显然这行不通，因为我们浏览器中没有 process.env。

Answer 1

虽然我希望我们有一种方法来处理环境变量，但我最终使用了商店的元字段来处理它。

这是我为此撰写的博客文章：https://liquidonate.com/blog/shopify-development-hacks-environment-variable-in-checkout-ui-extension