[vite] http proxy error at #1342
Description
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×tamp=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,
},
},
});