I need to set up my first Shopify App, in order to create a simple Express.js API who can make GraphQL request to modify a custom metafield value from storefront.
I’m stuck at the beginning : set up my app dev environment.
Because this is a really simple app project, I’ve used this Shopify-app-template-node and for now I’m just trying to run npm run dev and going to the app preview page. When I do this, nothing happens on my web browser, but console show many Error forwarding web request: AggregateError errors messages. I would expect to see the application’s basic home page instead of this strange error.
How can this problem be solved?
Some additional information:
- My
web/index.jsandweb/shopify.jsfiles are currently identical to the repo version - I need to expose three endpoints, but for now I just want to correctly run the basic version of the app
- The error
Error forwarding web request: AggregateErroronly appears if I visit the preview page - I tried
npm installin the./,./weband./web/frontenddirectories, and my shopify CLI is in LATEST (@shopify/cli/3.67.1)
Here is the complete log, just after launching npm run dev command :
> [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
This is just a Node version problem, using Node 18.20 solve this error.
Use NVM to change your local Node version :
nvm install 18.20
nvm use 18.20
Then install the Shopify CLI globally :
npm install -g @shopify/cli@latest
After that, you can check CLI and Node version with shopify --version command. For now, I get @shopify/cli/3.67.1 win32-x64 node-v18.20.4
With this version, using npm run dev and accessing the Shopify App Preview perfectly works.