Definitive set up guide for the Shopfront API : webpack / node / js

Technical Q&A
1

Hi shopifiers, first time caller long time listener.

I have been struggling for two days now to get the Shopify Storefront API set up locally, so that I can start making calls to it. Is there a definitive guide somewhere that I am missing?

Most of the battles so far have been Webpack related (of course) and I have now got through those to see that it looks like Shopify is also a problem, perhaps even just instantiating the client.

I’m using Webpack 5, Node / npm. I have installed and imported the package as below. I have set up the Headless app in my Shopify store, but still getting this:

Uncaught (in promise) ReferenceError: shopify is not defined
    e http://127.0.0.1:5500/dist/imageTick.bundle.js:2
    l http://127.0.0.1:5500/dist/imageTick.bundle.js:2
    S http://127.0.0.1:5500/dist/imageTick.bundle.js:2
    M http://127.0.0.1:5500/dist/imageTick.bundle.js:2
    n http://127.0.0.1:5500/dist/imageTick.bundle.js:2
    a http://127.0.0.1:5500/dist/imageTick.bundle.js:2
    o http://127.0.0.1:5500/dist/imageTick.bundle.js:2
    o http://127.0.0.1:5500/dist/imageTick.bundle.js:2
    s http://127.0.0.1:5500/dist/imageTick.bundle.js:2
    <anonymous> http://127.0.0.1:5500/dist/imageTick.bundle.js:2
    <anonymous> http://127.0.0.1:5500/dist/imageTick.bundle.js:2
    <anonymous> http://127.0.0.1:5500/dist/main.bundle.js:2
    promise callback* http://127.0.0.1:5500/dist/main.bundle.js:2
    EventListener.handleEvent* http://127.0.0.1:5500/dist/main.bundle.js:2
    <anonymous> http://127.0.0.1:5500/dist/main.bundle.js:2
    <anonymous> http://127.0.0.1:5500/dist/main.bundle.js:2
imageTick.bundle.js:2:772893

My shopify related code is below. Webpack output shows 4 warnings, but they’re relating to code spitting. It shows no errors. Happy to show the config, but that doesn’t seem to be causing any more problems. It’s just seemingly like I have forgotten to import something. If anyone can steer me in the right direction, I would be very grateful!

'use strict'
import '@shopify/shopify-api/adapters/node'
import {
  shopifyApi,
  LATEST_API_VERSION,
  ApiVersion,
} from '@shopify/shopify-api'
// import { request } from 'graphql-request'

// Wait for the DOM to be ready
document.addEventListener('onContentfulDataLoaded', function (event) {
  const data = event.detail
  initializeProducts(data.homePage)
})

async function initializeProducts(homePage) {
  //   getting an encode blurb from contentful
  const shopifyId = homePage.content.fields.heroProduct
  // Load the access token and private key
  const storefrontAccessToken = process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN
  const prKey = process.env.SHOPIFY_PRIVATE_TOKEN
  // Shop from which we're fetching data
  const shop = process.env.SHOPIFY_BASE_URL
  
// directly from : https://shopify.dev/docs/api/storefront#development_frameworks_and_sdks
  const adminApiClient = new shopify.clients.Rest({ session })
  const storefrontTokenResponse = await adminApiClient.post({
    path: storefrontAccessToken,
    type: DataType.JSON,
    data: {
      storefront_access_token: {
        title: 'This is my test access token',
      },
    },
  })
...
}