[FIXED] How to make API request in a Shopify private APP

Issue

So I'm developing a private app in Shopify using node.js and react, so far it's just a form that submits new products to the store, pretty simple, the thing that I have realized is that the Admin API from Shopify won't let me make request as a private app, or so thats what I understand from it, apparently the solution has to do with setting up a back-end server, which I'm at a loss because I quickstarted the app with the Shopify CLI and sets up a ngrok tunnel server for you, I'm unsure if I would need to set up another one or what to do next. its scaffolded with this process: https://shopify.dev/apps/getting-started/create

This article describes the perfect solution but they don't go into details about it so that's why I'm comming here:https://metafieldsmanager.thebestagency.com/articles/how-to-build-a-private-app

Code:

AddProductForm.js

let headers = {'X-Shopify-Access-Token': 'access token',
'host': 'store-example.myshopify.com', 
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*'
}

let baseUrl = 'https://store-example.myshopify.com/admin/api/2021-07/'

Right now I'm just attempting a simple fetch request.

let handleSubmit = () => {  
        let toAdd = {
            product:{
                title: title,
                body_html: bodyHtml,
                vendor: vendor,
            }

        }
        console.log(baseUrl + 'products.json')
        fetch(baseUrl + 'products.json', {  
            headers:  headers
        }).then(res=>console.log(res))

I've omitted the rest of the code to keep it simple but its pretty much basic JSX and form handling.

Solution

After a while of dealing with Shopify apps, you DO need another server that has some https configuration or tunnel it with Ngrok, that server needs to call Shopify api instead of your front-end and then the app that the Shopify CLI scaffolds for you has to call that server.

Answered By - Santiago

Answer Checked By - David Marino (PHPFixing Volunteer)