How to deploy a shopify app on heroku


Prerequisites

  • Shopify app code (Node.js) in a GitHub repository
  • Heroku account (sign up at heroku.com)
  • Shopify CLI installed (npm install -g @shopify/cli)
  • Heroku CLI installed (brew install heroku/brew/heroku or follow Heroku’s guide)

Step 1: Push Code to GitHub

  1. Initialize a Git repository (if not already done):
   git init
   git add .
   git commit -m "Initial commit"
  1. Create a new repository on GitHub and push your code:
   git remote add origin <your-github-repo-url>
   git push -u origin main

Step 2: Log in to Heroku via CLI

  1. Open a terminal and log in to Heroku:
   heroku login
  1. Create a new Heroku app:
   heroku create <your-app-name>

Step 3: Configure package.json for Heroku Build

Ensure your package.json includes a proper build script (adjust if using a different framework like Next.js or Remix):

"scripts": {
  "build": "echo 'Build script executed' && <your-build-command>",
  "start": "node ."  // or your custom start command
}

Step 4: Build Your Shopify App

Run the Shopify CLI to generate required files:

shopify app build

Step 5: Retrieve Shopify App Environment Variables

Run the following command to view your app credentials:

shopify app env show

Copy the displayed values (HOST, SCOPES, SHOPIFY_API_KEY, SHOPIFY_API_SECRET).


Step 6: Set Environment Variables in Heroku

  1. Go to your Heroku Dashboard → SettingsReveal Config Vars.
  2. Add the following variables (from shopify app env show and app.toml):
   HOST=https://<your-heroku-app-name>.herokuapp.com  
   SCOPES=write_products,read_orders (or your required scopes)  
   SHOPIFY_API_KEY=<your-api-key>  
   SHOPIFY_API_SECRET=<your-api-secret>  

(Optional: Add NODE_ENV=production for better performance.)


Step 7: Deploy to Heroku

  1. Push your code to Heroku (if not using GitHub integration):
   git push heroku main
  1. Trigger a manual build in Heroku:
  • Go to DeployManual DeployDeploy Branch.
  1. Verify deployment:
   heroku logs --tail

Step 8: Update Shopify App URL

  1. In your Shopify Partners Dashboard, go to App Setup.
  2. Update the App URL to:
   https://<your-heroku-app-name>.herokuapp.com
  1. Save changes and test your app in a development store.

Troubleshooting

  • 404 Errors? Ensure HOST matches your Heroku app URL.
  • Build Failing? Check heroku logs --tail for errors.
  • Missing Scopes? Verify SCOPES in Heroku config matches Shopify app settings.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.