How to refer web api url in checkout ui extension?

Extensions
1

When you use shopify-app-remix-template that contain a web app and checkout ui extension, how to use web app url in checkout ui extension.

.
├── app
│   └─── routes
│       └── api.awesome-logic.tsx
├── extensions
│       ├── src
│       │   ├── Checkout.tsx
└── .....
  • web app has api endpoint to handle business logic
  • checkout ui extension use that api
  • but web app url will change based on environment
    • local → cloudflare tunneling url
    • production → hosting service url or custom domain
const url = `${.....}/api/awesome-logic`
2

You can use APP_URL environment variable for it.

const url = `${process.env.APP_URL}/api/awesome-logic`

It’s set through checkout ui extension build process so that the url will be cloudflare tunneling url in local and hosting url in production.

3

Glad you figured this out Tomoyuki - thanks for posting your solution.

1 Like
4

For those who built their apps pre-Remix or are not using JS for their app backends, I’ve solved this problem with a CLI tool that will automatically inject environment variables like your API’s URL:

1 Like