Shopify/shopify-app-template-node

[vite] http proxy error at

Opened this issue · 8 comments

omri-luz commented

I have an issue when running all my apps, it looks like this

15:49:19 │ web-frontend │ 3:49:19 PM [vite] http proxy error at /?embedded=1&hmac=c2871f2f343c9b90c85dcf7a648380bca74b6dbf0235aa86a4439b6859f039
c7&host=YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUvb21yaS10ZXN0LXN0b3Jl&id_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJodHRwczpcL1wvb21yaS10ZXN0L
XN0b3JlLm15c2hvcGlmeS5jb21cL2FkbWluIiwiZGVzdCI6Imh0dHBzOlwvXC9vbXJpLXRlc3Qtc3RvcmUubXlzaG9waWZ5LmNvbSIsImF1ZCI6IjU5NzJmNTM1MTljZThkMjMwZmU2MzYyO
TQwNTM1YjVjIiwic3ViIjoiOTIwMjc0ODY0NTMiLCJleHAiOjE3Mjg4MjM4MTYsIm5iZiI6MTcyODgyMzc1NiwiaWF0IjoxNzI4ODIzNzU2LCJqdGkiOiI4MWFhN2NmMy0wODkwLTRmODctY
mYwMS0yYTViYjFkODhlZGMiLCJzaWQiOiIzNTRhMzViMy05MTk5LTQzNDUtOGQzMy05MGRmYzdjOGE5OWMiLCJzaWciOiI5NGZmZDdiNzMxYmU5OTUwYTNlNDg1ZGMzODUyNjZlNjRlMTdlY
2NlOWY3OTEyYzg4MTQ0NWM4OGU0ZDMwNWIxIn0.v9tJ7LWfMe1LqCVtjjk9It054JQKkqTE2yUg0TMQ5f4&locale=en&session=b8b0736a4a2cf2bbbf33fc469126ece3639336f6d7d
a116cabc1455b5c22ccad&shop=my-test-store.myshopify.com&timestamp=1728823756:
15:49:19 │ web-frontend │ Error: connect ECONNREFUSED 127.0.0.1:53700

I tried to upgrade my shopify app express package, I tried to play with the proxy definitions in my vite config, nothing worked, If you know a solution much appreciated, Adding my vite.config file here.

import { HmrOptions, defineConfig } from 'vite';
import { dirname } from 'path';
import { fileURLToPath } from 'url';
import react from '@vitejs/plugin-react';
import replaceShopifyApiKey from './plugins/replace-shopify-api-key';

if (
	process.env.npm_lifecycle_event === 'build' &&
	!process.env.CI &&
	!process.env.SHOPIFY_API_KEY
) {
	throw new Error(
		'\n\nThe frontend build will not work without an API key. Set the SHOPIFY_API_KEY environment variable when running the build command, for example:' +
			'\n\nSHOPIFY_API_KEY=<your-api-key> npm run build\n'
	);
}

const proxyOptions = {
	target: `http://127.0.0.1:${process.env.BACKEND_PORT}`,
	changeOrigin: false,
	secure: true,
	ws: false,
};

const host = process.env.HOST ? process.env.HOST.replace(/https?:\/\//, '') : 'localhost';

let hmrConfig: HmrOptions;
if (host === 'localhost') {
	hmrConfig = {
		protocol: 'ws',
		host: 'localhost',
		port: 64999,
		clientPort: 64999,
	};
} else {
	hmrConfig = {
		protocol: 'wss',
		host: host,
		port: Number(process.env.FRONTEND_PORT),
		clientPort: 443,
	};
}

export default defineConfig({
	root: dirname(fileURLToPath(import.meta.url)),
	plugins: [react(), replaceShopifyApiKey()],
	resolve: {
		preserveSymlinks: true,
	},
	server: {
		host: 'localhost',
		port: Number(process.env.FRONTEND_PORT),
		hmr: hmrConfig,
		proxy: {
			'^/(\\?.*)?$': proxyOptions,
			'^/api(/|(\\?.*)?$)': proxyOptions,
		},
	},
});
matteodepalo commented

Hi @omri-luz, thank you for opening this issue. Are you using docker? What's you're version of node?

omri-luz commented

Hey @matteodepalo my node version is v20.16.0 and no im not using docker

matteodepalo commented

Could you try updating node to v22?

omri-luz commented

I will try, Would be hard to report back if it works since its a bit inconsistent, so I'll report back if it doesn't 😅

omri-luz commented

@matteodepalo I have issues upgrading since im using some packages that are deprecated in node v22, im still not sure that the issue is actually that.

DanielRashi commented

i have what seems to be the same issue, when accessing the front it shows the proxy error,
i think it starts when saving a change (not necessarily the first time but could be after few saves ),
and the console outputs 'restarting'
which gets stuck with the message 'Process didn't exit in 5s. Force killing'
then i usually shut down the server (ctrl + c), and starts again.
sometimes the restart helps, but sometimes (more then others) it just outputs the server as running but nothing works as expected.

morshadunnur commented

Hello @omri-luz
Just replace this proxyOptions settings -

const proxyOptions = {

target: "http://127.0.0.1:${process.env.BACKEND_PORT}",

changeOrigin: true,

secure: false, // Set to false if using HTTP

ws: false,

};

proxy: { "/api": proxyOptions, "/auth": proxyOptions, },

Your http proxy error in frontend won't arise. And don't forget to ad Shopify Api Key and .env file.

adtm commented 
# .toml
[app_proxy]
url = ".../secret-proxy-counter"
subpath = "proxy"
prefix = "tools"

you also need to add proxy URL in proxy object in vite.config:

proxy: {
  ....
  "^/secret-proxy-counter(/|(\\?.*)?$)": proxyOptions,
},

at least this works for me