How do I set the app proxy URL for a Shopify app?

[Keem98]

I understand that I need to set up an app proxy to make requests to my Postgres DB and for the app-extensions. However, I keep getting 404 errors for a bad URI - I'm not understanding how to do this properly.

All I want to do is post to Postgres (on Heroku) by making a frontend call to my API. The app-proxy config is attached below.

I'm trying to make an authenticaed call via useFetch() hook in merchant.tsx:

merchant.tsx:

const BASE_URL = "/apps/my-app-proxy";
const postBody = {
  id: 1,
  name: "Test",
  account: "0x.....",
  campaign_id: 1,
};

useFetch(`${BASE_URL}/api/merchant/`, {
        headers: {
          "Content-Type": "application.json",
          "Access-Control-Allow-Origin": "*",
        },
        body: JSON.stringify(postBody),
        method: "POST",
      }).then((res) => {
        console.log("POST merchant: ", res);
      });

The useFetch response returns as a 404, so the URL is wrong.
The App proxy config I am using:

The endpoints in merchant.ts are NOT being hit.  So how do I actually call the proxy url to reach my endpoints?

The files in the server folder are:

index.ts:

app.use("/api/merchant", merchantRouter);

merchant.ts:

import express from "express";
import { Merchant } from "../models/Models";
const router = express.Router();
// NOTE: These routes deal with all merchant requests

// TODO: connect database to shopify
// Authentication to prevent aanyone from calling
// or already done by shopify?
router.post("/", async (req, res) => {
    try {
        // TODO: check if merchant already exsits (shopify acc/email?)
        console.log('MERCHANT ENDPOINT')
        const merchant = req.body;
        await Merchant.create(merchant);
        res.json(merchant);
    } catch (e) {
        console.error('ERROR: ', e);
    }
})

router.get("/", async (req, res) => {
  try {
    console.log('GET MERCHANTS called ', req)
    const merchants = await Merchant.findAll();
    res.json(merchants);
  } catch (e) {
    console.error("ERROR: ", e);
  }
});

router.get("/:id", async (req, res) => {
  try {
    const id = req.params.id;
    const merchant = await Merchant.findByPk(id);
    res.json(merchant);
  } catch (e) {
    console.error("Error: ", e);
  }
});

export default router;

[Keem98]

I understand that this question has been asked in different situations, but I am genuinely confused on why my request is not going through.

I have tried calling the storefront directly, thinking it would route to my proxy URL like the documentation states: https://shopify.dev/apps/online-store/app-proxies but I just get a CORS error...

[diego-navarro]

Hello, did you find a solution? I have the same problem.

[Keem98]

Hey Diego, my 'solution' was not to call the app-proxy URL at all.

So literally my api call is just https://xxx.ngrok.io/api-route - don't even bother with the proxy URL. I can finally call the backend to my Heroku hosted Postgres database. 

If someone can let me know if this is DANGEROUS or WRONG, please be my guest!

[diego-navarro]

Thank you, I think i will follow the same path.

If you call your API with sensitive information, of course that is not safe. Also, if you want to prevent some bad intentioned hacker to call many times to yor API, you could add security checks in your API to verify the origin of the request.

[LitzySimmons]

You need to go to the Shopify Partner Dashboard and navigate to the app for which you want to set up the proxy. Click on the "App Settings" tab. Enter the URL for your proxy server in the "URL" field and save the changes. Test the proxy by visiting the app proxy URL in your browser. If it doesn't work, you may try with another proxies. Those from shiftproxy.io never caused me any trouble. It's essential to note that the URL you enter must be publicly accessible and correctly formatted. If you're still encountering 404 errors, double-check that the URL and path are correct. Hope I helped.

[joseph-dc]

[Charles_Roberts]

OK. This issue has nothing to do with PostgreSQL or Heroku. This is purely a Shopify issue. 100%

You should point the proxy at a Remix route, so, for example:

app/routes folder:

app.api.jsx

Then the App Proxy URL would be:

https://mydomain.trycloudflare.com/app/api

Then your fetch() URL would be like:

/subpath_prefix/subpath

Which would actually  be:

/apps/api

Note that, you don't have to add the domain part of the URL, in the fetch() URL param.

Please remember that form POST requests, hit the:

Remix action() method

And GET requests, hit the:

Remix loader() method

[iffikhan30]

Brother you are wrong page this question related to node express module, how to use app proxy using express! and you answer remix.

[Charles_Roberts]

Fair point, but the part about mapping the app proxy, created in the Shopify GUI, should help. 

What I was trying to get at, is that:

app.api.jsx

Equates to:

/apps/api

So, in NodeJs terms this would be:

app.use("/apps/api", merchantRouter);

[navii05]

You just have to uninstall and install your development app in the Partners Dashboard 
This did the trick for me

[iffikhan30]

please confirm me you talking about the node express, not remix, If you successfully done app proxy issue using just uninstalled and then install app please clear?