Closed ItsMattLawson closed 5 years ago
Hi @mattAux! That text is shown because the app is set up to be an embedded app and go through authentication to be installed on a store.
You’ll need to update your whitelisted urls in the partner dash and then head to the installation route to install your app on a store and test it out: https://github.com/Shopify/shopify-app-cli#loading-your-app-within-the-admin
Just replace the ngrok url with your production url.
Hey @katiedavis - thank you SO MUCH for coming to my rescue yet again! I have followed your direction & am now getting the below.
Is there something I've missed? If I visit the app via my development store, I have these console errors. Which I'm assuming are expected because it's not been authorised correctly.
No problem @mattAux!
You’ll likely need to set your api_key and other variables in the Heroku cli: https://devcenter.heroku.com/articles/config-vars
Good luck!
@katiedavis I'm sorry to bother ya again.
I've added the config vars as such
upon visiting the installation route: https://SOMEAPPNAME.herokuapp.com/auth?shop=MYSHOP.myshopify.com
I don't get redirected to the embedded app in Shopify.
I updated my scopes in the heroku config vars, which after going to the installation url sent me to my store! ( yay ) & accepted the updated access scopes, which then got me stuck at my heroku address & I wasn't redirected to the embedded app in Shopify.
I've also tried adding the host to heroku config var & also the shop. I was would have thought the shop would definitely not be required, but gave it a shot!
What am I doing wrong?? I've not steered far from the default shopify create project
generated files, besides adding an apollo hooks provider in app.js.
Everything is working as expected using ngrok.
Thank you so much for your help! I'll happily provide a writeup within this issue for anyone that is stuck in my boat & just needs that little extra to get across the line!!
Hi Matt! It sounds like it could be an issue with the Provider component that causes the force redirect. Can you do me a favour? Check out the app via the store you installed it on. Log into the store, click apps and see if it loads in the admin there?
Also, can you paste your code from your _app
file here? When did you create this app with the CLI? There was an update to how we were storing the shopOrigin
so it could have something to do with that.
Hi Katie! I should have mentioned that I had a hang on that as well yesterday - my apologies!
After going to the app via the admin just now - I was briefly shown <p>Hello there</p>
which is in my /pages/index.js file for testing.
I'm also now getting a huge amount of errors - which cause my Macbook fans to get very loud haha.
Created date: 16 July 2019
Code from _app.js
:
import { ApolloProvider } from "react-apollo";
import { ApolloProvider as ApolloHooksProvider } from 'react-apollo-hooks';
import App, { Container } from "next/app";
import { AppProvider } from "@shopify/polaris";
import { Provider } from "@shopify/app-bridge-react";
import Cookies from "js-cookie";
import "@shopify/polaris/styles.css";
const client = new ApolloClient({
fetchOptions: {
credentials: "include"
}
});
class MyApp extends App {
render() {
const { Component, pageProps } = this.props;
const shopOrigin = Cookies.get("shopOrigin");
return (
<Container>
<AppProvider>
<Provider
config={{
apiKey: API_KEY,
shopOrigin: shopOrigin,
forceRedirect: true
}}
>
<ApolloProvider client={client}>
<ApolloHooksProvider client={client}>
<Component {...pageProps} />
</ApolloHooksProvider>
</ApolloProvider>
</Provider>
</AppProvider>
</Container>
);
}
}
export default MyApp;
Error here:
I recall upon facing the depreciation issue here: #264 I created a new project to double check my code wasn't too far off the newly generated project. I also did the same just now - to ensure I'm not being a simpleton!
Thanks again @katiedavis !!!
@katiedavis - I've got it working finally!!!
After spinning up multiple new apps & creating different heroku apps & deploying to them - it turns out that removing all quote marks "
from my .env
file seemed to resolve it!
Didn't think it would solve it but did nonetheless.
.env
prior:
SHOPIFY_API_KEY=MY_API_KEY
SHOPIFY_API_SECRET_KEY=MY_API_SECRET
HOST="https://MY_HEROKU_APP.herokuapp.com/"
SHOP=MY_SHOP.myshopify.com
SCOPES=read_products, write_products, write_discounts, read_discounts
.env
now:
SHOPIFY_API_KEY=MY_API_KEY
SHOPIFY_API_SECRET_KEY=MY_API_SECRET
HOST=https://MY_HEROKU_APP.herokuapp.com/
SHOP=MY_SHOP.myshopify.com
SCOPES=read_products, write_products, write_discounts, read_discounts
After doing a build & then using the installation URL - I had a win! Thank you for all your help!
If you're comfortable with leaving this issue open a little longer, I'll do a full write up of steps to take to deploy to heroku within this issue next week. Hopefully anyone that needs just that little step up will benefit.
Cheers!
Wow what a wild ride.
Totally! Thanks for adding steps.
For those struggling with deploying to Heroku I've included a step by step below. This is assuming you already have a heroku account - if not go ahead & create one here
heroku login
: login to herokugit init
: initialise githeroku create
: create a heroku appFollow on with the next steps using the newly created heroku app credentials
.env
fileThe following is the supplied .env.example
. Your .env
file should look very similar to this with the correct credentials to have the app working using ngrok.
SHOPIFY_API_KEY="YOUR_SHOPIFY_API_KEY"
SHOPIFY_API_SECRET_KEY="YOUR_SHOPIFY_SECRET"
HOST="YOUR_TUNNEL_URL"
SHOP="my-shop-name.myshopify.com"
SCOPES=read_products, write_products
Update the file to match the following - using your heroku app url:
SHOPIFY_API_KEY=YOUR_SHOPIFY_API_KEY
SHOPIFY_API_SECRET_KEY=YOUR_SHOPIFY_SECRET
HOST=https://MY-HEROKU-APP.herokuapp.com/
SHOP=my-shop-name.myshopify.com
SCOPES=read_products, write_products
Note: remove all "
( quotation marks ) & include whatever scopes your app requires.
In your app setup, update the URLs to match your .env file. Change out the ngrok URLs to your heroku URLs. See below:
In your terminal, within the root directory of your app
git add .
git commit -m "init commit"
git push heroku master
Visit authentication URL again:
https://MY-HEROKU-APP.herokuapp.com/auth?shop=my-shop-name.myshopify.com
Heroku can return some errors. However, it gives you instruction on how to remove them ( whoop! ) One I recall encountering was needing to remove yarn files - they're instructions are extremely clear on how to remove them should any pop up!!
There may be a better way / order to do the above however this process worked for me! Special thanks to @katiedavis for all of her help. Hopefully this helps anyone stuck in the same boat as I was last week! HAPPY HACKING
Just wanted to add -
the Shopify CLI deploy
command currently deploys to Herkou as well. You can also set your env variables
through the command line:
https://devcenter.heroku.com/articles/config-vars
Thanks for writing this all up @mattAux !
@katiedavis yes! Completely forgot to add that in! Thank you!
Hi @mattAux. Does the work WITHOUT using the ngrok tunnel? Did you need to modify the port for the node.js server to listen on? My node server is listening on port 3000 so that when I use an authorization URL like you have (i.e. without a port), the node server never responds.
More info on my post on Shopify's community.
Hey @furnaceX! I've read your post on the Shopify community. In a quick answer - no I did not need to use the ngrok tunnel or modify the port for live environment.
Since you're using AWS as a hosting solution - I can't offer much insight unfortunately. I've only managed to get this deployed to Heroku - if you're on any kind of deadline, I'd consider using Heroku as I've managed to outline a relatively straight forward step by step above
I'm interested in exploring this as an option at a later stage, when I get the time I'll give it a crack & see if I can provide some info here for ya.
My apologies I can't offer you more! Best of luck! ✌️
As a note, works without a hitch for me. Some comments if you're following the Shopify React + Node tutorial:
.env
file, since the Heroku environment variables take care of that for you..env
file, since we're adding them directly into Heroku.SHOP
in the .env
file - you're getting it dynamically from the store that was authenticated with your app.Other than that @mattAux's method worked perfectly for me.
Thanks for your step-by-step @mattAux. It's very helpful. It's just not clear how you would run the server.js, but the rest is perfectly done.
I used the same technique with a project that @katiedavis created called 'shopify-react-test-v2' (https://github.com/katiedavis/shopify-react-test-v2) which made me finally get unstuck. :) I'm just running into another problem where my app is now in loop, redirecting to and from my shopify store. I tried to explain a little bit here: https://github.com/clucs123/shopify-react-test-v2/issues/1#issue-577336503. Does anyone would know a way to help me out?
Cheers
Hi @mattAux thanks for the guide, this is great. I'm having similar issues after following all the steps here.
The app is hosted on Heroku and the config variables point to the apps keys, secret and scopes.
When I visit https://MY-HEROKU-APP.herokuapp.com/auth?shop=my-shop-name.myshopify.com
it shows the correct permissions screen then redirects to ("/") the root url and just stays there
If I open the app from the development store, the title is there but the page is empty.
This is pretty much a direct copy of $ shopify create node
, I've only changed the header.
https://github.com/theptrk/how-to-deploy-shopify-node-app
Would appreciate any insights, thanks!
Edit*
Adding note, if I switch the App Url to the ngrok and rerun shopify serve
the app renders.
Hey @theptrk , did you ever get your app spinning through Heroku? I'm in a similar boat. I ran through the node app tutorial on shopify, but have no clue for the next steps.
Thanks a bunch, that really helped!
@theptrk @jeremymcclelland I'm experiencing the same issue as well. My app works flawlessly on ngrok but hangs on a gray screen when using the heroku urls . I can also see the app functioning as expected before it hits the redirect. Were you able to find a solution?
@akopcz2 @theptrk @jeremymcclelland I have the same issue: locally with ngrok it works fine (renders and is responsive), from heroku it does not. Also I see lots of erros like this. Even a newly created node app (using the shopify-cli) does not render after deployment and has the same errors. It might have something to do with caching, next.js, not sure. Has anyone found any solution?
PS:
I have noticed it always stops while getting static chunk for error page (in both cases with clean app and with the dev app):
In browser's console Network tab I see: _error-5bdfe767480352e01bfa.js as pending
In Heroku logs it looks like it was sent:
2021-03-03T15:17:27.500611+00:00 heroku[router]: at=info method=GET path="/_next/static/chunks/pages/_error-5bdfe767480352e01bfa.js" host=lit-retreat-20761.herokuapp.com request_id=e83dc0db-238a-4fc7-9c73-69c87ae05749 fwd="79.118.149.223" dyno=web.1 connect=1ms service=18ms status=200 bytes=3808 protocol=https
@bambache Not sure if this will work in your case, but what I had to do was update all of my node modules to match what was installing on Heroku. It seems that there were some breaking changes with updates to some of the "shopify" packages (specifically app bridge) that Heroku was installing, that didn't quite match up with what I had on my local.
I am now able to deploy and run the app successfully on Heroku.
This did involve a bit of trial on error with packages, and I know i remember I ran into an issue with webpack 5 ( Setting it to 4 worked)
Here's a list of the working deps just for reference.
"dependencies": { "@babel/core": "7.12.10", "@babel/polyfill": "^7.6.0", "@babel/preset-env": "^7.12.11", "@babel/register": "^7.12.10", "@fortawesome/fontawesome-svg-core": "^1.2.34", "@fortawesome/react-fontawesome": "^0.1.14", "@shopify/app-bridge-react": "^1.15.0", "@shopify/app-cli-node-generator-helper": "^1.1.2", "@shopify/koa-shopify-auth": "^3.2.0", "@shopify/koa-shopify-graphql-proxy": "^4.1.0", "@shopify/koa-shopify-webhooks": "^2.6.0", "@shopify/polaris": "^5.12.0", "@zeit/next-css": "^1.0.1", "apollo-boost": "^0.4.9", "cross-env": "^7.0.3", "dotenv": "^8.2.0", "graphql": "^14.5.8", "isomorphic-fetch": "^3.0.0", "koa": "^2.13.1", "koa-router": "^10.0.0", "koa-session": "^6.1.0", "mongodb": "^3.6.4", "next": "^10.0.4", "next-env": "^1.1.0", "node-fetch": "^2.6.1", "react": "^16.10.1", "react-apollo": "^3.1.3", "react-beautiful-dnd": "^13.0.0", "react-color": "^2.19.3", "react-dom": "^16.10.1", "styled-components": "^5.2.1", "webpack": "4.44.1", "webpack-sources": "1.4.3" },
Thank you very much @akopcz2 ! This was it!
I bumped the versions of a few dependencies, then I ran npm install
and npm run dev
to check it starts locally.
After deployment it worked like a charm (it was probably next
).
I will keep an eye on those dependencies from now on.
When the sample app is deployed to heroku I get an empty grey screen and then throws a "page not responsive" error. Tried deploying it to Digitalocean apps and Vercel but apparently same issue over those as well.
@harishannam have you tried updating the packages? If that works we should make a PR to this repo
@harishannam have you tried updating the packages? If that works we should make a PR to this repo
@theptrk I created the base app by using shopify-app-node apollo sample (https://github.com/Shopify/shopify-app-node/tree/tutorial_fetch_data_with_apollo)
I feel the packages are already up-to-date on that
Was able to figure out that the base version of the app works fine, but page freezes when we use the apollo version of it (https://github.com/Shopify/shopify-app-node/tree/tutorial_fetch_data_with_apollo).
Facing this same issue on a fresh installation of a standalone DigitalOcean Ubuntu 20.04 nginx droplet as well
The problem occurs if we use 1.29.0
version of app bridge components. Reverting it back to 1.28.0 doesn't freeze the app and works as expected.
I'm trying to deploy Shopify Node JS React App to Heroku and had many issues that are fixed now however I'm getting auth?shop=undefined now.
https://MY-HEROKU-APP/auth?shop=undefined
https://undefined/admin/oauth/authorize?client_id=a74dcbf902a8a495e6bb4c38fb3b9a78&scope=write_produ...
Does this mean I just need to setup the Shopify App Bridge?
Not sure if this will help anyone - but my solution was: When you create the default app using shopify node create - in the .env file it puts the host as https://3544-86-0-153-189.ngrok.io Which is correct when you try to use ngrok. What do you have to do next?
Deploying to heroku
For those struggling with deploying to Heroku I've included a step by step below. This is assuming you already have a heroku account - if not go ahead & create one here
Set up Heroku
- Ensure you have the Heroku CLI installed - See here
heroku login
: login to herokugit init
: initialise githeroku create
: create a heroku appFollow on with the next steps using the newly created heroku app credentials
Update
.env
fileThe following is the supplied
.env.example
. Your.env
file should look very similar to this with the correct credentials to have the app working using ngrok.SHOPIFY_API_KEY="YOUR_SHOPIFY_API_KEY" SHOPIFY_API_SECRET_KEY="YOUR_SHOPIFY_SECRET" HOST="YOUR_TUNNEL_URL" SHOP="my-shop-name.myshopify.com" SCOPES=read_products, write_products
Update the file to match the following - using your heroku app url:
SHOPIFY_API_KEY=YOUR_SHOPIFY_API_KEY SHOPIFY_API_SECRET_KEY=YOUR_SHOPIFY_SECRET HOST=https://MY-HEROKU-APP.herokuapp.com/ SHOP=my-shop-name.myshopify.com SCOPES=read_products, write_products
Note: remove all
"
( quotation marks ) & include whatever scopes your app requires.Update URLs
In your app setup, update the URLs to match your .env file. Change out the ngrok URLs to your heroku URLs. See below:
Setup Config Vars in Heroku Admin
- Access your heroku dashboard & go into your apps overview pane.
- Under settings there is a "Config Vars" section.
- Within this section add the required info, see below for example.
Time to Build
In your terminal, within the root directory of your app
git add .
git commit -m "init commit"
git push heroku master
Go through Authentication URL
Visit authentication URL again:
https://MY-HEROKU-APP.herokuapp.com/auth?shop=my-shop-name.myshopify.com
You should be good to go!!
Issues
Heroku can return some errors. However, it gives you instruction on how to remove them ( whoop! ) One I recall encountering was needing to remove yarn files - they're instructions are extremely clear on how to remove them should any pop up!!
There may be a better way / order to do the above however this process worked for me! Special thanks to @katiedavis for all of her help. Hopefully this helps anyone stuck in the same boat as I was last week! HAPPY HACKING
Hi everyone! Im literally struggling to deploy my shopify app to Heroku. I followed the steps carefully and I received the next message: I literally created a new shopify Node app with Shopify CLI and followed the steps above and same result.Am I missing something important. Thanks
Hope this helps - https://breathmagicpro.com/how-to-deploy-your-shopify-node-js-react-app-to-heroku My Wolf Warrior blog post :)
Hope this helps - https://breathmagicpro.com/how-to-deploy-your-shopify-node-js-react-app-to-heroku My Wolf Warrior blog post :)
Hi mate! I followed the steps and I still have the same error. I saw in your blog page that your post relate with this, is still not done. Can you tell me what are the next steps. Thank you! Regards!
Hi ericksoto451, it worked for me as soon as I realized that I don't launch the app from Heroku, you have to either install it from your Shopify Partners Dashboard or using a link similar to this https://my-app.herokuapp.com/auth?shop=yourstorename and you never launch the app from Heroku and everything works just fine. I hope this helps....Regards, remotetech
If you go into your Heroku setting page and click on the "More" drop-down in the top right corner and then click "View logs" this will show you your terminal stdout where all console.logs
and errors will appear. Depending on what you find there, that may help lead you in the right direction. For me, it was two issues.
I was getting an error stating cannot split string of undefined - SHOP
. I hadn't included this env. var. since it's dynamically resolved from the store the apps are installed on, but I directly referenced it when I initialized the Shopify API in my server.ts file:
Shopify.Context.initialize({ API_KEY: process.env.SHOPIFY_API_KEY!, API_SECRET_KEY: process.env.SHOPIFY_API_SECRET!, SCOPES: process.env.SCOPES!.split(','), HOST_NAME: process.env.HOST!.replace(/https:\/\/|\/$/g, ''), API_VERSION: '2022-04' as ApiVersion, IS_EMBEDDED_APP: true, SESSION_STORAGE: DatastoreSessions })
So I had set up my env. vars. incorrectly in Heroku.
Secondly, I hadn't made the first official push to the Heroku repo endpoint, https://git.heroku.com/<your-app-name>.git
. You need to git remote add https://git.heroku.com/<your-app-name>.git
if you haven't already, and then push at least once for the freezing issue to resolve. I hope this helps some of you.
@NathanRuf looks like you don't have your environment variables setup right in heroku...you have to setup all the vars from your local .env file in heroku under settings->config vars
@StickyMallrat I ended up having to add the HOST var and removed the trailing '/' which solved my issue. Thank you for the help!
Issue summary
I'm novice with heroku & shopify app's in general & I apologise if this is not the correct place for this issue.
I'm having an extremely hard time deploying my app to heroku.
I have a successful build on heroku, but I get hit with
Expected a valid shop query parameter
when I open the app url.I haven't been able to find any Node.js + React app deployment documentation on Shopify Developer Resources or forums.
Buildpack on heroku is heroku/nodejs if this is of any help.
Again, my apologies if this is the incorrect place for this, I have not been able to find clear instruction on Shopify React app deployment.
Thanks for your hard work guys!