saleor checkout app with error: connect ECONNREFUSED 127.0.0.1:443

Question

I've been trying to setup the checkout app for some days now, using the saleor-platform, went over the steps to run the project and I have everything running, and I've imported the app with ngrok and saleor app tunnel 3001 but with both I get

saleor-app-checkout          | saleor-app-checkout:start: { 'req.headers.origin': undefined }
saleor-app-checkout          | saleor-app-checkout:start: Error: connect ECONNREFUSED 127.0.0.1:443
saleor-app-checkout          | saleor-app-checkout:start:     at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1278:16)
saleor-app-checkout          | saleor-app-checkout:start:     at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
saleor-app-checkout          | saleor-app-checkout:start:   errno: -111,
saleor-app-checkout          | saleor-app-checkout:start:   code: 'ECONNREFUSED',
saleor-app-checkout          | saleor-app-checkout:start:   syscall: 'connect',
saleor-app-checkout          | saleor-app-checkout:start:   address: '127.0.0.1',
saleor-app-checkout          | saleor-app-checkout:start:   port: 443
saleor-app-checkout          | saleor-app-checkout:start: }

when I go into the Settings page in the checkout app, aka. here

The only env variable I've played around chaning is this one(what should the env variable be here for local development?). I've also tried setting up the .auth_token file with the checkout app token but this didn't fix my issue.

Answer 1

I'm Jonatan, one of the contributors of this react-storefront. For local development, you'd need to tunnel both:

• the app saleor-app-checkout (like you did by using our CLI tool: saleor app tunnel 3001)
• your local Saleor instance (you could use ngrok for that: ngrok http 8000)

Once both the app and Saleor are accessible from the Internet, you'll have to:

1. Change the SALEOR_API_URL env variable inside the .env file to the URL of your tunneled Saleor instance (e.g. https://1234.eu.ngrok.io/graphql/)
2. Update ALLOWED_HOSTS env variable in Saleor to include ngrok tunnel URL. In case of saleor-platfrom you'd have to update the docker-compose.yaml file. It would look something like this:

services:
  api:
    # ...
    environment:
      - JAEGER_AGENT_HOST=jaeger
      - STOREFRONT_URL=http://localhost:3000/
      - DASHBOARD_URL=http://localhost:9000/
      - ALLOWED_HOSTS=localhost,api,1234.eu.ngrok.io # <-- add tunnel domain here

When you do all that, restart both the app in react-storefront repository (npm run dev) and Saleor in Docker Compose (docker compose down && docker compose up -d api worker).

If you don't want to deal with creating a local Saleor instance, you could create a free sandbox instance in Saleor Cloud instead:

saleor storefront create --demo

In case you have more issues with the app, please refer to the documentation inside the repository or create a new issue on GitHub.

Answer 2

Saleor is a open source project, it is a good idea to raise issue on github to seek advice from contributors