Hostname env.HOST not_defined

[anastis]

The HOST environmental variable is null when running npm run dev on some systems.

I can't for the life of me figure out why it happens, but it only happens on some systems, and when it happens, it always happens consistently on those systems.

shopify-app-template-php/web/app/Providers/AppServiceProvider.php

Line 37 in f3d8e9f

$host = str_replace('https://', '', env('HOST', 'not_defined'));

As a result, the laravel app doesn't really work at all and the app inside shopify doesn't show anything.

I've followed the instructions to the letter in 3 macOs and 5 or 6 linux installations, with the latest node and php versions. It only worked in 1 mac and 1 linux instance.
The same exact project files also only work on these installations.

The iframe src inside shopify points to the new tunnel address, however the page itself is errored and invisible.

I'm really new to both Laravel and node/vite, so I can't really figure out where or why things are going wrong.

Works in:
Mac VM (UTM)
Debian (Parallels)

Doesn't work in:
Mac (baremetal)
Mac VM (Parallels)
Debian (UTM)
Fedora (Parallels)

All VMs were vanilla installations and had shared networking with the base M1 Pro machine.

Any help or ideas on how I could go abount hunting this issue down, would be greatly appreciated.

[nemwiper]

I have this problem too. It started some weeks ago on two of my development macs.
I tried on a windows and it worked.
The only workaround I found is to manually set the variables in the .env file of the Laravel installation:

HOST=(the cloudflare one)
SHOPIFY_API_KEY=
SHOPIFY_API_SECRET=
SCOPES=(your scopes)

It's a little inconvenient because you have to update the HOST variable every time you run the dev script.

I sense there is something in the development environment, like node version, etc.
My system:

macOS Ventura (13.5.1)
node: 20.5.1

[anastis]

Thank you for confirming I'm not crazy! It's been driving me nuts!

Did you find a faster way to get the tunnel name while npm run dev is running?
Sometimes the toml file is not getting updated, and the only way to get it is to inspect the iframe's src attribute.

[nemwiper]

With yarn you have the --verbose parameter, you can look for the url in the log

[cthom-dev]

@nemwiper Thanks for the info, I'm experiencing same issue on Mac, node v18, your fix helped me. Any idea why the environment variables are not available when running npm run dev?