I am having trouble getting add to cart to work on Prod

[arhoy]

Hello! Great starter, it has really help me out tremendously. I am having in issue on production of adding items to cart.

The error looks like it has to do with the POST request url containing undefined shown below in the console screenshot.

I am not sure why this is happening though. My env variables I made sure I have the same for both development and in production inside Netlify.

One thing I changed was SHOP_NAME to contain the full URL however everything in dev mode looked good

Thanks for you time!

[AlexanderProd]

It's strange that it still worked when SHOP_NAME contained the full URL. Maybe because it was still cached and you didn't restart your dev server?

Does it work fine in development when you have just the shop name as SHOP_NAME ?

[arhoy]

Hi Alexander! Thanks for your fast reply! Yes it does work in development just fine. In production https://aquasarcafe.netlify.com/ https://github.com/arhoy/aquasarcafe And inside context provider I have the following

const client = Client.buildClient({
  storefrontAccessToken: process.env.SHOPIFY_STOREFRONT_ACCESSS_TOKEN,
  domain: `${process.env.SHOP_NAME}`,
});

Should I change the context provider? I changed it because I was not sure if my domain would always contain the .myshopify. But I am not sure how it could impact anything unless some other part of the code needed to be updated too maybe?

[AlexanderProd]

Yeah domain should include the .myshopify.com part. I've never tried just using the shop name but I assume it causes problems. Do you have a reason to remove the myshopify part?

Can you try to log the SHOP_NAME env variable somewhere in the code to check if it is properly set?

Also if it does work fine in your development environment but not in the production. Maybe the .env file is not read by netlify?

[arhoy]

I have double checked Netlify and have included the store_front and the shop_name However you are correct it is not read by Netlify, If you check my URL https://aquasarcafe.netlify.com/ it is returning undefined in production.

[arhoy]

Any suggestions on what I should change in the ContextProvider? https://github.com/arhoy/aquasarcafe/blob/master/src/provider/ContextProvider.js

I also was wondering if you set your store up as a Private App or Custom App in Shopify, Bit confused on the difference atm. I understand the private App is created from the store Admin and the Custom App is created thru the Shopify Partners but It is hard to tell once you create a store if you created it thru Shopify Partners or Private as the interlace looks identical to me!

I am also not sure if it makes a difference or if it is causing the issue.

Thanks for bearing with me while a go over the docs.

[AlexanderProd]

in the ContextProvider the client should look like this.

const client = Client.buildClient({
  storefrontAccessToken: process.env.SHOPIFY_ACCESS_TOKEN,
  domain: `${process.env.SHOP_NAME}.myshopify.com`,
})

I've always used a private app but I'm not really sure about the differences to a custom app because I've never used one.

[arhoy]

Ok I will try it, I would be very surprised to see it work as the .env variable I created appends the .myshopify.com

Will let you know soon

[arhoy]

It is still undefined

[arhoy]

I suppose one thing I should ask that could be causing problem SHOP_NAME=aquasar-cafe-shop The domain of the shopify store is https://aquasar-cafe-shop.myshopify.com/

Should I include https:// in the environment variable? Again no issues in dev mode

[AlexanderProd]

No you shouldn’t need to include the https://

The problem is, netlify isn’t picking up the env variables.

You could try the following things: hard code your shop name into the ContextProvider client:

const client = Client.buildClient({
  storefrontAccessToken: process.env.SHOPIFY_ACCESS_TOKEN,
  domain: 'aquasar-cafe-shop.myshopify.com',
})

or set the env variable in the netlify dashboard. I assume there's a setting to inject env variables into the build process.

[arhoy]

Ok, I can try hard coding. There is one last thing I will try. I have the env variable set in Netlify. Just curious which platform are you using to deploy is is Netlify as well?

[arhoy]

I do not want to hard code or expose the store front access token though My other concern is that this url which has the undefined in it does not work when I replace undefined w. the appropriate store name. ie. https://aquasar-cafe-shop.myshopify.com/api/2020-01/graphql

[AlexanderProd]

The storefront access token isn't really sensitive information, it only allows to read products , everything that one could see on the site anyways. It doesn't allow any mutations. In my starter the access token to the graphql test shop is exposed as well.

I'm currently using netlify as well for deployment, but switching over to my own deploy solution JamStackBox.

[arhoy]

Ok, I see. I have hard coded and now have a 403

[arhoy]

Okay so hard coding both the values worked! Yippee. I still do not understand why that is though. Just out of curiousity do you add GATSBY_ in front of the env names?

Also what is the benefit of JamStackBox as your own vs Netlify. Is it the deploy minutes?

[AlexanderProd]

Great that it works now.

No I don't add GATSBY_ in front of the env names, mine are exactly like shown in the repo.

Yeah the benefit of using JamStackBox is that you can run it on your own infrastructure without being dependent on netlify.

[arhoy]

I see great! I have a quick question regarding the Shoppify Plan you are using? ARe you using the $9 plan or the $29+ dollar plan?

Bit confused as I thought I can use the $9 plan for clients as I am using the Shopify CMS only

Thanks again!

[AlexanderProd]

Yeah you can just use the $9 plan.

[arhoy]

Awesome thank you! I am tinkering with your starter file and noticed in your ProductForm.js file You can click on the options have have the name and price change. Which is really awesome. I am looking to also have it change the image as well similar to https://www.apple.com/ca/shop/buy-iphone/iphone-11/6.1-inch-display-128gb-yellow

Do you have example of how this could be done? It would make this starter file even more amazing.

[AlexanderProd]

Unfortunately I don’t have any examples of how to archive the same effect.

I’m also not planing on adding features like that to the starter because its not really in the nature of a starter to include advanced styling. The starter is supposed to be free of bloat so everybody can easily add their own styling without having to remove much beforehand. :)

[arhoy]

I see okay that makes sense.

[snicol21]

I'm seeing the exact same issue as mentioned above. Has anybody found a better resolution as opposed to hard coding the SHOP_NAME and SHOPIFY_ACCESS_TOKEN in the context provider?

[AlexanderProd]

@snicol21 are you also experiencing the problem when building with Netlify?

[snicol21]

@AlexanderProd Yes, but I have found a solution. It’s was mentioned earlier, but I learned from here:

https://www.gatsbyjs.org/docs/environment-variables/#client-side-javascript

That I need to add “GATSBY_” as a prefix to my environment variables in my .env files as well as in my Netlify environment variables. This fixed everything! Loving the starter set, appreciate the good work!

[intelligence]

I added GATSBY_ to my environment variables on Netlify and then cleaned cache and redeployed but I'm still seeing issues. Any ideas?

Edit: Works just fine locally, I might add.

[intelligence]

Hardcoding the values fixed it for me, not ideally, but works for now :)

[unimprobable]

@snicol21 I added GATSBY_ to my SHOP_NAME and it works fine with Netlify, but it won't work with SHOPIFY_ACCESS_TOKEN. The only way I can get it to deploy on Netlify is hard-coding the SHOPIFY_ACCESS_TOKEN. Gatsby develop also fails when using GATSBY_SHOPIFY_ACCESSTOKEN (works fine without GATSBY) How did you make it work? Thanks in advance!

@intelligence Did you ever figure out the environment variable setup issue?

[snicol21]

@intelligence This setup worked for me. Not sure if this is what you were looking for.

[unimprobable]

@snicol21 Thanks for sharing, I tried that same setup and it hasn't worked. What does your contextProvider.js code look like for this part? Cheers.

[unimprobable]

@snicol21 @intelligence I figured it out. I hadn't updated the reference to the accessToken in gatsby-config.js file. Working as expected, thanks!