Heroku / General Deployment Documentation

[ItsMattLawson]

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!

[katiedavis]

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.

[ItsMattLawson]

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.

[katiedavis]

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!

[ItsMattLawson]

@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!!

[katiedavis]

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.

[ItsMattLawson]

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 !!!

[ItsMattLawson]

@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!

[katiedavis]

Wow what a wild ride.

Totally! Thanks for adding steps.

[ItsMattLawson]

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 heroku
• git init : initialise git
• heroku create : create a heroku app

Follow on with the next steps using the newly created heroku app credentials

Update .env file

The 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

[katiedavis]

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 !

[ItsMattLawson]

@katiedavis yes! Completely forgot to add that in! Thank you!

[furnaceX]

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.

[ItsMattLawson]

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! ✌️

[TomGranot]

As a note, works without a hitch for me. Some comments if you're following the Shopify React + Node tutorial:

1. You don't really need a .env file, since the Heroku environment variables take care of that for you.
2. No need to add the scopes in the environment variables or the .env file, since we're adding them directly into Heroku.
3. No need for defining SHOP in the .env file - you're getting it dynamically from the store that was authenticated with your app.
4. Remember that Heroku Free Dynos sleep after 30 minutes of inactivity. This means that if you deploy this on a Free Dyno, there will be a visible delay (between 10-30 seconds in my experience) while the Dyno spins up. If that's acceptable then no worries, but just as an FYI.

Other than that @mattAux's method worked perfectly for me.

[xicovarisco]

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

[theptrk]

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.

[jeremymcclelland]

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.

[StickyMallrat]

Thanks a bunch, that really helped!

[akopcz2]

@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?

[bambache]

@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

[akopcz2]

@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" },

[bambache]

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.

[harishannam]

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.

[theptrk]

@harishannam have you tried updating the packages? If that works we should make a PR to this repo

[harishannam]

@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

[harishannam]

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

[harishannam]

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.

[remotetech]

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?

[uhakdt]

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?

1. urls in the partner dashboard in shopify should be as follows https://youappname.heroku.com and https://youappname.heroku.com/auth/callback
2. Then you go to heroku and you have to add the Config variables - these will need to be the same as you have in your .env file apart from the HOST.
3. For the host you will instead of ngrok url you will need to add the https://youappname.heroku.com redeploy (is what i did, not sure if necessary) and refresh all pages and try again.

[ericksoto451]

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 heroku
• git init : initialise git
• heroku create : create a heroku app

Follow on with the next steps using the newly created heroku app credentials

Update .env file

The 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

[remotetech]

Hope this helps - https://breathmagicpro.com/how-to-deploy-your-shopify-node-js-react-app-to-heroku My Wolf Warrior blog post :)

[ericksoto451]

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!

[remotetech]

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

[shan1122]

[scottkz]

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.

[StickyMallrat]

@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

[rufndev]

@StickyMallrat I ended up having to add the HOST var and removed the trailing '/' which solved my issue. Thank you for the help!