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 project so these steps are still unproven but we will get it working soon.

  • My notes along the way!
  • Installed Node JS = v14.18.1 (node -v)
  • npm = 6.14.15 (npm -v)
  • Installed via RubyInstaller for Windows with Devkit
  • Ruby Command Prompt c:> gem install shopify-cli
  • shopify version = 2.6.5 (as of this time)
  • shopify node create
  • app name = test-app24
  • Change directories to your new project folder c:\test-app24>
  • C:\test-app24>
  • C:\test-app24>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 test-app24
  • login to GitHub
  • create new repository named test-app24 in GitHub
  • from terminal again in the c:\test-app24 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:remotetech/test-app24.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 test-app24
  • 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://example-app.herokuapp.com/) and (https://example-app.herokuapp.com/auth/callback)

Come back soon as we will complete this!

Regards,
James (Tech Support)
JDHL Technologies
Get Pixel Conversions API on the – Shopify App Store
P.S. your 5 star experience is our goal.
Thanks again from all of us here at Pixel Conversions API
And remember we are always here for you

Visual Studio Code – Turn Line Numbers Off or On in Windows 10

  1. go into settings (ctrl + ,)
  2. type in search Line Numbers
  3. look for Editor: Line Numbers
  4. change to either Off or On
  5. close settings and you will see the change


Regards,
James (Tech Support)
Get Pixel Conversions API on the Shopify App Store
P.S. your 5 star experience is our goal.
Thanks again from all of us here at Pixel Conversion Pro and remember, you are Awesome!

Adding iPhone 12 Pro Max to Chromes Emulated Devices

In Google Chrome Inspector (Developer Tools) Click on edit then Add custom device

iPhone 12 Pro Max
428 x 926 x 3
User agent string =
Mozilla/5.0 (iPhone; CPU iPhone OS 13_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1
Mobile

That’s all you need.

Here is some additional info for iPhone 12 Pro Max:
Display: 6.7″ Super Retina XDR (OLED)
Screen resolution (points): 428 x 926
Native resolution (pixels): 1284 x 2778 (458 ppi)
Scale factor: 3x
Portrait size classes: w: Compact, h: Regular
Landscape size classes: w: Regular, h: Compact


Regards,
James (Tech Support)
Get Pixel Conversions API on the Shopify App Store
P.S. your 5 star experience is our goal.
Thanks again from all of us here at Pixel Conversion Pro and remember, you are Awesome!

P.S. If you found this helpful, please share on Facebook and Twitter. Thank you!