App dev with remix template - Best way to process incoming data from the client?

Retired Boards Appdev Extensions
6

The URL you will be using in production to access the route will be the domain that you have set up for the app. So it could be ‘https://myappurl.com/route/data’ for example. This is if I understand you correctly.

For local development, I run a tunnel that points to the app. This way you don’t have to keep changing the app URL each time you restart the app during development. I have setup a cloudflare tunnel and I launch it with their CLI.

You have to define a couple of things in the TOML files for this to work…

shopify.web.toml: You’ll need to define the port for the app to use

name = "remix"
roles = ["frontend", "backend"]
webhooks_path = "/webhooks"
port = 8001

[commands]
dev = "npm exec remix dev"

[hmr_server]
http_paths = ["/ping"]

shopify.app.toml: Assign the tunnel URL to the application_url and the redirect_urls

# Learn more about configuring your app at https://shopify.dev/docs/apps/tools/cli/configuration

name = "postgres-starter"
client_id = "****"
application_url = "https://your-tunnel-url.com"
embedded = true

[access_scopes]
# Learn more at https://shopify.dev/docs/apps/tools/cli/configuration#access_scopes
scopes = "write_products"

[auth]
redirect_urls = [
  "https://your-tunnel-url.com/auth/callback",
  "https://your-tunnel-url.com/auth/shopify/callback",
  "https://your-tunnel-url.com/api/auth/callback"
]

[webhooks]
api_version = "2023-10"

[pos]
embedded = false

[build]
automatically_update_urls_on_dev = true
dev_store_url = "storename.myshopify.com"

I think you also need to update/check the URL in the app settings of the partner dashboard, and also within the app settings of the shopify admin (it’s the Shopify App Proxy URL). I cant remember if these get updated automatically or not.

If you wanted to have the URL different in production and local development, you could use an ENV file where you set your development environment (dev/production). Your app would then set the appropriate URL depending on the environment. I usually use a ternary operator along the lines of:

const URL = process.env.ENVIRONMENT === 'dev' ? 'https://devurl.com' : 'https://produrl.com'

^^ This way, if you haven’t defined the environment variable, it will fallback to the production URL.

Having said that (the environment variable idea), it only works in a node environment - it won’t work in a browser. To get around it in a browser, I use a ternary operator and check the contents of the URL (it may contain 127.0.0.1 if you’re devloping a theme locally, for example).