-
Notifications
You must be signed in to change notification settings - Fork 202
Heroku / General Deployment Documentation #277
Comments
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: Just replace the ngrok url with your production url. |
Hey @katiedavis - thank you SO MUCH for coming to my rescue yet again! Is there something I've missed? |
No problem @mattaux! You’ll likely need to set your api_key and other variables in the Heroku cli: Good luck! |
@katiedavis I'm sorry to bother ya again. I've added the config vars as such upon visiting the installation route: 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 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. Also, can you paste your code from your |
Hi Katie! I should have mentioned that I had a hang on that as well yesterday - my apologies! I'm also now getting a huge amount of errors - which cause my Macbook fans to get very loud haha. Created date: Code from
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
After doing a build & then using the installation URL - I had a win! 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. |
Deploying to herokuFor those struggling with deploying to Heroku I've included a step by step below. Set up Heroku
Follow on with the next steps using the newly created heroku app credentials Update
|
Just wanted to add - 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:
Other than that @mattaux's method worked perfectly for me. |
Thanks for your step-by-step @mattaux. It's very helpful. 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. :) Cheers |
Hi @mattaux thanks for the guide, this is great. The app is hosted on Heroku and the config variables point to the apps keys, secret and scopes. 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 Would appreciate any insights, thanks! Edit* |
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 |
@akopcz2 @theptrk @jeremymcclelland PS: |
@bambache 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 Here's a list of the working deps just for reference. "dependencies": { |
Thank you very much @akopcz2 ! This was it! |
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 |
@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 |
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:
|
Hi everyone! Im literally struggling to deploy my shopify app to Heroku. I followed the steps carefully and I received the next message: |
Hope this helps - https://breathmagicpro.com/how-to-deploy-your-shopify-node-js-react-app-to-heroku |
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 I was getting an error stating 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, |
@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!
The text was updated successfully, but these errors were encountered: