[Bug]: Run dev app for Shopify

sebastianpisula commented 1 year ago

Please confirm that you have:

[X] Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
[X] Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

App

Expected behavior

My app should be open

Actual behavior

In web directory I removed Laravel app and I try to configure Symfony app. I added files to directory and I changed web/shopify.web.toml file like this:

type="backend"

[commands]
dev = "symfony server:start"

I use command npm run dev and url doesn't works.

Stack trace

user my-app % npm run dev                                       

> my-app@1.0.0 dev
> shopify app dev

╭─ info ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                                              │
│  Using your previous dev settings:                                                                                                           │
│                                                                                                                                              │
│    • Org:          Sebastian Pisula                                                                                                          │
│    • App:          App Name                                                                                                                  │
│    • Dev store:    dev-store-url.myshopify.com                                                                                               │
│    • Update URLs:  Always                                                                                                                    │
│                                                                                                                                              │
│  To reset your default dev config, run `npm run dev -- --reset`                                                                              │
│                                                                                                                                              │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

2023-03-06 18:10:48 | backend  | Following Web Server log file (.symfony5/log/1d0d2d9aa33f17d1fcb7886affad2976ec14c044.log)
2023-03-06 18:10:48 | backend  | Following PHP-FPM log file (.symfony5/log/1d0d2d9aa33f17d1fcb7886affad2976ec14c044/53fb8ec204547646acb3461995e4da5a54cc7575.log)
2023-03-06 18:10:48 | frontend |
2023-03-06 18:10:48 | frontend | > dev
2023-03-06 18:10:48 | frontend | > vite
2023-03-06 18:10:48 | frontend |
2023-03-06 18:10:48 | frontend |
2023-03-06 18:10:48 | frontend |   vite v2.9.15 dev server running at:
2023-03-06 18:10:48 | frontend |
2023-03-06 18:10:48 | frontend |   > Local:    http://localhost:65388/
2023-03-06 18:10:48 | frontend |   > Network:  http://192.168.0.25:65388/
2023-03-06 18:10:48 | frontend |
2023-03-06 18:10:48 | frontend |   ready in 205ms.
2023-03-06 18:10:48 | frontend |
2023-03-06 18:10:50 | backend  |                                                                                 
2023-03-06 18:10:50 | backend  |  [WARNING] The local web server is optimized for local development and MUST ne  
2023-03-06 18:10:50 | backend  |  ver be used in a production setup.                                             
2023-03-06 18:10:50 | backend  |                                                                                 
2023-03-06 18:10:50 | backend  |
2023-03-06 18:10:50 | backend  |                                                                                 
2023-03-06 18:10:50 | backend  |  [OK] Web server listening                                                      
2023-03-06 18:10:50 | backend  |       The Web server is using PHP FPM 8.1.16                                    
2023-03-06 18:10:50 | backend  |       https://127.0.0.1:8000                                                    
2023-03-06 18:10:50 | backend  |                                                                                 
2023-03-06 18:10:50 | backend  |
2023-03-06 18:10:50 | backend  | [Web Server ] Mar  6 19:10:48 |DEBUG  | PHP    Reloading PHP versions 
2023-03-06 18:10:50 | backend  | [Web Server ] Mar  6 19:10:48 |DEBUG  | PHP    Using PHP version 8.1.16 (from default version in $PATH) 
2023-03-06 18:10:50 | backend  | [Application] Mar  6 08:02:24 |DEBUG  | DOCTRI Committing transaction 
2023-03-06 18:10:50 | backend  | [Application] Mar  6 08:02:24 |INFO   | DOCTRI Disconnecting 
2023-03-06 18:10:50 | backend  | [Application] Mar  6 08:02:25 |INFO   | REQUES Matched route "app_auth". method="GET" request_uri="https://127.0.0.1:8000/auth" route="app_auth" 
                                 route_parameters={"_controller":"App\\Controller\\AuthController::index","_route":"app_auth"}
2023-03-06 18:10:50 | backend  | [Application] Mar  6 08:02:25 |DEBUG  | SECURI Checking for authenticator support. authenticators=0 firewall_name="main"
2023-03-06 18:10:50 | backend  | [Application] Mar  6 08:02:25 |INFO   | DOCTRI Connecting with parameters array{"url":"<redacted>","driver":"pdo_mysql","host":"127.0.0.1","port":3306,"user":"root","password":"<redacted>","driverOptions":[],"default
                                 TableOptions":[],"dbname":"app","serverVersion":"mariadb-10.10.2","charset":"utf8mb4"} params={"charset":"utf8mb4","dbname":"app","defaultTableOptions":[],"driver":"pdo_mysql","driverOptions":[],"host":"127.0.0.1","p
                                 assword":"\u003credacted\u003e","port":3306,"serverVersion":"mariadb-10.10.2","url":"\u003credacted\u003e","user":"root"}
2023-03-06 18:10:50 | backend  | [Application] Mar  6 08:02:25 |DEBUG  | DOCTRI Executing statement: SELECT t0.id AS id_1, t0.session_id AS session_id_2, t0.shop AS shop_3, t0.is_online AS is_online_4, t0.state AS state_5, t0.scope AS scope_6, 
                                 t0.access_token AS access_token_7, t0.expires_at AS expires_at_8 FROM session t0 WHERE t0.access_token = ? (parameters: array{"1":""}, types: array{"1":2}) params={"1":""} sql="SELECT t0.id AS id_1, t0.session_id AS 
                                 session_id_2, t0.shop AS shop_3, t0.is_online AS is_online_4, t0.state AS state_5, t0.scope AS scope_6, t0.access_token AS access_token_7, t0.expires_at AS expires_at_8 FROM session t0 WHERE t0.access_token = ?" 
                                 types={"1":2}
2023-03-06 18:10:50 | backend  | [Application] Mar  6 08:02:25 |INFO   | DOCTRI Disconnecting 
2023-03-06 18:10:50 | backend  | [Application] Mar  6 18:09:23 |INFO   | REQUES Matched route "app_fallback". method="GET" request_uri="https://127.0.0.1:8000/" route="app_fallback" 
                                 route_parameters={"_controller":"App\\Controller\\FallbackController::index","_route":"app_fallback"}
2023-03-06 18:10:50 | backend  | [Application] Mar  6 18:09:23 |DEBUG  | SECURI Checking for authenticator support. authenticators=0 firewall_name="main"
2023-03-06 18:10:50 | backend  | [Application] Mar  6 18:09:23 |INFO   | REQUES Matched route "_wdt". method="GET" request_uri="https://127.0.0.1:8000/_wdt/56bc0a" route="_wdt" 
                                 route_parameters={"_controller":"web_profiler.controller.profiler::toolbarAction","_route":"_wdt","token":"56bc0a"}
2023-03-06 18:10:50 | backend  | [Web Server ] Mar  6 19:10:48 |INFO   | PHP    listening path="/opt/homebrew/Cellar/php@8.1/8.1.16/sbin/php-fpm" php="8.1.16" port=65389
2023-03-06 18:10:50 | backend  | [PHP-FPM    ] Cannot load Xdebug - it was already loaded
2023-03-06 18:10:50 | backend  | [PHP-FPM    ] Mar  6 19:10:48 |NOTICE | FPM    fpm is running, pid 77118 
2023-03-06 18:10:50 | backend  | [PHP-FPM    ] Mar  6 19:10:48 |NOTICE | FPM    ready to handle connections 
2023-03-06 18:13:49 | frontend | 7:13:49b/PM [vite] http proxy error:
2023-03-06 18:13:49 | frontend | Error: connect ECONNREFUSED 127.0.0.1:65384
2023-03-06 18:13:49 | frontend |     at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16)

  Press `p` to open your browser. Press `q` to quit.                                                                                                                                                                     

Preview URL: https://6abe-62-122-117-84.ngrok.io?shop=....myshopify.com&host=...

Reproduction steps

1. 2. 3.

Operating System

MacOS Ventura

Shopify CLI version (check your project's `package.json` if you're not sure)

3.44.1

Shell

zsh

Node version (run `node -v` if you're not sure)

19.7.0

What language and version are you using in your application?

PHP 8.1

alvaro-shopify commented 1 year ago

Hi @sebastianpisula. Thanks for bringing up this issue. The template used to create the application configures vite in the frontend to redirect the requests to the backend https://github.com/Shopify/shopify-frontend-template-react/blob/f720a83458f3e83db4f2b5e85644345fc658cd32/vite.config.js#L54:L61

When you run the app using the CLI, there are some env variables set when the backend and frontend processes are run. PORT, SERVER_PORT, BACKEND_PORT You should configure symfony to run the http server listening to one of those three env variables.

In your logs the CLI has run the backend using the random port 65384 and the symfony server seems to run using the port 8000 by default. That's the reason you can see the error

2023-03-06 18:13:49 | frontend | 7:13:49b/PM [vite] http proxy error:
2023-03-06 18:13:49 | frontend | Error: connect ECONNREFUSED 127.0.0.1:65384
2023-03-06 18:13:49 | frontend |     at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16)

I don't know anything about symfony but maybe configuring the toml like this could do the trick `dev = "symfony server:start --port=${PORT}"

Please, let me know if this works for you.

sebastianpisula commented 1 year ago

Thanks, great idea but I have errors:

── external error ──────────────────────────────────────────────────────────────

Error coming from `symfony server:start --port=${PORT}`

Command failed with exit code 1: symfony server:start --port=${PORT}

  Incorrect usage: invalid value "${PORT}" for flag -port: parse error  

Description:
  Run a local web server

Usage:
  symfony local:server:start [options]

Options:
  --dir=value               Project directory
  --allow-http              Prevent auto-redirection from HTTP to HTTPS
  --document-root=value     Project document root (auto-configured by default)
  --passthru=value          Project passthru index (auto-configured by default)
  --port=value              Preferred HTTP port [default: 8000]
  --daemon, -d              Run the server in the background
  --no-humanize             Do not format JSON logs
  --p12=value               Name of the file containing the TLS certificate to
use in p12 format
  --no-tls                  Use HTTP instead of HTTPS
  --use-gzip                Use GZIP
  --tls-key-log-file=value  Destination for TLS master secrets in NSS key log
format [$SSLKEYLOGFILE]
  --help, -h                Show help

Help:

  The local web server is optimized for local development and MUST never be used
 in a production setup.

────────────────────────────────────────────────────────────────────────────────

sebastianpisula commented 1 year ago

I modified web/frontend/vite.config.js and I changed line #17 from:

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

to:

  target: `http://127.0.0.1:8000`,

and in tome file without port:

dev = "symfony server:start"

and works!

But I not sure that hardcoded proxy is good way. What you think ?

alvaro-shopify commented 1 year ago

@sebastianpisula , sorry for the wrong tip. I don't know anything about how symfony sets the port, you should do a little research and set it to one of the three env variables PORT, SERVER_PORT, BACKEND_PORT

That temporary solution is going to work but it's specific for your scenario. Using the env variable it's the only way to have a generic solution

nelsonwittwer commented 1 year ago

Closing as it sounds like this was a specific config issue. Feel free to re-open with more context if this affects more use cases. Thank you!

Shopify / cli