How to Deploy Your Shopify Node JS React App to Heroku

This is a work in progress so keep following this post. I’m building my Shopify Node Apps by following the instructions from Shopify found at this link – Shopify App with Node and React  the shopify node serve command starts a local development server that uses the Ngrok service to create a secure tunnel (HTTPS) between your computer and Shopify.

Here are the steps I followed on a Windows 10 computer.
Note: the commands you need to use will depend on your OS Platform
Also this is not yet a finished post, I will come back to refine it soon.

  • My notes along the way!
  • Installed Node JS = v16.13.0 (node -v)
  • npm = 8.1.0 (npm -v)
  • Installed via RubyInstaller for Windows with Devkit
  • Ruby Command Prompt c:> gem install shopify-cli
  • shopify version = 2.6.6 (as of this time)
  • shopify node create
  • app name = my-app
  • Change directories to your new project folder c:\my-app>
  • C:\my-app>
  • C:\my-app>shopify node serve
  • Everything tested good on development store
  • close application
  • Deployment method to Heroku in this case is GitHub
  • create a new free account on Heroku
  • create new node app called my-app
  • login to GitHub
  • create new repository named my-app in GitHub
  • from terminal again in the c:\my-app directory
  • my commands use the SSH keys that I setup in GitHub
  • git init
  • git add .
  • git commit -m “first commit”
  • git remote add origin git@github.com:my-repository/my-app.git
  • git push -u origin master
  • now all your app files have been pushed to GitHub repo
  • In Heroku under deploy chose connect to GitHub
  • connect my-app
  • choose branch to deploy master
  • enable automatic deploys
  • click deploy branch
  • Connect app with your Github repo/branch (it may take a minute or two to load)
  • Place your SHOPIFY_API_KEY and SHOPIFY_API_SECRET_KEY and SCOPES in your Heroku app’s Config Vars located in Settings.
  • Update your Shopify App Urls with your live Heroku app link (https://my-app.herokuapp.com/) and (https://example-app.herokuapp.com/auth/callback)
  • Here is the key part you need to use this type of URL to get your app installed and to run = https://my-app.herokuapp.com/auth?shop=yourstorename

Come back soon as we fine tune this post!

Regards,
Wolf Warrior