如何正确设置Shopify应用节点模板？

Question

我需要设置我的第一个 Shopify 应用程序，以便创建一个简单的

Express.js

API，该 API 可以发出 GraphQL 请求以修改店面中的自定义元字段值。 我被困在一开始：设置我的应用程序开发环境。

因为这是一个非常简单的应用程序项目，所以我使用了这个 Shopify-app-template-node，现在我只是尝试运行

npm run dev

并转到应用程序预览页面。当我这样做时，我的网络浏览器上没有任何反应，但控制台显示许多

Error forwarding web request: AggregateError

错误消息。我希望看到应用程序的基本主页而不是这个奇怪的错误。

这个问题如何解决？

一些附加信息：

• 我的

  web/index.js

  和

  web/shopify.js

  文件目前与存储库版本相同
• 我需要公开三个端点，但现在我只想正确运行应用程序的基本版本
• 错误

  Error forwarding web request: AggregateError

  仅在我访问预览页面时出现
• 我在

  npm install

  、

  ./

  和

  ./web

  目录中尝试了

  ./web/frontend

  ，我的 Shopify CLI 处于最新版本 (

  @shopify/cli/3.67.1

  )

这是启动

npm run dev

命令后的完整日志：

> [email protected] dev
> shopify app dev


╭─ info ─────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                    │
│  Using shopify.app.toml for default values:                                                        │
│                                                                                                    │
│    • Org:             dev                                                                          │
│    • App:             mj-wishlist-app [local]                                                      │
│    • Dev store:       xxxx.myshopify.com                                                           │
│    • Update URLs:     Yes                                                                          │
│                                                                                                    │
│   You can pass  `--reset`  to your command to reset your app configuration.                        │
│                                                                                                    │
╰────────────────────────────────────────────────────────────────────────────────────────────────────╯


15:12:49 │      graphiql │ GraphiQL server started on port 3457
15:12:50 │   web-backend │
15:12:50 │   web-backend │ > [email protected] dev
15:12:50 │   web-backend │ > cross-env NODE_ENV=development nodemon index.js --ignore ./frontend
15:12:50 │   web-backend │
15:12:50 │  web-frontend │
15:12:50 │  web-frontend │ > [email protected] dev
15:12:50 │  web-frontend │ > vite
15:12:50 │  web-frontend │
15:12:51 │  web-frontend │
15:12:51 │  web-frontend │   VITE v5.4.7  ready in 414 ms
15:12:51 │  web-frontend │
15:12:51 │  web-frontend │   ➜  Local:   http://localhost:49717/
15:12:51 │   web-backend │ [nodemon] 2.0.22
15:12:51 │   web-backend │ [nodemon] to restart at any time, enter `rs`
15:12:51 │   web-backend │ [nodemon] watching path(s): *.*
15:12:51 │   web-backend │ [nodemon] watching extensions: js,mjs,json
15:12:51 │   web-backend │ [nodemon] starting `node index.js`
15:12:52 │   web-backend │ [shopify-api/INFO] version 11.4.0, environment Node v20.15.1
15:12:52 │   web-backend │ [shopify-api/INFO] Future flag lineItemBilling is disabled.
15:12:52 │   web-backend │
15:12:52 │   web-backend │   Enable this flag to use the new billing API, that supports multiple line items per plan.
15:12:52 │   web-backend │
15:12:52 │   web-backend │ [shopify-api/INFO] Future flag customerAddressDefaultFix is disabled.
15:12:52 │   web-backend │
15:12:52 │   web-backend │   Enable this flag to change the CustomerAddress classes to expose a 'is_default' property instead of 'default' when fetching
data.
15:12:52 │   web-backend │
15:12:52 │   web-backend │ [shopify-api/INFO] Future flag unstable_managedPricingSupport is disabled.
15:12:52 │   web-backend │
15:12:52 │   web-backend │   Enable this flag to support managed pricing, so apps can check for payments without needing a billing config. Learn more at
https://shopify.dev/docs/apps/launch/billing/managed-pricing
15:12:52 │   web-backend │
15:13:17 │   web-backend │ [shopify-app/INFO] Running ensureInstalledOnShop
15:13:18 │   web-backend │ [shopify-app/INFO] App is installed and ready to load | {shop: xxxxx.myshopify.com}
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError

Answer 1

这只是 Node 版本问题，使用 Node

18.20

解决这个错误。

使用 NVM 更改本地 Node 版本：

nvm install 18.20
nvm use 18.20

然后全局安装 Shopify CLI :

npm install -g @shopify/cli@latest

之后，您可以使用

shopify --version

命令检查 CLI 和 Node 版本。现在，我明白了

@shopify/cli/3.67.1 win32-x64 node-v18.20.4

在此版本中，使用

npm run dev

并访问 Shopify 应用预览可以完美运行。