Shopify / Shopify/shopify-app-template-php

vite.config.js issue with prod env (last update where localhost replaces server.host)

Open
#530 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
PHP
Stars
340
Forks
108
PR merge metrics
No merged PRs in 30d

Description

Issue summary

Using the template in order to build a custom shopify app works smoothly and deploying to render.com works mostly fine but calling /api/products/count fails with 401 if authorization is needed (i.e. where reading data from shopify session)

Expected behavior

Having the result of the product count when calling web endpoint /api/products/count

Actual behavior

401 Unauthorized (nginx log)

Steps to reproduce the problem

  1. test the app works smoothly locally (via 'shopify app dev') where it calls GET /api products/count and POST /api/products
  2. after step 1 confirmed ok: deploy in render (Dockerfile and nginx.conf double checked? yes. set env vars on render? yes)
  3. check the app is deployed correctly (static files are all 200) and any custom web endpoint (where auth is not needed) gives 200
  4. call /api/products/count (in the ProductsCard.jsx react component): the count and button will keep loading and the console will give 401 unauthorized for /api/products/count

Possible solution (tested)

we solved via modifying web/frontend/vite.config.js reverting the following update cited in the Readme:

2. Change the server.host setting in the configs to "localhost":
server: {
  host: "localhost",

with this fix (on hosting service render.com or any other service with similar issue)

#reverting to server.host for production envs
server: {
  host: "server.host"

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with web/frontend/vite.config.js and compare the production server.host setting with the README guidance; then trace the request from ProductsCard.jsx to /api/products/count and inspect nginx.conf. Done means the deployed endpoint returns the product count without 401 while local behavior remains working.

Written by the indexing model from the issue text.

Assessment

Tech stack
nginx, php, react, vite
Domain
api, devops
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.